/* --- Catálogo (columna 1) --- */
.builder-bloque-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: grab;
    transition: all 0.12s;
    user-select: none;
}
.builder-bloque-cat:hover {
    background: #EFF6FF;
    border-color: #93C5FD;
    transform: translateX(2px);
}
.builder-bloque-cat:active { cursor: grabbing; }

/* "En uso" — bloques ya presentes en el canvas. Marca visual verde
   + pulse animation al hover (wow factor, track-e 2026-06-16). */
.builder-bloque-usado {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border-color: #6EE7B7;
}
.builder-bloque-usado:hover {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    border-color: #34D399;
    animation: builder-bloque-usado-pulse 1.4s ease-in-out infinite;
}
@keyframes builder-bloque-usado-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18); }
}
.builder-bloque-usado-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #10B981;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
    pointer-events: none;
}
.builder-bloque-cat { position: relative; }

.builder-wrap {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 16px;
    align-items: start;
    position: relative;
}
@media (max-width: 1300px) {
    .builder-wrap { grid-template-columns: 240px 1fr 280px; }
}
@media (max-width: 1100px) {
    .builder-wrap { grid-template-columns: 220px 1fr; }
    .builder-props { display: none; }
}
@media (max-width: 900px) {
    .builder-wrap { grid-template-columns: 1fr; }
    .builder-props { display: block; }
}

.builder-catalogo-search {
    padding: 8px 12px;
    border-bottom: 1px solid #F1F5F9;
}
.builder-catalogo-search input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    background: #FFFFFF;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.builder-catalogo-search input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.builder-catalogo-body {
    max-height: 480px;  /* alto para 7 bloques (~68px c/u) */
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}
.builder-catalogo-body::-webkit-scrollbar { width: 6px; }
.builder-catalogo-body::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}
.builder-bloque-cat.builder-bloque-cat-hidden { display: none; }
.builder-catalogo-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: #6B7280;
}

.builder-bloque-ico {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 6px;
}
.builder-bloque-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
}
.builder-bloque-desc {
    font-size: 11px;
    color: #6B7280;
    margin-top: 2px;
    line-height: 1.3;
}

/* --- Canvas (columna 2) --- */
.builder-canvas-wrap { min-height: 500px; }
/* Panel de propiedades: 3a columna del grid (siempre visible) */
.builder-props {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    min-height: 400px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    align-self: start;
    position: sticky;
    top: 16px;
}
.builder-props.builder-props-abierto { /* compatibilidad JS */ }
.builder-props-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #E5E7EB;
    background: #F9FAFB;
    border-radius: 10px 10px 0 0;
}
.builder-props-cerrar {
    background: transparent;
    border: 0;
    color: #6B7280;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
}
.builder-props-cerrar:hover { background: #F3F4F6; color: #0F172A; }
.builder-props-body { padding: 14px; }

/* Inputs del panel de propiedades (look premium) */
.builder-props-body { padding: 16px; }
.builder-props-body .prop-grupo { margin-bottom: 14px; }
.builder-props-body .prop-grupo label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.builder-props-body input[type="text"],
.builder-props-body input[type="number"],
.builder-props-body input[type="url"],
.builder-props-body input[type="date"],
.builder-props-body textarea,
.builder-props-body select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    background: #FFFFFF;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.builder-props-body input[type="text"]:focus,
.builder-props-body input[type="number"]:focus,
.builder-props-body input[type="url"]:focus,
.builder-props-body input[type="date"]:focus,
.builder-props-body textarea:focus,
.builder-props-body select:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.builder-props-body textarea { min-height: 80px; resize: vertical; }
.builder-props-body input[type="color"] {
    width: 100%;
    height: 36px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px;
}
.builder-props-body .prop-tipo {
    display: inline-block;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #94A3B8;
}
.builder-props-body .prop-ayuda {
    font-size: 11px;
    color: #64748B;
    margin-top: 4px;
    line-height: 1.4;
}

.builder-props-vacio {
    text-align: center;
    padding: 30px 16px;
    color: #6B7280;
    font-size: 13px;
}
.builder-props-vacio-icono { font-size: 32px; opacity: 0.4; margin-bottom: 8px; }
@media (max-width: 900px) {
    .builder-props {
        position: static;
        transform: none;
        width: 100%;
        max-height: none;
    }
}

.builder-canvas {
    min-height: 380px;
    padding: 8px;
    background-color: #FAFBFC;
    /* Figma-style grid pattern (wow factor, track-e 2026-06-16) */
    background-image:
        linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
    border: 2px dashed #E5E7EB;
    border-radius: 8px;
    transition: background-color 0.2s, border-color 0.2s;
}
/* Slot highlight cuando se arrastra algo encima del canvas */
.builder-canvas.builder-canvas-drop-target {
    background-color: #EFF6FF;
    border-color: #2563EB;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.18);
}
.builder-bloque {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.12s;
    user-select: none;
}
.builder-bloque:hover { border-color: #93C5FD; }
.builder-bloque.builder-bloque-selected {
    border-color: #2563EB;
    background: #EFF6FF;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}
.builder-bloque.builder-bloque-off {
    opacity: 0.5;
    background: #F3F4F6;
}
.builder-bloque-handle {
    cursor: grab;
    color: #9CA3AF;
    font-weight: 700;
    font-size: 16px;
    padding: 0 4px;
    user-select: none;
    flex-shrink: 0;
}
.builder-bloque-handle:hover { color: #4B5563; }
.builder-bloque-handle:active { cursor: grabbing; }
.builder-bloque-icono {
    font-size: 22px;
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #F3F4F6;
    border-radius: 6px;
}
.builder-bloque-info { flex: 1; min-width: 0; }
.builder-bloque-tit {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
}
.builder-bloque-meta {
    font-size: 11px;
    color: #6B7280;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.builder-bloque-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.builder-btn-edit,
.builder-btn-del {
    background: transparent;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
    line-height: 1;
}
.builder-btn-edit:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
}
.builder-btn-del:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
}
.builder-toolbar {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.builder-vacio {
    text-align: center;
    padding: 60px 20px;
    color: #6B7280;
}
.builder-vacio h3 {
    color: #0F172A;
    margin: 8px 0 4px;
    font-size: 16px;
}

/* Sortable feedback */
.builder-ghost {
    background: #DBEAFE !important;
    border: 2px dashed #2563EB !important;
    opacity: 0.7;
}
.builder-chosen { box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.builder-drag { opacity: 0.5; }

/* --- Switch ON/OFF --- */
.builder-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}
.builder-switch input { display: none; }
.builder-switch-slider {
    position: absolute;
    inset: 0;
    background: #D1D5DB;
    border-radius: 999px;
    transition: background 0.15s;
}
.builder-switch-slider::before {
    content: '';
    position: absolute;
    left: 2px; top: 2px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.builder-switch input:checked + .builder-switch-slider { background: #10B981; }
.builder-switch input:checked + .builder-switch-slider::before { transform: translateX(16px); }

/* --- Panel de propiedades (columna 3) --- */
.builder-props-vacio {
    text-align: center;
    padding: 60px 16px;
    color: #6B7280;
}
.builder-props-vacio-icono {
    font-size: 36px;
    opacity: 0.3;
}
.builder-props-activo { padding: 4px; }
.builder-props-tipo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: #F3F4F6;
    border-radius: 8px;
}
.builder-props-ico {
    font-size: 24px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 8px;
    flex-shrink: 0;
}
.builder-props-nombre {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}
.builder-props-id {
    font-size: 11px;
    color: #6B7280;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Modal preview ---
   FIX 2026-07-30 MASH: el modal de fidelidad (/empresa/admin/fidelidad/)
   se renderizaba sin centrar y con backdrop transparente porque fidelidad
   SOLO carga fidelidad.css (no builder.css). El .builder-modal de admin.css
   era la version VIEJA (z-index 100, sin flex-center, 60% opacidad).
   Solucion: subir a admin.css el patron moderno (z-index 100000,
   78% opacidad, flex-center, viewport completo) + .builder-modal-contenido
   para que CUALQUIER modulo admin pueda usar modales sin tener que
   cargar builder.css. */
.builder-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}
.builder-modal[hidden] { display: none !important; }
.builder-modal-contenido {
    position: relative;
    background: #FFF;
    border-radius: 12px;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: auto;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.40), 0 2px 8px rgba(15, 23, 42, 0.10);
}
.builder-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #E2E8F0;
}
.builder-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.builder-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #94A3B8;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
}
.builder-modal-close:hover { color: #1E293B; }
.builder-modal iframe,
.builder-preview-iframe {
    flex: 1;
    border: none;
    width: 100%;
    background: #FFF;
}
.builder-modal-foot {
    padding: 12px 20px;
    border-top: 1px solid #E2E8F0;
    text-align: right;
}

.builder-vacio-icono-grande { font-size: 48px; }
.builder-props-vacio-texto { text-align: center; margin-top: 12px; }


/* --- Campo "imagen_ia" en builder: preview + boton generar --- */
.builder-campo-imagen-ia { margin-bottom: 14px; }
.builder-campo-imagen-ia .builder-campo-ayuda { display: block; margin: 4px 0 6px; font-size: 11px; }
.builder-img-preview {
    margin: 6px 0; border-radius: var(--radio-md); overflow: hidden;
    border: 1px solid var(--color-borde); background: var(--color-fondo);
    min-height: 70px; display: flex; align-items: center; justify-content: center;
}
.builder-img-preview img { display: block; max-width: 100%; height: auto; }
.builder-img-preview-vacio { color: var(--color-texto-suave); font-size: 12px; padding: 18px 8px; }
.builder-img-ia-row {
    display: flex; gap: 6px; align-items: stretch; margin-top: 6px;
}
.builder-img-ia-row input[type="text"] {
    flex: 1; min-width: 0; padding: 7px 10px; font-size: 12px;
    border: 1px solid var(--color-borde); border-radius: var(--radio-md);
    background: #fff; color: var(--color-texto);
}
.builder-img-ia-row .btn-ia {
    white-space: nowrap; padding: 7px 12px; font-size: 12px;
    background: linear-gradient(135deg, #7C3AED 0%, #2563EB 100%);
    color: #fff; border: 0; border-radius: var(--radio-md); cursor: pointer;
    transition: transform .15s ease;
}
.builder-img-ia-row .btn-ia:hover:not(:disabled) { transform: translateY(-1px); }
.builder-img-ia-row .btn-ia:disabled { opacity: .5; cursor: not-allowed; }
.builder-img-ia-row .btn-upload {
    white-space: nowrap; padding: 7px 12px; font-size: 12px;
    background: #fff; color: var(--color-texto); border: 1px solid var(--color-borde);
    border-radius: var(--radio-md); cursor: pointer;
    transition: all .15s ease;
}
.builder-img-ia-row .btn-upload:hover {
    background: var(--color-fondo-2);
    border-color: var(--color-primario);
    color: var(--color-primario);
}
.builder-img-ia-row .btn-quitar-img {
    white-space: nowrap; padding: 7px 12px; font-size: 12px;
    background: #fff; color: #B91C1C; border: 1px solid #FECACA;
    border-radius: var(--radio-md); cursor: pointer;
    transition: all .15s ease;
    margin-left: auto;
}
.builder-img-ia-row .btn-quitar-img:hover {
    background: #FEF2F2;
    border-color: #F87171;
    color: #991B1B;
}
.builder-img-recomendado {
    display: block;
    margin: 4px 0 6px;
    font-size: 11px;
    color: var(--color-texto-suave);
}
.builder-img-ia-prompt {
    width: 100%;
    margin-top: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.45;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: #fff;
    color: var(--color-texto);
    resize: vertical;
    min-height: 60px;
}
.builder-img-ia-prompt:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.builder-img-ia-status {
    margin-top: 6px; padding: 7px 10px; font-size: 12px;
    border-radius: var(--radio-md); line-height: 1.4;
}
.builder-img-ia-status-loading {
    background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE;
}
.builder-img-ia-status-ok {
    background: #F0FDF4; color: #166534; border: 1px solid #BBF7D0;
}
.builder-img-ia-status-error {
    background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA;
}

/* --- Track-e 2026-06-16: nuevos tipos de campo en el builder --- */
.builder-campo-ayuda {
    display: block;
    margin: 4px 0 6px;
    font-size: 11px;
    color: #6B7280;
    line-height: 1.4;
}

/* Color picker (color + text sincronizados) */
.builder-campo-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.builder-campo-color-row input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
}
.builder-campo-color-row input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #fff;
    color: var(--color-texto);
}
.builder-campo-color-row input[type="text"]:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* YouTube: preview thumbnail debajo del input */
.builder-campo-yt-preview {
    display: none;
    margin-top: 8px;
    position: relative;
    aspect-ratio: 16/9;
    background: #000000;
    border-radius: 8px;
    overflow: hidden;
    max-width: 320px;
}
.builder-campo-yt-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Archivos (bloque descargas): lista de filas con icono+inputs+del */
.builder-campo-archivos { margin-bottom: 12px; }
.builder-archivos-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.builder-archivo-fila {
    display: grid;
    grid-template-columns: 36px 1fr 1.4fr 70px 32px;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    transition: background .12s ease, border-color .12s ease;
}
.builder-archivo-fila:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}
.builder-archivo-ico {
    font-size: 22px;
    text-align: center;
    line-height: 1;
}
.builder-archivo-fila input {
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #fff;
    color: var(--color-texto);
    min-width: 0;
}
.builder-archivo-fila input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10);
}
.builder-archivo-del {
    background: transparent;
    border: 0;
    color: #DC2626;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: background .12s ease;
}
.builder-archivo-del:hover { background: #FEF2F2; }
.builder-archivo-add {
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px dashed #93C5FD;
    width: 100%;
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
}
.builder-archivo-add:hover { background: #DBEAFE; }

/* Responsive: stack de archivos en mobile */
@media (max-width: 640px) {
    .builder-archivo-fila {
        grid-template-columns: 36px 1fr 32px;
        grid-template-areas:
            "ico nombre del"
            ".   url    .  "
            ".   tamano .  ";
    }
    .builder-archivo-ico { grid-area: ico; }
    .builder-archivo-fila input[data-archivo-campo="nombre"] { grid-area: nombre; }
    .builder-archivo-fila input[data-archivo-campo="url"]    { grid-area: url; }
    .builder-archivo-fila input[data-archivo-campo="tamano"] { grid-area: tamano; }
    .builder-archivo-del { grid-area: del; }
}
/* ============================================================
   MODULO CSD (Certificado de Sello Digital)
   modulos/admin/csd/
   --------------------------------------------------------------
   Visual: glassmorphism cards, drag&drop zone, progress bar,
   confetti animation, shake on error, status badges por
   vigencia del certificado.
   ============================================================ */

.csd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 18px;
    margin-top: 20px;
}

.csd-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(243,244,246,0.85) 100%);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .2s ease, box-shadow .2s ease;
}
.csd-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10);
}
.csd-card-activo {
    border-left: 4px solid #10B981;
}
.csd-card-inactivo {
    opacity: 0.72;
    border-left: 4px solid #94A3B8;
}
.csd-card-vencido {
    border-left-color: #DC2626;
}
.csd-card-porvencer {
    border-left-color: #F59E0B;
}

.csd-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.csd-card-rfc {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    font-size: 16px;
    color: #0F172A;
    letter-spacing: 0.5px;
}
.csd-card-razon {
    font-size: 14px;
    color: #475569;
    margin-bottom: 12px;
    line-height: 1.35;
    word-break: break-word;
}
.csd-card-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    font-size: 12.5px;
    color: #64748B;
    margin-bottom: 14px;
}
.csd-card-meta strong {
    color: #1F2937;
    font-weight: 600;
}
.csd-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.csd-badge-activo { background: #DCFCE7; color: #166534; }
.csd-badge-inactivo { background: #F1F5F9; color: #475569; }
.csd-badge-vencido { background: #FEE2E2; color: #991B1B; }
.csd-badge-porvencer { background: #FEF3C7; color: #92400E; }
.csd-badge-regimen {
    background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE;
    font-family: ui-monospace, monospace;
}

.csd-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid rgba(229, 231, 235, 0.7);
}

/* Drag&drop zone */
.csd-dropzone {
    border: 2px dashed #CBD5E1;
    border-radius: 12px;
    padding: 28px 20px;
    text-align: center;
    background: rgba(248, 250, 252, 0.5);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
    color: #64748B;
}
.csd-dropzone:hover, .csd-dropzone.csd-drag {
    border-color: #2563EB;
    background: rgba(239, 246, 255, 0.7);
    color: #1E40AF;
}
.csd-dropzone-icono {
    font-size: 38px;
    margin-bottom: 6px;
    display: block;
}
.csd-dropzone-texto {
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 4px;
}
.csd-dropzone-ayuda {
    font-size: 11.5px;
    color: #94A3B8;
}
.csd-dropzone-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.csd-file-preview {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    background: #F0F9FF;
    border: 1px solid #BAE6FD;
    border-radius: 8px;
    font-size: 12.5px;
    color: #0C4A6E;
    text-align: left;
    word-break: break-all;
}
.csd-file-preview.csd-show { display: block; }
.csd-file-preview strong { color: #0369A1; }

/* Progress bar animada */
.csd-progress {
    display: none;
    height: 8px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: hidden;
    margin-top: 10px;
    position: relative;
}
.csd-progress.csd-show { display: block; }
.csd-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        #2563EB 0%,
        #7C3AED 50%,
        #2563EB 100%
    );
    background-size: 200% 100%;
    animation: csd-progress-stripes 1.2s linear infinite;
    transition: width .3s ease;
    border-radius: 999px;
}
@keyframes csd-progress-stripes {
    0%   { background-position: 0% 0; }
    100% { background-position: 200% 0; }
}

/* Confetti CSS al subir con exito */
.csd-confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.csd-confetti span {
    position: absolute;
    top: -20px;
    width: 10px; height: 14px;
    border-radius: 2px;
    animation: csd-confetti-fall 2.2s linear forwards;
}
@keyframes csd-confetti-fall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Shake on error */
.csd-shake {
    animation: csd-shake .45s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes csd-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* Status mensajes */
.csd-status-ok {
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    color: #166534;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.csd-status-err {
    background: #FEE2E2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.csd-status-info {
    background: #DBEAFE;
    border: 1px solid #93C5FD;
    color: #1E40AF;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* Form fields */
.csd-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 720px) {
    .csd-form-grid { grid-template-columns: 1fr; }
}
.csd-form-section {
    margin-top: 16px;
}
.csd-form-section h4 {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E2E8F0;
}
.csd-ayuda {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: #94A3B8;
    line-height: 1.4;
}

/* Empty state */
.csd-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748B;
}
.csd-empty-icono {
    font-size: 56px;
    margin-bottom: 12px;
    display: block;
    opacity: 0.7;
}
.csd-empty-titulo {
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

/* ============================================================
   BLOQUES NUEVOS DEL BUILDER (header_con_logo, header_empleado)
   --------------------------------------------------------------
   El builder muestra solo el nombre + icono en el canvas central.
   En el panel de propiedades (columna derecha) aparece un
   <select> con la lista de empleados (campo 'empleado_id').
   Estos estilos mejoran ese selector y muestran una preview
   discreta del bloque seleccionado dentro del panel.
   ============================================================ */

/* --- Hint visual en el panel de propiedades cuando se
   selecciona un bloque header_empleado o header_con_logo. --- */
.builder-props-activo[data-tipo-hint="header_empleado"],
.builder-props-activo[data-tipo-hint="header_con_logo"] {
    position: relative;
}

/* --- Campo de ayuda del dropdown de empleados: un mini-card
   con la foto + nombre del empleado seleccionado. --- */
.builder-empleado-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
}
.builder-empleado-preview-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario, #2563EB) 0%, var(--color-secundario, #7C3AED) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
}
.builder-empleado-preview-nombre {
    font-weight: 600;
    color: #0F172A;
}
.builder-empleado-preview-cargo {
    color: #64748B;
    font-size: 11px;
    margin-left: 4px;
}

/* --- El select del builder hereda estilos del form-group;
   le damos un width completo y padding consistente. --- */
.builder-props select[data-cfg] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-md);
    background: #fff;
    color: var(--color-texto);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.builder-props select[data-cfg]:focus {
    outline: none;
    border-color: var(--color-primario, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

/* ============================================================
   LOGO & FAVICON UPLOADER (modulos/admin/datos_logo.php)
   --------------------------------------------------------------
   Drag-and-drop zone con glassmorphism, skeleton-loader,
   animaciones sutiles. Mobile-first.
   ============================================================ */

/* --- Tabs (logo / favicon) --- */
.emp-logo-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06);
    max-width: 520px;
}
.emp-logo-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.emp-logo-tab::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}
.emp-logo-tab > * { position: relative; z-index: 1; }
.emp-logo-tab:hover {
    color: #1E293B;
    transform: translateY(-1px);
}
.emp-logo-tab.activo {
    color: #fff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.32);
}
.emp-logo-tab.activo::before { opacity: 1; }
.emp-logo-tab-icono {
    font-size: 18px;
    line-height: 1;
}

/* --- Card uploader principal --- */
.emp-logo-uploader {
    max-width: 720px;
    padding: 28px 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.emp-logo-uploader::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #2563EB 100%);
    background-size: 200% 100%;
    animation: emp-logo-shimmer 4s linear infinite;
}
@keyframes emp-logo-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.emp-logo-uploader-head { margin-bottom: 20px; }
.emp-logo-uploader-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 6px;
}
.emp-logo-uploader-ayuda {
    font-size: 13px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}

/* --- Preview --- */
.emp-logo-preview-wrap {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.emp-logo-preview {
    width: 220px;
    height: 220px;
    border-radius: 16px;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    position: relative;
}
.emp-logo-preview:hover {
    transform: scale(1.03);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.emp-logo-preview-favicon { width: 96px; height: 96px; }
.emp-logo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    animation: emp-logo-fade-in 0.4s ease;
}
@keyframes emp-logo-fade-in {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.emp-logo-preview-empty {
    border: 2px dashed #CBD5E1;
    background: rgba(241, 245, 249, 0.5);
    box-shadow: none;
}
.emp-logo-preview-placeholder {
    text-align: center;
    color: #94A3B8;
    padding: 20px;
}
.emp-logo-preview-emoji {
    display: block;
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.emp-logo-preview-empty p { font-size: 13px; margin: 4px 0; }
.emp-logo-preview-hint { font-size: 11px; color: #94A3B8; }

/* --- Form inline (botón eliminar) --- */
.emp-logo-form-inline {
    display: inline-block;
    margin: 0;
}
.emp-logo-errores {
    margin-left: 20px;
}

/* --- Drop zone --- */
.emp-logo-form-upload { margin: 0; }
.emp-logo-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 20px;
    border: 2px dashed #94A3B8;
    border-radius: 16px;
    background: rgba(241, 245, 249, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    margin-bottom: 18px;
    text-align: center;
}
.emp-logo-drop-zone::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.emp-logo-drop-zone:hover {
    border-color: #2563EB;
    border-style: solid;
    background: rgba(37, 99, 235, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}
.emp-logo-drop-zone:hover::before { opacity: 1; }
.emp-logo-drop-zone-hover {
    border-color: #7C3AED;
    border-style: solid;
    background: rgba(124, 58, 237, 0.08);
    transform: scale(1.01);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 12px 32px rgba(124, 58, 237, 0.18);
    animation: emp-logo-pulse 1.2s ease-in-out infinite;
}
@keyframes emp-logo-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 12px 32px rgba(124, 58, 237, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(124, 58, 237, 0.18), 0 16px 40px rgba(124, 58, 237, 0.28); }
}
.emp-logo-drop-icono {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}
.emp-logo-drop-zone:hover .emp-logo-drop-icono { transform: scale(1.1) translateY(-2px); }
.emp-logo-drop-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
}
.emp-logo-drop-ayuda {
    font-size: 12px;
    color: #64748B;
}
.emp-logo-input-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Skeleton loader durante upload --- */
.emp-logo-skeleton {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 16px;
    z-index: 5;
}
.emp-logo-skeleton-bar {
    width: 60%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #E2E8F0 0%, #CBD5E1 50%, #E2E8F0 100%);
    background-size: 200% 100%;
    animation: emp-logo-skeleton-shimmer 1.4s linear infinite;
}
.emp-logo-skeleton-texto {
    font-size: 13px;
    color: #2563EB;
    font-weight: 600;
}
@keyframes emp-logo-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Acciones / botón submit --- */
.emp-logo-acciones {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.emp-logo-btn-loading {
    background: linear-gradient(90deg, #94A3B8 0%, #64748B 50%, #94A3B8 100%) !important;
    background-size: 200% 100% !important;
    animation: emp-logo-btn-shimmer 1.4s linear infinite !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
@keyframes emp-logo-btn-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Volver / links --- */
.emp-logo-volver {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Flash con check verde --- */
.emp-logo-flash {
    position: relative;
    padding-left: 56px;
    animation: emp-logo-flash-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.emp-logo-flash::before {
    content: '✓';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.32);
    animation: emp-logo-flash-check 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes emp-logo-flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes emp-logo-flash-check {
    0%   { transform: translateY(-50%) scale(0); }
    60%  { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

/* --- Mini banner en datos.php --- */
.emp-logo-mini-banner {
    max-width: 720px;
    margin-bottom: 18px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(124, 58, 237, 0.04) 100%);
    border: 1px solid rgba(37, 99, 235, 0.12);
    flex-wrap: wrap;
}
.emp-logo-mini-banner-contenido { flex: 1; min-width: 220px; }
.emp-logo-mini-banner-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
}
.emp-logo-mini-banner-texto {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
}
.emp-logo-mini-banner-previews {
    display: flex;
    gap: 10px;
    align-items: center;
}
.emp-logo-mini-preview {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.emp-logo-mini-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    padding: 4px;
}
.emp-logo-mini-preview-favicon { max-width: 32px; max-height: 32px; padding: 0; }
.emp-logo-mini-preview-vacio {
    font-size: 10px;
    color: #94A3B8;
    text-align: center;
    padding: 4px;
    line-height: 1.2;
}
.emp-logo-mini-banner-btn {
    flex-shrink: 0;
}

/* --- Refactor de secciones en datos.php --- */
.emp-datos-seccion-titulo {
    margin: 32px 0 16px;
    font-size: 18px;
    color: #2563EB;
    font-weight: 700;
}
.emp-datos-seccion-titulo:first-of-type { margin-top: 0; }
.emp-datos-ayuda-bloque {
    display: block;
    margin-bottom: 16px;
}
.emp-datos-textarea-mono {
    font-family: monospace;
    font-size: 13px;
}
.emp-datos-acciones-finales {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.emp-datos-form-principal {
    max-width: 900px;
}

/* --- Responsive mobile --- */
@media (max-width: 640px) {
    .emp-logo-uploader { padding: 22px 18px; }
    .emp-logo-tabs { flex-direction: column; }
    .emp-logo-tab { width: 100%; }
    .emp-logo-preview { width: 160px; height: 160px; }
    .emp-logo-drop-zone { padding: 24px 16px; }
    .emp-logo-drop-icono { font-size: 32px; }
    .emp-logo-mini-banner { flex-direction: column; align-items: flex-start; }
    .emp-logo-mini-banner-btn { width: 100%; }
    .emp-logo-acciones { justify-content: stretch; }
    .emp-logo-acciones .btn { width: 100%; }
    .emp-logo-volver .btn { width: 100%; }
    .emp-datos-acciones-finales { flex-direction: column; align-items: stretch; }
    .emp-datos-acciones-finales .btn { width: 100%; }
}

/* ============================================================
   EMPLEADOS — listado, cards, avatares, foto uploader
   --------------------------------------------------------------
   Paleta azul?violeta. Glassmorphism. Flip on hover en cards.
   ============================================================ */

/* --- Avatar base --- */
.emp-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #FFFFFF;
    font-weight: 700;
    font-family: var(--fuente, 'Inter', sans-serif);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.20);
}
.emp-avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.emp-avatar-md { width: 56px; height: 56px; font-size: 18px; }
.emp-avatar-lg { width: 80px; height: 80px; font-size: 26px; }
.emp-avatar-xl {
    width: 120px;
    height: 120px;
    font-size: 36px;
}
.emp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.emp-avatar-initials {
    letter-spacing: 0.5px;
    line-height: 1;
    user-select: none;
}

/* --- Gradient border (azul?violeta) animado en hover --- */
.emp-avatar-with-gradient-border {
    padding: 3px;
    background:
        linear-gradient(135deg, #FFFFFF 0%, #FFFFFF 100%) padding-box,
        linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #EC4899 100%) border-box;
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}
.emp-avatar-with-gradient-border:hover {
    transform: scale(1.05) rotate(-2deg);
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.32);
}

/* --- Grid de cards de empleados --- */
.emp-empleados-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 24px;
    perspective: 1200px;
}

/* --- Card individual con flip --- */
.emp-empleado-card {
    position: relative;
    min-height: 260px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.6);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.emp-empleado-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.12), 0 6px 12px rgba(124, 58, 237, 0.08);
    border-color: rgba(124, 58, 237, 0.30);
}
.emp-empleado-card-inactivo {
    opacity: 0.65;
    filter: grayscale(0.35);
}
.emp-empleado-card-inactivo:hover {
    opacity: 0.92;
    filter: grayscale(0);
}
.emp-empleado-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #EC4899 100%);
    opacity: 0.85;
}
.emp-empleado-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 260px;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.emp-empleado-card:hover .emp-empleado-card-inner {
    transform: rotateY(180deg);
}
.emp-empleado-card-frente,
.emp-empleado-card-reverso {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 20px 18px 16px;
    display: flex;
    flex-direction: column;
}
.emp-empleado-card-reverso {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #F1F5F9;
    padding: 22px 20px;
}
.emp-empleado-card-reverso-titulo {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94A3B8;
    margin: 0 0 12px 0;
    font-weight: 700;
}
.emp-empleado-card-dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    flex: 1;
}
.emp-empleado-card-dl dt {
    color: #94A3B8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    margin: 0;
}
.emp-empleado-card-dl dd {
    margin: 2px 0 0 0;
    color: #F8FAFC;
    word-break: break-word;
}
.emp-empleado-card-dl a {
    color: #93C5FD;
    text-decoration: none;
    border-bottom: 1px dashed rgba(147, 197, 253, 0.35);
}
.emp-empleado-card-dl a:hover {
    color: #BFDBFE;
    border-bottom-color: #BFDBFE;
}
.emp-empleado-card-dl .muted { color: #94A3B8; }

.emp-empleado-card-info {
    margin-top: 14px;
    text-align: center;
}
.emp-empleado-card-nombre {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 4px 0;
    line-height: 1.25;
}
.emp-empleado-card-cargo {
    font-size: 13px;
    color: #475569;
    margin-bottom: 10px;
}
.emp-empleado-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 12px;
}
.emp-empleado-card-acciones {
    display: flex;
    gap: 8px;
    margin-top: auto;
    justify-content: center;
    flex-wrap: wrap;
}
.emp-empleado-card-acciones form {
    display: inline-block;
    margin: 0;
}

/* --- Uploader de foto (drag & drop) --- */
.emp-foto-uploader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    border: 2px dashed #94A3B8;
    border-radius: 16px;
    background: rgba(241, 245, 249, 0.4);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.emp-foto-uploader::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.emp-foto-uploader:hover {
    border-color: #7C3AED;
    background: rgba(237, 233, 254, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.10);
}
.emp-foto-uploader:hover::before { opacity: 1; }
.emp-foto-uploader-drag {
    border-color: #2563EB !important;
    border-style: solid;
    background: rgba(219, 234, 254, 0.7) !important;
    transform: scale(1.01);
    box-shadow: 0 12px 32px rgba(37, 99, 235, 0.18);
}
.emp-foto-uploader-content { position: relative; z-index: 1; }
.emp-foto-uploader-icono {
    font-size: 40px;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.20));
}
.emp-foto-uploader-texto {
    font-size: 14px;
    color: #334155;
}
.emp-foto-uploader-texto strong { color: #1D4ED8; }
.emp-foto-uploader-ayuda {
    font-size: 12px;
    color: #64748B;
    margin-top: 4px;
}
.emp-foto-uploader input[type=file] { display: none; }

.emp-foto-preview {
    position: relative;
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
.emp-foto-preview img {
    max-width: 220px;
    max-height: 220px;
    border-radius: 12px;
    border: 3px solid transparent;
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(135deg, #2563EB, #7C3AED) border-box;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    object-fit: cover;
}
.emp-foto-preview-quitar {
    position: absolute;
    top: -10px;
    right: calc(50% - 110px - 6px);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #DC2626;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
    transition: transform 0.2s ease;
}
.emp-foto-preview-quitar:hover {
    transform: scale(1.1) rotate(90deg);
    background: #B91C1C;
}

.emp-foto-actual {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(241, 245, 249, 0.5);
    border-radius: 12px;
    border: 1px solid #E2E8F0;
}
.emp-foto-actual-info { flex: 1; }
.emp-foto-actual-info .small-text { font-size: 12px; word-break: break-all; }

/* --- Responsive --- */
@media (max-width: 720px) {
    .emp-empleados-lista {
        grid-template-columns: 1fr;
    }
    .emp-empleado-card { min-height: 220px; }
    .emp-empleado-card-inner { min-height: 220px; }
    .emp-empleado-card-frente,
    .emp-empleado-card-reverso {
        position: relative;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
    .emp-empleado-card-reverso {
        display: none;
    }
    .emp-empleado-card:hover .emp-empleado-card-inner {
        transform: none;
    }
    .emp-empleado-card:hover {
        transform: translateY(-2px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .emp-empleado-card,
    .emp-empleado-card-inner,
    .emp-avatar-with-gradient-border,
    .emp-foto-uploader,
    .emp-foto-preview-quitar {
        transition: none;
    }
    .emp-empleado-card:hover .emp-empleado-card-inner { transform: none; }
}

/* ============================================================
   CRM — Menu badge con pulse para leads pendientes
   --------------------------------------------------------------
   .menu-badge: pill rojo en el sidebar con conteo de leads
                pendientes (cerrado=0). Se muestra solo si
                el conteo > 0.
   .menu-badge-pulse: animacion de pulso cuando hay leads con
                seguimiento vencido (alerta visual urgente).
   .menu-label: wrapper del texto del menu para que el badge
                quede a la derecha con flex:1 + flex-end.

   Wow factor: el badge se ilumina en rojo, late 1.4s, y al
   hover del menu-item crece ligeramente (microinteraccion).
   ============================================================ */
.menu-label {
    flex: 1;
    min-width: 0;
}

.menu-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.40);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

/* Dual badges (calendario): verde=hoy, rojo=vencidos */
.menu-badges-dual {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.menu-badge.menu-badge-hoy {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.40);
}
.menu-badge.menu-badge-vencido {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.40);
}

.menu-item:hover .menu-badge {
    transform: scale(1.08);
}

.menu-badge-pulse {
    animation: crm-badge-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
}

@keyframes crm-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55), 0 1px 3px rgba(239, 68, 68, 0.40);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0), 0 2px 6px rgba(239, 68, 68, 0.55);
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-badge-pulse { animation: none; }
    .menu-item:hover .menu-badge { transform: none; }
}

/* ============================================================
   DASHBOARD — widgets de leads
   --------------------------------------------------------------
   Clases nuevas para los widgets de leads del dashboard
   (crm-widget-*). Complementan crm.css. Vanilla para no
   colisionar con .tarjeta, .grid, .btn existentes.

   - .grid-2-ancho      : grid 2 cols con max-width 1100px.
   - .stat-valor        : numero grande color azul/violeta/verde
                          (variantes .stat-valor-azul, etc).
   - .stat-link         : link "Ver mi landing" flotante derecha.
   - .crm-link-card     : <a> wrapper para crm-widget-leads-item
                          sin subrayado al hover.
   - .crm-flex-min      : flex:1 + min-width:0 (truncar texto).
   - .crm-btn-full      : btn block (width:100% + text-align).
   - .crm-bar-100       : bar chart con width:100% inline.
   ============================================================ */
.grid-2-ancho {
    max-width: 1100px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) {
    .grid-2-ancho { grid-template-columns: 1fr; }
}

.stat-valor {
    font-size: 36px;
    font-weight: 800;
    margin-top: 8px;
    line-height: 1;
}
.stat-valor-azul  { color: #2563EB; }
.stat-valor-violeta { color: #7C3AED; }
.stat-valor-verde { color: #10B981; }

.stat-link {
    float: right;
    color: #1E40AF;
    font-weight: 600;
    text-decoration: none;
}
.stat-link:hover { text-decoration: underline; }

.crm-link-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.crm-link-card:hover { text-decoration: none; color: inherit; }

.crm-flex-min {
    flex: 1;
    min-width: 0;
}

.crm-btn-full {
    width: 100%;
    text-align: center;
    display: inline-block;
}

.crm-bar-100 {
    width: 100%;
    text-align: center;
}

/* ============================================================
   DASHBOARD — bar chart con % dinamica
   --------------------------------------------------------------
   El .crm-widget-estado-bar-relleno se llena segun data-pct
   del padre .crm-widget-estado. Para no usar style="width:..."
   inline, usamos selectores discretos en CSS para multiplos
   de 5% y un fallback con attr() (donde este soportado).
   JS runtime traduce el resto exacto.
   ============================================================ */
.crm-widget-estado[data-pct="0"]  .crm-widget-estado-bar-relleno { width: 0%; }
.crm-widget-estado[data-pct="5"]  .crm-widget-estado-bar-relleno { width: 5%; }
.crm-widget-estado[data-pct="10"] .crm-widget-estado-bar-relleno { width: 10%; }
.crm-widget-estado[data-pct="15"] .crm-widget-estado-bar-relleno { width: 15%; }
.crm-widget-estado[data-pct="20"] .crm-widget-estado-bar-relleno { width: 20%; }
.crm-widget-estado[data-pct="25"] .crm-widget-estado-bar-relleno { width: 25%; }
.crm-widget-estado[data-pct="30"] .crm-widget-estado-bar-relleno { width: 30%; }
.crm-widget-estado[data-pct="35"] .crm-widget-estado-bar-relleno { width: 35%; }
.crm-widget-estado[data-pct="40"] .crm-widget-estado-bar-relleno { width: 40%; }
.crm-widget-estado[data-pct="45"] .crm-widget-estado-bar-relleno { width: 45%; }
.crm-widget-estado[data-pct="50"] .crm-widget-estado-bar-relleno { width: 50%; }
.crm-widget-estado[data-pct="55"] .crm-widget-estado-bar-relleno { width: 55%; }
.crm-widget-estado[data-pct="60"] .crm-widget-estado-bar-relleno { width: 60%; }
.crm-widget-estado[data-pct="65"] .crm-widget-estado-bar-relleno { width: 65%; }
.crm-widget-estado[data-pct="70"] .crm-widget-estado-bar-relleno { width: 70%; }
.crm-widget-estado[data-pct="75"] .crm-widget-estado-bar-relleno { width: 75%; }
.crm-widget-estado[data-pct="80"] .crm-widget-estado-bar-relleno { width: 80%; }
.crm-widget-estado[data-pct="85"] .crm-widget-estado-bar-relleno { width: 85%; }
.crm-widget-estado[data-pct="90"] .crm-widget-estado-bar-relleno { width: 90%; }
.crm-widget-estado[data-pct="95"] .crm-widget-estado-bar-relleno { width: 95%; }
.crm-widget-estado[data-pct="100"] .crm-widget-estado-bar-relleno { width: 100%; }

.crm-tarjeta-cta { margin-top: 16px; }

/* ============================================================
   FORM HELPERS — clases adicionales para forms del CRM
   --------------------------------------------------------------
   .form-required-marker : asterisco rojo junto a label required
   .form-text-mt4        : margin-top 4px en texto de ayuda
   .form-error-list-mt8  : ul con margin 8px 0 0 20px (errores)
   .alerta-info-tight    : alerta-info sin margin + padding chico
   ============================================================ */
.form-required-marker { color: #EF4444; }
.form-text-mt4 { margin-top: 4px; }
.form-error-list-mt8 { margin: 8px 0 0 20px; }
.alerta-info-tight { margin: 0; padding: 8px 12px; }

.grid-3-ancho {
    max-width: 1100px;
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
@media (max-width: 900px) {
    .grid-3-ancho { grid-template-columns: 1fr; }
}

.crm-accion-tarjeta { max-width: 1100px; }
.crm-accion-titulo { margin-bottom: 16px; }
/* FIX 2026-07-22 MASH: el grid generico .grid-3 de app.css no define
   gap, por eso los botones "Reporte CRM", "Reporte Citas", etc. se
   ven pegados en el dashboard. El .btn ya tiene padding propio, asi
   que solo necesitamos separar los slots. */
.crm-accion-tarjeta .grid-3 { gap: 14px; }
.crm-accion-tarjeta .grid-3 .btn { width: 100%; justify-content: center; }

/* ============================================================
   CRM — vista desktop kanban (modulos/admin/crm/index.php)
   --------------------------------------------------------------
   Track-p5 / 2026-06-15. La vista mobile tiene su propio CSS
   (crm-mobile.css). Aqui van las clases de la version desktop
   con sidebar de admin y kanban de 3 columnas.

   Paleta:
     - frio     : #64748B (gris azulado)
     - tibio    : #F59E0B (naranja)
     - caliente : #EF4444 (rojo)

   Wow factor:
     - Cards con hover lift
     - Scroll horizontal si la pantalla es muy chica
     - Filtros chips con count
   ============================================================ */

/* Filter chips de desktop (mismo look que mobile pero mas
   compactos y centrados) */
.crm-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0;
}

.crm-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    color: #0F172A;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    min-height: 34px;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-filtro:hover {
    border-color: #2563EB;
    color: #2563EB;
}
.crm-filtro--active {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.crm-filtro--active:hover {
    color: #fff;
}
.crm-filtro-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 11px;
    font-weight: 700;
}
.crm-filtro--active .crm-filtro-count {
    background: rgba(255, 255, 255, 0.26);
    color: #fff;
}

/* Acciones del top (boton "Nuevo lead") */
.crm-actions-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* Kanban container */
.crm-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(280px, 1fr));
    gap: 14px;
    align-items: start;
}

@media (max-width: 1024px) {
    .crm-kanban {
        grid-template-columns: 1fr;
    }
    .crm-kanban-col--hidden-desktop {
        display: none;
    }
}

/* Columna kanban */
.crm-kanban-col {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.crm-kanban-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #fff;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 700;
    color: #0F172A;
}

.crm-kanban-col--frio     .crm-kanban-col-head { border-bottom-color: #64748B; }
.crm-kanban-col--tibio    .crm-kanban-col-head { border-bottom-color: #F59E0B; }
.crm-kanban-col--caliente .crm-kanban-col-head { border-bottom-color: #EF4444; }

.crm-kanban-col-titulo {
    letter-spacing: 0.01em;
}

.crm-kanban-col-count {
    background: #F1F5F9;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}
.crm-kanban-col--caliente .crm-kanban-col-count {
    background: rgba(239, 68, 68, 0.14);
    color: #B91C1C;
}

.crm-kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 14px;
    max-height: 70vh;
    overflow-y: auto;
}

.crm-kanban-empty {
    text-align: center;
    color: #94A3B8;
    font-size: 12px;
    font-weight: 500;
    padding: 24px 12px;
    font-style: italic;
}

/* Card del kanban */
.crm-kanban-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.crm-kanban-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: #2563EB;
}

.crm-kanban-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.crm-kanban-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    text-transform: uppercase;
    overflow: hidden;
}

.crm-kanban-card-info {
    flex: 1;
    min-width: 0;
}

.crm-kanban-card-nombre {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #0F172A;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-kanban-card-meta {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-kanban-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    padding-top: 6px;
    border-top: 1px solid #F1F5F9;
}

.crm-kanban-card-valor {
    font-weight: 700;
    color: #059669;
    font-feature-settings: "tnum";
}
.crm-kanban-card-valor--zero {
    color: #94A3B8;
    font-weight: 500;
}

.crm-kanban-card-contact {
    color: #64748B;
    font-size: 11px;
    font-weight: 500;
    font-feature-settings: "tnum";
}

/* ============================================================
   CRM — vista desktop detalle (modulos/admin/crm/lead.php)
   ============================================================ */
.crm-lead-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.crm-lead-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-btn-wa {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.crm-btn-wa:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
}
.crm-btn-wa-ico {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.crm-lead-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1024px) {
    .crm-lead-grid { grid-template-columns: 1fr; }
}

.crm-lead-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.crm-lead-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 14px;
    font-size: 13px;
    line-height: 1.4;
}
.crm-lead-dl dt {
    color: #64748B;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 1px;
}
.crm-lead-dl dd {
    color: #0F172A;
    word-wrap: break-word;
}

.crm-lead-sub {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #E2E8F0;
}

.crm-lead-notas-iniciales {
    background: #F8FAFC;
    border-left: 3px solid #2563EB;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #1F2937;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Vendedor mini avatar (en el detail) */
.crm-vendedor-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.crm-vendedor-mini-foto,
.crm-vendedor-mini-inic {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    overflow: hidden;
}

/* Lista de seguimientos pendientes */
.crm-seg-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.crm-seg-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #F8FAFC;
    border-radius: 8px;
    border-left: 3px solid #2563EB;
    font-size: 13px;
}
.crm-seg-item--vencido {
    background: rgba(239, 68, 68, 0.06);
    border-left-color: #EF4444;
}
.crm-seg-item-fecha {
    flex-shrink: 0;
    font-weight: 700;
    color: #475569;
    font-size: 12px;
    font-feature-settings: "tnum";
    min-width: 64px;
}
.crm-seg-item--vencido .crm-seg-item-fecha { color: #B91C1C; }
.crm-seg-item-body { flex: 1; min-width: 0; }
.crm-seg-item-titulo { font-weight: 600; color: #0F172A; }
.crm-seg-item-desc { color: #64748B; font-size: 12px; margin-top: 2px; }

/* Card head (reusado por notas/fotos/productos en el detail) */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E2E8F0;
}
.card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

/* ============================================================
 * DASHBOARD — Citas de hoy + Modal "Nueva cita"
 * --------------------------------------------------------------
 * track-c (2026-06-16). Bloque dedicado al widget de citas
 * en /empresa/admin/ y su modal glassmorphism.
 * ============================================================ */

.dashboard-citas-hoy { padding: 18px 20px 20px; }

.dashboard-citas-hoy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.dashboard-citas-hoy-titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dashboard-citas-hoy-conteo {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #4338CA;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.dashboard-citas-nueva {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dashboard-citas-empty {
    text-align: center;
    padding: 24px 16px;
    border: 2px dashed #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;
}
.dashboard-citas-empty-icono { font-size: 32px; margin-bottom: 6px; }
.dashboard-citas-empty-texto {
    font-weight: 700;
    color: #475569;
    font-size: 14px;
}
.dashboard-citas-empty-sub {
    color: #94A3B8;
    font-size: 13px;
    margin-top: 4px;
}
.dashboard-citas-empty-sub a {
    color: #4F46E5;
    font-weight: 600;
    text-decoration: none;
}
.dashboard-citas-empty-sub a:hover { text-decoration: underline; }

.dashboard-citas-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dashboard-citas-item {
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.7);
    border: 1px solid rgba(99, 102, 241, 0.08);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}
.dashboard-citas-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}
.dashboard-citas-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}
.dashboard-citas-link:hover { text-decoration: none; color: inherit; }
.dashboard-citas-hora {
    font-weight: 700;
    color: #0F172A;
    font-size: 14px;
    min-width: 50px;
    font-variant-numeric: tabular-nums;
}
.dashboard-citas-color {
    width: 4px;
    height: 28px;
    background: var(--cita-color, #6366F1);
    border-radius: 999px;
    flex-shrink: 0;
}
.dashboard-citas-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dashboard-citas-cliente {
    font-weight: 600;
    color: #0F172A;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-citas-meta {
    color: #64748B;
    font-size: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.dashboard-citas-mas {
    text-align: center;
    padding: 8px 0 0;
}
.dashboard-citas-mas a {
    color: #4F46E5;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.dashboard-citas-mas a:hover { text-decoration: underline; }

/* Badges de estado de cita (reusamos .badge) */
.badge-pendiente  { background: #FEF3C7; color: #92400E; }
.badge-confirmada { background: #DBEAFE; color: #1E40AF; }
.badge-completada { background: #D1FAE5; color: #065F46; }
.badge-cancelada  { background: #FEE2E2; color: #991B1B; }
.badge-no-asistio { background: #F3F4F6; color: #4B5563; }

/* ============================================================
 * MODAL DASHBOARD — glassmorphism
 * ============================================================ */
.dash-modal-outer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: dash-modal-in 0.22s ease-out;
}
.dash-modal-outer[hidden] { display: none; }
@keyframes dash-modal-in {
    0%   { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}
.dash-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.dash-modal-card {
    position: relative;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30), 0 2px 8px rgba(15, 23, 42, 0.08);
    padding: 24px 24px 20px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    animation: dash-modal-card-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes dash-modal-card-in {
    0%   { opacity: 0; transform: translateY(20px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.dash-modal-cerrar {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: 0;
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
    border-radius: 999px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dash-modal-cerrar:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #B91C1C;
    transform: rotate(90deg);
}
.dash-modal-head { margin-bottom: 16px; }
.dash-modal-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 8px;
}
.dash-modal-sub {
    margin: 4px 0 0;
    color: #64748B;
    font-size: 13px;
}

.dash-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dash-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.dash-form-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
    flex: 1 1 100%;
    min-width: 0;
}
.dash-form-flex { flex: 1 1 calc(50% - 5px); }
.dash-form-label em {
    color: #EF4444;
    font-style: normal;
    margin-left: 2px;
}
.dash-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    color: #0F172A;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dash-form-input:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.dash-form-textarea { resize: vertical; min-height: 72px; }

.dash-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 4px;
    flex-wrap: wrap;
}

.dash-form-mensaje {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    min-height: 1.4em;
}
.dash-form-mensaje:empty { display: none; }
.dash-form-mensaje-info    { background: #DBEAFE; color: #1E40AF; }
.dash-form-mensaje-ok      { background: #D1FAE5; color: #065F46; }
.dash-form-mensaje-error   { background: #FEE2E2; color: #991B1B; }

.dash-spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: dash-spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 4px;
}
@keyframes dash-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.dash-fade-out {
    transition: opacity 0.25s ease;
    opacity: 0;
}

@media (max-width: 540px) {
    .dash-form-flex { flex: 1 1 100%; }
    .dash-modal-card { padding: 18px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-modal-outer,
    .dash-modal-card,
    .dash-modal-cerrar,
    .dash-spinner {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   SHELL WOW — sidebar + topbar con factor wow
   --------------------------------------------------------------
   Track-a-login-and-shell / 2026-06-16.

   Refactor del shell admin para tener:
   - Sidebar con logo de empresa + menú iconos
   - Topbar con search global (Ctrl+K), avatar dropdown,
     badge de notificaciones, indicador online
   - Background gradient sutil azul→violeta
   - Cero inline CSS — todo en este archivo

   Mobile-first: a 360px el sidebar se colapsa en iconos,
   el topbar se apila vertical y el search se reduce a un boton
   flotante (command palette).
   ============================================================ */

:root {
    --shell-sidebar-w: 248px;
    --shell-topbar-h: 64px;
    --shell-bg-grad: linear-gradient(180deg, #F8FAFF 0%, #EEF1FF 60%, #F5F0FF 100%);
    --shell-color-text: #0F172A;
    --shell-color-muted: #64748B;
    --shell-color-brand-1: #2563EB;
    --shell-color-brand-2: #7C3AED;
    --shell-color-line: #E2E8F0;
    --shell-shadow-top: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shell-shadow-top-scrolled: 0 4px 18px rgba(15, 23, 42, 0.08);
    --shell-shadow-sidebar: 1px 0 0 rgba(15, 23, 42, 0.04);
    --shell-radius-card: 12px;
    --shell-radius-pill: 999px;
    --shell-trans-fast: 0.15s ease;
    --shell-trans-base: 0.22s ease;
}

/* ----- App skeleton ----- */
.app {
    display: grid;
    grid-template-columns: var(--shell-sidebar-w) 1fr;
    min-height: 100vh;
    background: var(--shell-bg-grad);
    color: var(--shell-color-text);
}

@media (max-width: 900px) {
    .app { grid-template-columns: 72px 1fr; }
}

/* ----- Sidebar ----- */
.sidebar {
    background: #FFFFFF;
    border-right: 1px solid var(--shell-color-line);
    box-shadow: var(--shell-shadow-sidebar);
    display: flex;
    flex-direction: column;
    padding: 18px 12px 14px;
    gap: 4px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 900px) {
    .sidebar { padding: 14px 8px; }
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.10); border-radius: 6px; }

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 14px;
    border-bottom: 1px solid var(--shell-color-line);
    margin-bottom: 8px;
    min-height: 44px;
}

.sidebar-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--shell-color-brand-1) 0%, var(--shell-color-brand-2) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.25);
    overflow: hidden;
}

.sidebar-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sidebar-brand-nombre {
    font-size: 14px;
    font-weight: 700;
    color: var(--shell-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
}

.sidebar-brand-sub {
    font-size: 11px;
    color: var(--shell-color-muted);
    margin-top: 2px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .sidebar-brand-text { display: none; }
    .sidebar-brand { justify-content: center; padding: 6px 0 14px; }
}

/* ----- Menu items ----- */
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    position: relative;
    transition: background var(--shell-trans-fast), color var(--shell-trans-fast), transform var(--shell-trans-fast);
    min-height: 40px;
}

.menu-item:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--shell-color-brand-1);
    text-decoration: none;
}

.menu-item.activo {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(124, 58, 237, 0.10) 100%);
    color: var(--shell-color-brand-1);
    box-shadow: inset 3px 0 0 var(--shell-color-brand-1);
}

.menu-icono {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.menu-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-item-sub {
    padding-left: 24px;
    font-weight: 500;
    color: #475569;
    min-height: 36px;
}

@media (max-width: 900px) {
    .menu-label { display: none; }
    .menu-item { justify-content: center; padding: 10px 6px; }
    .menu-item.activo { box-shadow: inset 0 -2px 0 var(--shell-color-brand-1); }
    .menu-item-sub { display: none; }
}

/* ----- Sidebar user footer ----- */
.sidebar-user {
    margin-top: auto;
    border-top: 1px solid var(--shell-color-line);
    padding: 12px 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-user-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--shell-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-email {
    font-size: 11px;
    color: var(--shell-color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-user-logout a {
    display: inline-block;
    margin-top: 4px;
    color: #B91C1C;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.sidebar-user-logout a:hover {
    color: #991B1B;
    text-decoration: underline;
}

@media (max-width: 900px) {
    .sidebar-user { padding: 8px 0 2px; align-items: center; }
    .sidebar-user-nombre, .sidebar-user-email { display: none; }
    .sidebar-user-logout a { font-size: 18px; }
    .sidebar-user-logout a::after { content: "⏻"; }
    .sidebar-user-logout a span, .sidebar-user-logout a { font-size: 18px; }
}

/* ----- Main column + topbar ----- */
.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.topbar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--shell-color-line);
    box-shadow: var(--shell-shadow-top);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--shell-topbar-h);
    transition: box-shadow var(--shell-trans-base);
}

.topbar.is-scrolled {
    box-shadow: var(--shell-shadow-top-scrolled);
}

.topbar-search {
    flex: 1;
    max-width: 520px;
    position: relative;
}

.topbar-search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--shell-color-line);
    border-radius: var(--shell-radius-pill);
    background: #F8FAFC;
    font-size: 14px;
    color: var(--shell-color-text);
    transition: background var(--shell-trans-fast), border-color var(--shell-trans-fast), box-shadow var(--shell-trans-fast);
}

.topbar-search-input::placeholder {
    color: #94A3B8;
}

.topbar-search-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--shell-color-brand-1);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.topbar-search-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--shell-color-muted);
    font-size: 14px;
    pointer-events: none;
}

.topbar-search-kbd {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--shell-color-muted);
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #fff;
    border: 1px solid var(--shell-color-line);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

@media (max-width: 640px) {
    .topbar-search-kbd { display: none; }
    .topbar { padding: 0 12px; gap: 8px; }
    .topbar-search-input { height: 38px; font-size: 13px; }
}

/* ----- Topbar right cluster ----- */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--shell-color-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    position: relative;
    transition: background var(--shell-trans-fast), color var(--shell-trans-fast), transform var(--shell-trans-fast);
}

.topbar-btn:hover {
    background: rgba(37, 99, 235, 0.06);
    color: var(--shell-color-brand-1);
}

.topbar-btn:focus-visible {
    outline: 2px solid var(--shell-color-brand-1);
    outline-offset: 2px;
}

/* Online indicator (green pulse) */
.topbar-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    position: absolute;
    top: 9px;
    right: 9px;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
    animation: shell-online-pulse 1.8s ease-out infinite;
}

@keyframes shell-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65); }
    60%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100%     { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

/* Notif badge (red glass pulse) */
.topbar-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--shell-radius-pill);
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.45);
    animation: shell-notif-pulse 1.6s ease-in-out infinite;
    line-height: 1;
}

.topbar-notif-badge:empty,
.topbar-notif-badge[data-count="0"] { display: none; }

@keyframes shell-notif-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6), 0 1px 4px rgba(239, 68, 68, 0.45); transform: scale(1); }
    50%      { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0), 0 2px 6px rgba(239, 68, 68, 0.55); transform: scale(1.08); }
}

/* ----- Avatar con dropdown ----- */
.avatar-wrap { position: relative; }

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--shell-color-brand-1) 0%, var(--shell-color-brand-2) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    overflow: hidden;
    text-transform: uppercase;
    user-select: none;
    transition: transform var(--shell-trans-base);
    animation: shell-avatar-in 0.45s ease-out;
}

.avatar:hover { transform: scale(1.04); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

@keyframes shell-avatar-in {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

.avatar-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--shell-color-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 6px;
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity var(--shell-trans-base), transform var(--shell-trans-base);
}

.avatar-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.avatar-menu-head {
    padding: 10px 12px;
    border-bottom: 1px solid var(--shell-color-line);
    margin-bottom: 4px;
}

.avatar-menu-nombre {
    font-size: 13px;
    font-weight: 700;
    color: var(--shell-color-text);
    line-height: 1.2;
}

.avatar-menu-rol {
    font-size: 11px;
    color: var(--shell-color-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.avatar-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--shell-color-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background var(--shell-trans-fast);
}

.avatar-menu-item:hover {
    background: #F1F5F9;
    color: var(--shell-color-text);
    text-decoration: none;
}

.avatar-menu-item.icon::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    opacity: 0.7;
}

.avatar-menu-item.icon-user::before      { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>'); }

.avatar-menu-item.icon-cuenta::before    { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>'); }

.avatar-menu-item.icon-logout::before    { -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'); mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>'); }

.avatar-menu-item.is-danger { color: #B91C1C; }
.avatar-menu-item.is-danger:hover { background: rgba(239, 68, 68, 0.08); color: #991B1B; }

/* ----- Page head (encabezado de pagina) ----- */
.page-head {
    padding: 24px 24px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.page-head h1 {
    font-size: 24px;
    font-weight: 800;
    color: var(--shell-color-text);
    margin: 0;
    line-height: 1.2;
}

.page-head .subtitulo {
    color: var(--shell-color-muted);
    font-size: 14px;
    margin-top: 4px;
    font-weight: 500;
}

@media (max-width: 640px) {
    .page-head { padding: 16px 14px 8px; }
    .page-head h1 { font-size: 20px; }
}

/* ----- Page body ----- */
.page-body {
    padding: 0 24px 32px;
    flex: 1;
}

@media (max-width: 640px) {
    .page-body { padding: 0 14px 24px; }
}

/* ----- Command palette (Ctrl+K) ----- */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
/* citas-crear-blank 2026-06-25: respetar atributo hidden del command palette.
 * Sin esto, el backdrop "oculto" (opacity:0 + pointer-events:none)
 * cubre toda la pantalla con z-index:100, y aunque no bloquea clicks,
 * ocupa el viewport y oculta visualmente el contenido de la pagina
 * (la cita de crear cita aparecia "en blanco"). */
.cmdk-backdrop[hidden],
.cmdk-backdrop[hidden].is-open {
    display: none !important;
}

.cmdk-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cmdk {
    width: min(560px, calc(100vw - 32px));
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
    overflow: hidden;
    transform: translateY(-12px) scale(0.97);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.cmdk-backdrop.is-open .cmdk { transform: translateY(0) scale(1); }

.cmdk-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--shell-color-line);
}

.cmdk-input-wrap::before {
    content: "";
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat center / contain;
    color: var(--shell-color-muted);
}

.cmdk-input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 16px;
    color: var(--shell-color-text);
    background: transparent;
    font-family: inherit;
}

.cmdk-input::placeholder { color: #94A3B8; }

.cmdk-kbd {
    color: var(--shell-color-muted);
    font-size: 11px;
    background: #F1F5F9;
    border: 1px solid var(--shell-color-line);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.cmdk-list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 50vh;
    overflow-y: auto;
}

.cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--shell-color-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.cmdk-item:hover,
.cmdk-item.is-active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10) 0%, rgba(124, 58, 237, 0.10) 100%);
    color: var(--shell-color-brand-1);
    text-decoration: none;
}

.cmdk-item-ico {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--shell-color-brand-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.cmdk-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-item-cat {
    color: var(--shell-color-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cmdk-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--shell-color-muted);
    font-size: 13px;
}

.cmdk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--shell-color-line);
    font-size: 11px;
    color: var(--shell-color-muted);
    background: #F8FAFC;
}

.cmdk-foot kbd {
    background: #fff;
    border: 1px solid var(--shell-color-line);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: var(--shell-color-muted);
}

/* ----- Notifs dropdown (mismo patron que avatar-menu) ----- */
.notif-wrap { position: relative; }

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid var(--shell-color-line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    z-index: 60;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity var(--shell-trans-base), transform var(--shell-trans-base);
    overflow: hidden;
}

.notif-dropdown.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--shell-color-line);
    font-size: 13px;
    font-weight: 700;
    color: var(--shell-color-text);
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.notif-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--shell-color-text);
    display: flex;
    gap: 10px;
}

.notif-item:hover { background: #F1F5F9; }

.notif-item-ico {
    width: 32px; height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--shell-color-brand-1) 0%, var(--shell-color-brand-2) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.notif-item-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--shell-color-muted);
    font-size: 13px;
}

/* ----- Login (factor wow) -----
   Capas del fondo (de fondo a frente):
   1) .login-shell      - gradient diagonal azul profundo -> violeta
   2) .login-mesh       - contenedor de orbes y grid
   3) .login-mesh-orb   - 3 orbes radiales que flotan en bucle
   4) .login-mesh-grid  - grilla sutil con mask radial
   5) .login-shell::before - vignette sutil para profundidad

   Tarjeta:
   - glassmorphism fuerte (blur 20px + saturate 180%)
   - borde gradiente sutil con mask-composite
   - animacion de entrada cubic-bezier

   Interiores:
   - .login-mark        - icono de marca con glow pulse + halo
   - .login-titulo      - text-gradient azul -> violeta
   - .login-field       - input con icono a la izquierda + floating label
   - .login-btn         - gradient animado + shine sweep + arrow
   - .login-quote       - frase motivacional con comilla y categoria
   - .login-error       - shake animation al aparecer */
.login-shell {
    background: linear-gradient(135deg, #1E3A8A 0%, #4C1D95 55%, #7C3AED 100%) !important;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.login-shell::before {
    /* vignette sutil para enfocar el centro */
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(15, 23, 42, 0.40) 100%);
    z-index: 1;
}

.login-mesh {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.login-mesh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}

.login-mesh-orb--1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, #3B82F6 0%, transparent 70%);
    top: -120px; left: -100px;
    animation: login-mesh-1 24s ease-in-out infinite;
}

.login-mesh-orb--2 {
    width: 600px; height: 600px;
    background: radial-gradient(circle, #A855F7 0%, transparent 70%);
    bottom: -180px; right: -150px;
    animation: login-mesh-2 30s ease-in-out infinite;
}

.login-mesh-orb--3 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #EC4899 0%, transparent 70%);
    top: 35%; left: 55%;
    animation: login-mesh-3 28s ease-in-out infinite;
}

@keyframes login-mesh-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(120px, 80px) scale(1.15); }
}
@keyframes login-mesh-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-100px, -120px) scale(0.9); }
}
@keyframes login-mesh-3 {
    0%, 100% { transform: translate(0, 0) scale(1);    opacity: 0.5; }
    50%      { transform: translate(-80px, 100px) scale(1.2); opacity: 0.7; }
}

.login-mesh-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 30%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 30%, transparent 80%);
}

.login-shell .login-box {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 40px 36px 32px;
    border-radius: 20px;
    box-shadow:
        0 30px 80px rgba(15, 23, 42, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.50) inset,
        0 1px 0 rgba(255, 255, 255, 0.60) inset;
    width: 100%;
    max-width: 440px;
    animation: shell-login-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.login-shell .login-box::before {
    /* borde gradiente sutil encima del card */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.45), rgba(124, 58, 237, 0.45), rgba(236, 72, 153, 0.30));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

@keyframes shell-login-in {
    0%   { transform: translateY(20px) scale(0.96); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

.login-mark {
    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow:
        0 12px 28px rgba(37, 99, 235, 0.40),
        0 0 0 6px rgba(37, 99, 235, 0.08);
    animation: login-mark-pulse 3s ease-in-out infinite;
    position: relative;
}

.login-mark::after {
    /* halo pulsante detras del mark */
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    opacity: 0;
    z-index: -1;
    filter: blur(10px);
    animation: login-mark-halo 3s ease-in-out infinite;
}

@keyframes login-mark-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes login-mark-halo {
    0%, 100% { opacity: 0;    transform: scale(0.95); }
    50%      { opacity: 0.4;  transform: scale(1.05); }
}

.login-mark svg {
    width: 30px; height: 30px;
    display: block;
}

.login-shell .login-titulo {
    font-size: 28px;
    margin: 0 0 6px;
    color: #0F172A;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 60%, #7C3AED 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-shell .login-sub {
    color: #64748B;
    margin: 0 0 28px;
    font-size: 14px;
    text-align: center;
    line-height: 1.45;
}

.login-shell .login-field {
    margin-bottom: 16px;
    position: relative;
}

.login-shell .login-field input {
    width: 100%;
    padding: 16px 14px 16px 44px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    font-size: 14px;
    background: #F8FAFC;
    color: #0F172A;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    font-family: inherit;
    line-height: 1.4;
}

.login-shell .login-field input::placeholder { color: transparent; }

.login-shell .login-field input:focus {
    outline: none;
    border-color: #2563EB;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.login-shell .login-field label {
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: top 0.18s ease, left 0.18s ease, font-size 0.18s ease,
                color 0.18s ease, background 0.18s ease, padding 0.18s ease;
    background: transparent;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    padding: 0 4px;
}

/* floating label: cuando hay foco o el campo tiene valor */
.login-shell .login-field input:focus + .login-field-icon + label,
.login-shell .login-field input:not(:placeholder-shown) + .login-field-icon + label {
    top: 0;
    left: 38px;
    font-size: 11px;
    font-weight: 600;
    color: #2563EB;
    background: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transform: translateY(-50%);
    padding: 0 6px;
}

.login-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    pointer-events: none;
    transition: color 0.18s ease;
    z-index: 1;
    display: flex;
    align-items: center;
}

.login-field-icon svg {
    width: 18px; height: 18px;
    display: block;
}

.login-shell .login-field input:focus ~ .login-field-icon {
    color: #2563EB;
}

.login-shell .login-btn {
    width: 100%;
    padding: 14px 18px;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-position 0.6s ease;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    letter-spacing: 0.01em;
}

.login-shell .login-btn::before {
    /* shine sweep horizontal al hacer hover */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
    transition: left 0.6s ease;
    pointer-events: none;
}

.login-shell .login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.45);
    background-position: 100% 0%;
}

.login-shell .login-btn:hover::before { left: 100%; }
.login-shell .login-btn:active { transform: translateY(0); }
.login-shell .login-btn[disabled] { opacity: 0.65; cursor: wait; transform: none !important; }

.login-btn-arrow {
    transition: transform 0.25s ease;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
}
.login-shell .login-btn:hover .login-btn-arrow { transform: translateX(4px); }

.login-shell .login-error {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    color: #B91C1C;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid rgba(239, 68, 68, 0.30);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: login-shake 0.4s ease;
    line-height: 1.4;
}

.login-shell .login-error::before {
    /* icono triangular inline via data attr-friendly con CSS */
    content: '⚠';
    font-size: 16px;
    flex-shrink: 0;
}

@keyframes login-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.login-quote {
    margin-top: 22px;
    padding: 16px 18px 14px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%);
    border-left: 3px solid #7C3AED;
    border-radius: 4px 12px 12px 4px;
    position: relative;
    animation: login-quote-in 0.8s ease 0.4s backwards;
}

.login-quote-mark {
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 48px;
    line-height: 1;
    color: #7C3AED;
    opacity: 0.18;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}

.login-quote-text {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    position: relative;
    z-index: 1;
}

.login-quote-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    flex-wrap: wrap;
}

.login-quote-cat {
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    color: #fff;
    padding: 2px 8px;
    border-radius: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10px;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.20);
}

.login-quote-author {
    color: #64748B;
    font-weight: 500;
    font-style: normal;
}

@keyframes login-quote-in {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* crossfade cuando JS rota la frase */
.login-quote.is-fading { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; }

.login-shell .login-foot {
    text-align: center;
    margin-top: 22px;
    font-size: 13px;
    color: #64748B;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Boton secundario premium: borde gradiente azul->violeta
   con tecnica double-background (padding-box + border-box)
   para tener border con gradient sin perder border-radius. */
.login-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 12px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)) padding-box,
        linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) border-box;
    border: 1.5px solid transparent;
    color: #1E3A8A;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
    font-family: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.login-secondary-btn::before {
    /* shine sweep sutil al hover */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(37, 99, 235, 0.08) 50%, transparent 100%);
    transition: left 0.5s ease;
    pointer-events: none;
}

.login-secondary-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.22s ease;
    flex-shrink: 0;
}

.login-secondary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.20);
    color: #1E3A8A;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%) padding-box,
        linear-gradient(135deg, #2563EB 0%, #7C3AED 100%) border-box;
}

.login-secondary-btn:hover::before { left: 100%; }
.login-secondary-btn:hover svg { transform: translate(2px, -2px); }
.login-secondary-btn:active { transform: translateY(0); }
.login-secondary-btn:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 3px;
}

/* link de recovery (solo aparece si hay error) */
.login-foot-link {
    color: #94A3B8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.18s ease;
    margin-top: 2px;
}

.login-foot-link:hover {
    color: #2563EB;
    text-decoration: underline;
}

/* mobile */
@media (max-width: 480px) {
    .login-shell .login-box {
        padding: 32px 24px 24px;
        border-radius: 16px;
        max-width: 100%;
    }
    .login-mesh-orb { filter: blur(60px); }
    .login-mesh-orb--1 { width: 360px; height: 360px; }
    .login-mesh-orb--2 { width: 420px; height: 420px; }
    .login-mesh-orb--3 { width: 280px; height: 280px; }
    .login-shell .login-titulo { font-size: 24px; }
}

/* accesibilidad: respetar reduced motion */
@media (prefers-reduced-motion: reduce) {
    .login-mesh-orb,
    .login-mark,
    .login-mark::after,
    .login-shell .login-box,
    .login-quote {
        animation: none !important;
    }
    .login-mesh-orb { opacity: 0.35; }
}

/* ----- App body wrapper (mobile) ----- */
@media (max-width: 900px) {
    .app { grid-template-columns: 72px 1fr; }
    .main { min-width: 0; }
}

/* ----- Accesibilidad: reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .avatar,
    .topbar-notif-badge,
    .topbar-online,
    .login-shell .login-box {
        animation: none !important;
        transition: none !important;
    }
}

/* ----- Hide inline-data en login (compat con template viejo) -----
   Si el archivo login.php aun tiene el <style> inline, el selector
   .login-shell gana por especificidad y los pisa. */
.login-shell body { margin: 0; }

/* Screen reader only */
.shell-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   EMPLEADOS — Foto de perfil: preview, lightbox, fade-in
   --------------------------------------------------------------
   Track D 2026-06-16. Complementa las clases .emp-* ya existentes
   (avatar, card, uploader, preview) con:
     - fade-in del preview
     - lightbox fullscreen glassmorphism
     - overlay "Ver grande" en foto actual del form de edicion
   ============================================================ */

/* --- Fade-in del preview (FileReader termino de leer) --- */
.emp-foto-preview {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 280ms ease, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.emp-foto-preview.emp-foto-preview-show {
    opacity: 1;
    transform: scale(1);
}
.emp-foto-preview[hidden] {
    display: none !important;
}

/* --- Foto actual del form de edicion con overlay "Ver grande" --- */
.emp-foto-actual {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.5) 0%, rgba(226, 232, 240, 0.4) 100%);
    border-radius: 14px;
    border: 1px solid #E2E8F0;
}
.emp-foto-actual-avatar {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}
.emp-foto-actual-avatar .emp-avatar {
    cursor: zoom-in;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
.emp-foto-actual-avatar .emp-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 36px rgba(124, 58, 237, 0.32);
}
.emp-foto-actual-avatar .emp-avatar:focus-visible {
    outline: 3px solid #7C3AED;
    outline-offset: 4px;
}
.emp-foto-actual-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.85) 0%, rgba(124, 58, 237, 0.85) 100%);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.25s ease;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
}
.emp-foto-actual-avatar:hover .emp-foto-actual-overlay,
.emp-foto-actual-avatar:focus-within .emp-foto-actual-overlay {
    opacity: 1;
}
.emp-foto-actual-overlay span {
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.emp-foto-actual-info { flex: 1; min-width: 0; }
.emp-foto-actual-info .small-text { font-size: 12px; word-break: break-all; }

/* --- Avatar clickable en la lista (zoom-in cursor + focus) --- */
.emp-empleado-card .emp-avatar[data-emp-foto-lightbox] {
    cursor: zoom-in;
}
.emp-empleado-card .emp-avatar[data-emp-foto-lightbox]:focus-visible {
    outline: 3px solid #7C3AED;
    outline-offset: 4px;
}

/* --- LIGHTBOX (fullscreen con glassmorphism) --- */
.emp-foto-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
    animation: empLightboxFadeIn 240ms ease;
}
.emp-foto-lightbox[hidden] {
    display: none !important;
}
.emp-foto-lightbox-contenido {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transform: scale(0.92);
    animation: empLightboxScale 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    cursor: default;
}
.emp-foto-lightbox-contenido img {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    object-fit: contain;
    background: #FFFFFF;
    display: block;
}
.emp-foto-lightbox-cap {
    color: #F1F5F9;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    background: rgba(15, 23, 42, 0.65);
    padding: 8px 18px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-width: 80vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-foto-lightbox-cerrar {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.25);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}
.emp-foto-lightbox-cerrar:hover {
    transform: rotate(90deg) scale(1.1);
    background: #DC2626;
    border-color: #FFFFFF;
}
.emp-foto-lightbox-cerrar:focus-visible {
    outline: 3px solid #FFFFFF;
    outline-offset: 3px;
}

@keyframes empLightboxFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes empLightboxScale {
    from { transform: scale(0.92); opacity: 0.6; }
    to   { transform: scale(1);    opacity: 1;   }
}

/* --- Mobile: lightbox fullscreen real --- */
@media (max-width: 640px) {
    .emp-foto-lightbox {
        padding: 0;
        background: rgba(0, 0, 0, 0.92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .emp-foto-lightbox-contenido {
        max-width: 100vw;
        max-height: 100vh;
    }
    .emp-foto-lightbox-contenido img {
        max-width: 100vw;
        max-height: 88vh;
        border-radius: 0;
    }
    .emp-foto-lightbox-cap {
        font-size: 14px;
        padding: 6px 14px;
        max-width: 92vw;
    }
    .emp-foto-lightbox-cerrar {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
    }
}

/* --- prefers-reduced-motion: desactiva animaciones --- */
@media (prefers-reduced-motion: reduce) {
    .emp-foto-preview,
    .emp-foto-actual-avatar .emp-avatar,
    .emp-foto-actual-overlay,
    .emp-foto-lightbox,
    .emp-foto-lightbox-contenido,
    .emp-foto-lightbox-cerrar {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
 * 24) FIX H (track-p8-quickwins 2026-06-19) — Link row copiable
 * --------------------------------------------------------------
 * El admin puede copiar la URL de la foto o del link publico del
 * empleado con un click. Feedback "¡Copiado!" 2s + ring verde.
 * ============================================================ */
.emp-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.emp-link-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1.5px solid rgba(148, 163, 184, 0.3);
    border-radius: 10px;
    background: rgba(241, 245, 249, 0.5);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    color: #1E1B4B;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emp-link-input:focus {
    outline: none;
    border-color: #4F46E5;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.emp-link-copy {
    flex-shrink: 0;
    transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emp-link-copy-ok {
    background: linear-gradient(135deg, #10B981, #059669) !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
    transform: scale(1.05);
}

.emp-link-copy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .emp-link-row {
        flex-direction: column;
    }
}

/* ============================================================
 * 25) FIX G (track-p8-quickwins 2026-06-19) — Cuenta module
 * --------------------------------------------------------------
 * Hero con avatar glassmorphism, tabs animadas, password strength
 * meter, sesiones list, danger zone.
 * ============================================================ */
.cuenta-shell {
    max-width: 880px;
    margin: 0 auto;
}

.cuenta-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 28px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(124, 58, 237, 0.10) 100%),
        rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 20px 40px -10px rgba(15, 23, 42, 0.10);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.cuenta-hero::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, #4F46E5, #7C3AED, #EC4899);
    opacity: 0.18;
    filter: blur(40px);
    z-index: 0;
}
.cuenta-hero > * { position: relative; z-index: 1; }

.cuenta-hero-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 800;
    overflow: hidden;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.9),
        0 12px 28px -6px rgba(79, 70, 229, 0.45);
    flex-shrink: 0;
}
.cuenta-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }

.cuenta-hero-info { flex: 1; min-width: 0; }
.cuenta-hero-nombre {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 4px;
    color: #1E1B4B;
    letter-spacing: -0.02em;
}
.cuenta-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: #475569;
    font-size: 14px;
}
.cuenta-hero-rol {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #FFFFFF;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cuenta-hero-ultimo { font-size: 13px; }

.cuenta-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 24px;
    border-bottom: 1.5px solid rgba(148, 163, 184, 0.2);
    overflow-x: auto;
    scrollbar-width: none;
}
.cuenta-tabs::-webkit-scrollbar { display: none; }

.cuenta-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    color: #64748B;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px 10px 0 0;
    border-bottom: 2.5px solid transparent;
    transition: all 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
}
.cuenta-tab:hover {
    color: #4F46E5;
    background: rgba(79, 70, 229, 0.06);
    transform: translateY(-1px);
}
.cuenta-tab.activo {
    color: #4F46E5;
    border-bottom-color: #4F46E5;
    background: rgba(79, 70, 229, 0.04);
}
.cuenta-tab-danger:hover { color: #EF4444; background: rgba(239, 68, 68, 0.06); }
.cuenta-tab-danger.activo { color: #EF4444; border-bottom-color: #EF4444; }

.cuenta-panel {
    padding: 28px;
    animation: cuenta-panel-in 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cuenta-panel-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Password strength meter */
.cuenta-pw-meter {
    margin-top: 8px;
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 3px;
    overflow: hidden;
}
.cuenta-pw-meter-bar {
    height: 100%;
    width: 0%;
    background: #E5E7EB;
    border-radius: 3px;
    transition: width 220ms ease, background 220ms ease;
}
.cuenta-pw-label {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #94A3B8;
}
.cuenta-pw-match {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* Toggles (preferencias) */
.cuenta-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}
.cuenta-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cuenta-toggle-slider {
    width: 44px;
    height: 24px;
    background: rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    position: relative;
    transition: background 220ms;
    flex-shrink: 0;
}
.cuenta-toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.cuenta-toggle input:checked + .cuenta-toggle-slider {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
}
.cuenta-toggle input:checked + .cuenta-toggle-slider::after {
    transform: translateX(20px);
}
.cuenta-toggle-label { font-weight: 600; color: #1E1B4B; }

.cuenta-pref-row {
    padding: 14px 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.2);
}
.cuenta-pref-row:last-of-type { border-bottom: 0; }

/* Sesiones */
.cuenta-sesiones {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cuenta-sesion {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: rgba(241, 245, 249, 0.6);
    border: 1.5px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    transition: all 220ms;
}
.cuenta-sesion:hover {
    border-color: rgba(79, 70, 229, 0.3);
    background: rgba(255, 255, 255, 0.95);
}
.cuenta-sesion-actual {
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(124, 58, 237, 0.06));
    border-color: rgba(79, 70, 229, 0.3);
}
.cuenta-sesion-ico {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.cuenta-sesion-info { flex: 1; min-width: 0; }
.cuenta-sesion-device { font-weight: 700; color: #1E1B4B; }
.cuenta-sesion-ip, .cuenta-sesion-time { font-size: 12px; color: #64748B; }

.cuenta-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cuenta-pill-ok {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.cuenta-empty {
    text-align: center;
    padding: 36px 16px;
    color: #94A3B8;
}
.cuenta-empty-ico { font-size: 48px; display: block; margin-bottom: 12px; }

/* Danger zone */
.cuenta-panel-danger {
    border: 2px solid rgba(239, 68, 68, 0.2);
}
.cuenta-danger-titulo { color: #DC2626; }

.cuenta-danger-card {
    padding: 18px;
    margin-top: 18px;
    background: rgba(254, 243, 199, 0.3);
    border: 1.5px solid rgba(245, 158, 11, 0.3);
    border-radius: 14px;
}
.cuenta-danger-card h4 { margin: 0 0 6px; color: #78350F; }
.cuenta-danger-card-delete {
    background: rgba(254, 226, 226, 0.4);
    border-color: rgba(239, 68, 68, 0.35);
}
.cuenta-danger-card-delete h4 { color: #991B1B; }

.cuenta-danger-form {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width: 640px) {
    .cuenta-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 16px;
    }
    .cuenta-hero-meta { justify-content: center; }
}

/* ============================================================
 * 26) FIX F (track-p8-quickwins 2026-06-19) — Pagos module
 * --------------------------------------------------------------
 * Card destacada de proximo pago con gradient azul->violeta,
 * 3 mini-cards de resumen, tabla de historial con badges y CFDI.
 * ============================================================ */
.pago-shell {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pago-proximo {
    position: relative;
    padding: 36px 32px;
    border-radius: 22px;
    background:
        linear-gradient(135deg, #4F46E5 0%, #7C3AED 55%, #A855F7 100%);
    color: #FFFFFF;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 30px 60px -15px rgba(79, 70, 229, 0.5);
    animation: pago-proximo-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pago-proximo-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pago-proximo-deco {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pago-proximo-deco::after {
    content: '';
    position: absolute;
    bottom: -180px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.30) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pago-proximo-content {
    position: relative;
    z-index: 1;
}
.pago-proximo-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.85;
    margin-bottom: 4px;
}
.pago-proximo-monto {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pago-proximo-fecha {
    font-size: 16px;
    opacity: 0.92;
    margin-bottom: 16px;
}
.pago-proximo-countdown {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.pago-proximo-urgente {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border-color: transparent;
    box-shadow: 0 4px 18px rgba(239, 68, 68, 0.45);
    animation: pago-proximo-pulse 1.6s ease-in-out infinite;
}
@keyframes pago-proximo-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
.pago-proximo-meta {
    margin-top: 18px;
    display: flex;
    gap: 18px;
    font-size: 13px;
    opacity: 0.85;
    flex-wrap: wrap;
}
.pago-proximo-meta strong { opacity: 1; font-weight: 700; }

.pago-resumen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.pago-resumen-card {
    padding: 18px 20px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px solid;
    transition: transform 220ms;
}
.pago-resumen-card:hover { transform: translateY(-2px); }
.pago-resumen-ok {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
    color: #065F46;
}
.pago-resumen-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
    color: #92400E;
}
.pago-resumen-bad {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #991B1B;
}
.pago-resumen-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.85;
}
.pago-resumen-valor {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.pago-historial-tarjeta { padding: 28px; }
.pago-tabla-wrap { overflow-x: auto; margin: 0 -8px; }
.pago-tabla {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}
.pago-tabla thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748B;
    border-bottom: 1.5px solid rgba(148, 163, 184, 0.25);
}
.pago-tabla tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    font-size: 14px;
    color: #1E1B4B;
    transition: background 180ms;
}
.pago-tabla tbody tr:hover td { background: rgba(79, 70, 229, 0.04); }
.pago-fecha { font-variant-numeric: tabular-nums; font-weight: 600; }
.pago-metodo { white-space: nowrap; }
.pago-ref {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    background: rgba(241, 245, 249, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
}

.pago-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.pago-badge-ok    { background: rgba(16, 185, 129, 0.15); color: #047857; }
.pago-badge-warn  { background: rgba(245, 158, 11, 0.15); color: #B45309; }
.pago-badge-bad   { background: rgba(239, 68, 68, 0.15); color: #B91C1C; }
.pago-badge-muted { background: rgba(148, 163, 184, 0.15); color: #475569; }

.pago-empty {
    text-align: center;
    padding: 40px 16px;
    color: #94A3B8;
}
.pago-empty-ico { font-size: 48px; display: block; margin-bottom: 12px; }

.pago-historial-foot {
    margin-top: 14px;
    text-align: center;
}

.pago-ayuda-tarjeta { padding: 24px 28px; }
.pago-ayuda-lista {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pago-ayuda-lista li {
    padding: 10px 14px;
    background: rgba(241, 245, 249, 0.5);
    border-left: 3px solid #7C3AED;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: #475569;
}
.pago-ayuda-lista strong { color: #1E1B4B; }

@media (max-width: 640px) {
    .pago-resumen { grid-template-columns: 1fr; }
    .pago-proximo-monto { font-size: 40px; }
}

/* ============================================================
 * 27) FIX D + E (track-p8-quickwins 2026-06-19) — Datos v2
 * --------------------------------------------------------------
 * Vista previa de fuentes + imagen de fondo con parametros.
 * ============================================================ */
.emp-fuentes-preview {
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.04), rgba(124, 58, 237, 0.04));
    border: 1.5px dashed rgba(79, 70, 229, 0.25);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.emp-fuentes-preview-h {
    font-size: 22px;
    font-weight: 700;
    color: #1E1B4B;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}
.emp-fuentes-preview-b {
    color: #475569;
    line-height: 1.5;
}

.cat-emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(124, 58, 237, 0.04));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 10px;
    max-height: 280px;
    overflow-y: auto;
}
.cat-emoji-cat {
    flex: 1 1 100%;
}
.cat-emoji-cat-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748B;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.cat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    gap: 4px;
}
.cat-emoji-btn {
    background: #FFFFFF;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    padding: 4px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.cat-emoji-btn:hover {
    background: linear-gradient(135deg, #3B82F6, #7C3AED);
    color: #FFFFFF;
    transform: translateY(-1px) scale(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.cat-emoji-btn.activo {
    background: linear-gradient(135deg, #3B82F6, #7C3AED);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}
@media (max-width: 768px) {
    .cat-emoji-grid { grid-template-columns: repeat(8, 1fr); }
}


/* ============================================================
   Inputs de fecha: fondo gris suave para no confundir con el fondo blanco
   ============================================================ */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    color: #1F2937;
    font-family: var(--font-sans, Inter, sans-serif);
}
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus {
    background: #FFFFFF;
    border-color: #4F46E5;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(35%) sepia(94%) saturate(2547%) hue-rotate(231deg) brightness(99%) contrast(96%);
    cursor: pointer;
}

/* calendario-dnd 2026-06-25: panel de slots disponibles para /citas/crear */
.citas-slots-panel {
    margin: 0 0 1rem 0;
    padding: 14px 16px;
    border: 1px solid #DBEAFE;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 10px;
    min-height: 60px;
}
.citas-slots-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.citas-slots-head small { color: #64748B; margin-left: 4px; font-weight: 500; }
.citas-slots-rangos { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.citas-slot-rango {
    background: #fff;
    color: #1E40AF;
    border: 1px solid #93C5FD;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.citas-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 6px;
    margin-top: 4px;
}
.citas-slot-btn {
    background: #fff;
    color: #1E3A8A;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 6px 4px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}
.citas-slot-btn.citas-slot-libre:hover {
    background: #2563EB;
    color: #fff;
    border-color: #1D4ED8;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
.citas-slot-btn.citas-slot-libre:active { transform: translateY(0); }
.citas-slot-btn.citas-slot-ocupado {
    background: #F1F5F9;
    color: #94A3B8;
    border-color: #E2E8F0;
    cursor: not-allowed;
    text-decoration: line-through;
    opacity: 0.6;
}
.citas-slots-empty {
    text-align: center;
    color: #475569;
    padding: 12px 8px;
}
.citas-slots-empty strong { color: #1E293B; display: block; margin-bottom: 4px; }
.citas-slots-empty small { color: #64748B; }
.citas-slots-empty a { color: #2563EB; text-decoration: underline; }
.citas-slots-error { background: #FEF2F2; border-radius: 8px; color: #B91C1C; }
.citas-slots-hint {
    color: #64748B;
    font-size: 11px;
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}
.spinner-mini {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #93C5FD;
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: spin-mini 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
@keyframes spin-mini {
    to { transform: rotate(360deg); }
}
.citas-slots-msg { color: #1E40AF; font-size: 13px; }

/* calendario-dnd 2026-06-25: modulo de reportes y estadisticas */
.reportes-filtros {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #93C5FD;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 1.5rem;
}
.reportes-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}
.reportes-presets strong { margin-right: 8px; color: #1E40AF; font-size: 13px; }
.preset-chip {
    display: inline-block;
    padding: 4px 12px;
    background: #fff;
    color: #1E40AF;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.12s ease;
}
.preset-chip:hover {
    background: #2563EB;
    color: #fff;
    border-color: #1D4ED8;
}
.preset-chip.activo {
    background: #1E40AF;
    color: #fff;
    border-color: #1E3A8A;
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.3);
}
.reportes-custom {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.reportes-custom label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #1E40AF;
    font-weight: 600;
}
.reportes-custom input,
.reportes-custom select {
    padding: 6px 10px;
    border: 1px solid #93C5FD;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

.reportes-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 1.5rem;
}
.kpi-card {
    padding: 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: currentColor;
}
.kpi-card.kpi-azul { color: #2563EB; }
.kpi-card.kpi-verde { color: #10B981; }
.kpi-card.kpi-ambar { color: #F59E0B; }
.kpi-card.kpi-violeta { color: #7C3AED; }
.kpi-label {
    font-size: 11px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 8px;
}
.kpi-valor {
    font-size: 30px;
    font-weight: 800;
    color: #1E293B;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kpi-sub {
    font-size: 12px;
    color: #64748B;
    margin-top: 4px;
}
.badge-ok { background: #D1FAE5; color: #065F46; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-warn { background: #FEF3C7; color: #92400E; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }

.reportes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}
.reportes-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.reportes-card-full { grid-column: 1 / -1; }
.reportes-card h3 {
    font-size: 14px;
    color: #1E293B;
    margin: 0 0 14px 0;
    font-weight: 700;
}

.rep-estado-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rep-estado-item {
    display: grid;
    grid-template-columns: 50px 1fr 90px;
    align-items: center;
    gap: 10px;
}
.rep-estado-num {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.rep-estado-bar {
    height: 12px;
    background: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
}
.rep-estado-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
.rep-estado-label {
    font-size: 13px;
    color: #475569;
}

.rep-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rep-tabla th {
    text-align: left;
    color: #64748B;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding: 6px 8px;
    border-bottom: 1px solid #E2E8F0;
}
.rep-tabla td {
    padding: 8px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.rep-tabla td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.rep-bar-mini {
    height: 4px;
    background: #E2E8F0;
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
}
.rep-bar-mini > div {
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #7C3AED);
    border-radius: 999px;
}

.rep-dow-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rep-dow-row {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 8px;
}
.rep-dow-label {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
    text-align: right;
}
.rep-dow-bar {
    height: 22px;
    background: #F1F5F9;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.rep-dow-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 0 8px;
    display: flex;
    align-items: center;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    min-width: 30px;
}

.rep-hora-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
}
.rep-hora-cell {
    border-radius: 4px;
    padding: 4px 2px;
    text-align: center;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1E293B;
}
.rep-hora-num {
    font-size: 10px;
    font-weight: 700;
}
.rep-hora-cnt {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

/* disponibilidad: badge readonly + readonly styles */
.badge-readonly {
    background: #F1F5F9;
    color: #475569;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #CBD5E1;
}
.disp-readonly input:not([type=hidden]):not([type=submit]):not([type=button]) {
    background: #F8FAFC !important;
    cursor: not-allowed;
}
.cita-readonly-msg {
    background: #FEF3C7;
    color: #92400E;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #FCD34D;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cita-readonly-msg strong { color: #78350F; }

/* detalle: form-row-2 (fecha+hora lado a lado) */
.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .form-row-2 { grid-template-columns: 1fr; }
}

/* print styles */
@media print {
    .sidebar, .topbar, .citas-toolbar-actions, .reportes-filtros, .actions.mb { display: none !important; }
    .reportes-card { break-inside: avoid; page-break-inside: avoid; }
    body { background: #fff !important; }
}

/* ============================================================
 * REPORTES WOW v2 2026-06-25 — calendario-dnd factor premium
 * Aurora gradient hero · 3D tilt · glassmorphism · animated counters
 * ============================================================ */

/* Animaciones compartidas */
@keyframes rep-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rep-orb-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(40px, -30px) scale(1.1); }
    66%      { transform: translate(-30px, 20px) scale(0.95); }
}
@keyframes rep-orb-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-50px, 30px) scale(1.15); }
}
@keyframes rep-orb-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(30px, 40px) scale(1.08); }
    75%      { transform: translate(-40px, -20px) scale(0.92); }
}
@keyframes rep-pulse-star {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55), 0 0 16px rgba(245, 158, 11, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0), 0 0 24px rgba(245, 158, 11, 0.55); }
}
@keyframes rep-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================
   HERO HEADER — gradient mesh animado
   ============================================================ */
.rep-hero {
    position: relative;
    margin: -8px -8px 24px -8px;
    padding: 36px 36px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1E3A8A 0%, #5B21B6 50%, #BE185D 100%);
    color: #fff;
    overflow: hidden;
    box-shadow:
        0 24px 48px -12px rgba(91, 33, 182, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    isolation: isolate;
    animation: rep-fade-up 0.6s cubic-bezier(.4,0,.2,1) both;
}
.rep-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
}
.rep-hero-orb-1 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
    top: -120px; left: -100px;
    animation: rep-orb-1 14s ease-in-out infinite;
}
.rep-hero-orb-2 {
    width: 320px; height: 320px;
    background: radial-gradient(circle, #EC4899 0%, transparent 70%);
    bottom: -120px; right: -80px;
    animation: rep-orb-2 18s ease-in-out infinite;
}
.rep-hero-orb-3 {
    width: 280px; height: 280px;
    background: radial-gradient(circle, #F59E0B 0%, transparent 70%);
    top: 30%; left: 50%;
    transform: translate(-50%, -50%);
    animation: rep-orb-3 22s ease-in-out infinite;
    opacity: 0.35;
}
.rep-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}
.rep-hero-text { flex: 1; min-width: 280px; }
.rep-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.rep-hero-title {
    font-size: 36px;
    font-weight: 900;
    margin: 0 0 10px 0;
    letter-spacing: -1px;
    line-height: 1.05;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #fff 0%, #E0E7FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rep-hero-sub {
    margin: 0;
    font-size: 15px;
    opacity: 0.95;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.rep-hero-sub strong { font-weight: 800; font-size: 18px; }
.rep-hero-date { font-variant-numeric: tabular-nums; }
.rep-hero-dot {
    width: 4px; height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: inline-block;
}
.rep-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.rep-hero-pill.pill-up {
    background: rgba(16, 185, 129, 0.25);
    color: #D1FAE5;
}
.rep-hero-pill.pill-down {
    background: rgba(239, 68, 68, 0.25);
    color: #FEE2E2;
}
.rep-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.rep-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    font-family: inherit;
    letter-spacing: 0.2px;
}
.rep-btn-success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.55);
}
.rep-btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.7);
    filter: brightness(1.08);
}
.rep-btn-ghost {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
}
.rep-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}
.rep-btn-primary {
    background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 100%);
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(59, 130, 246, 0.5);
}
.rep-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

/* ============================================================
   FILTROS — glass card
   ============================================================ */
.rep-filtros {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 24px;
    box-shadow:
        0 8px 32px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(15, 23, 42, 0.02);
}
.rep-presets {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    align-items: center;
}
.rep-presets-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 6px;
    color: #1E40AF;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rep-chip {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.85);
    color: #1E40AF;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
}
.rep-chip:hover {
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.rep-chip.activo {
    background: linear-gradient(135deg, #1E40AF 0%, #6D28D9 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(30, 64, 175, 0.5);
}
.rep-custom {
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.rep-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #475569;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rep-input {
    padding: 9px 12px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    min-width: 140px;
}
.rep-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* ============================================================
   Section title (sticky header para cada bloque)
   ============================================================ */
.rep-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 900;
    color: #1E293B;
    margin: 32px 0 14px 0;
    letter-spacing: -0.3px;
}
.rep-section-title svg { color: #7C3AED; }
.rep-section-sub {
    font-size: 12px;
    font-weight: 500;
    color: #94A3B8;
    margin-left: 8px;
}

/* ============================================================
   KPI cards gigantes (con tilt 3D, glow, sparklines)
   ============================================================ */
.rep-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.rep-kpi-giant {
    position: relative;
    padding: 24px 22px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.04);
    overflow: hidden;
    cursor: default;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), box-shadow 0.4s;
    will-change: transform;
    animation: rep-fade-up 0.5s cubic-bezier(.4,0,.2,1) both;
    isolation: isolate;
}
.rep-kpi-giant::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--kpi-c1) 0%, var(--kpi-c2) 100%);
    opacity: 0.07;
    z-index: -1;
}
.kpi-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.0), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.rep-kpi-giant:hover {
    box-shadow:
        0 24px 48px -12px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.05);
}
.rep-kpi-giant > * { position: relative; z-index: 1; }
.rep-kpi-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--kpi-c1) 0%, var(--kpi-c2) 100%);
    color: #fff;
    box-shadow: 0 8px 20px -4px var(--kpi-shadow);
}
.rep-kpi-label {
    font-size: 11px;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 800;
    margin-bottom: 6px;
}
.rep-kpi-value {
    font-size: 44px;
    font-weight: 900;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #0F172A 0%, var(--kpi-c2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rep-kpi-sub {
    font-size: 12px;
    color: #64748B;
    font-weight: 600;
}
.rep-kpi-delta {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    display: inline-block;
    letter-spacing: 0.3px;
}
.rep-kpi-delta.up {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #065F46;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.18);
}
.rep-kpi-delta.down {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #991B1B;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.18);
}
.rep-kpi-spark {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 36px;
    opacity: 0.4;
    color: var(--kpi-c2);
    z-index: 0;
}

.kpi-azul    { --kpi-c1: #3B82F6; --kpi-c2: #1E40AF; --kpi-shadow: rgba(59, 130, 246, 0.4); }
.kpi-verde   { --kpi-c1: #10B981; --kpi-c2: #047857; --kpi-shadow: rgba(16, 185, 129, 0.4); }
.kpi-rojo    { --kpi-c1: #EF4444; --kpi-c2: #B91C1C; --kpi-shadow: rgba(239, 68, 68, 0.4); }
.kpi-violeta { --kpi-c1: #7C3AED; --kpi-c2: #5B21B6; --kpi-shadow: rgba(124, 58, 237, 0.4); }

/* ============================================================
   KPI cards medianos (5 cards de operación)
   ============================================================ */
.rep-kpi-row-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}
.rep-kpi-sm {
    padding: 16px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, box-shadow 0.25s;
    animation: rep-fade-up 0.5s cubic-bezier(.4,0,.2,1) both;
}
.rep-kpi-sm::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--kpi-sm-c1) 0%, var(--kpi-sm-c2) 100%);
}
.rep-kpi-sm:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.12);
}
.rep-kpi-sm-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--kpi-sm-c1) 0%, var(--kpi-sm-c2) 100%);
    color: #fff;
}
.rep-kpi-sm-label {
    font-size: 10px;
    color: #64748B;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rep-kpi-sm-val {
    font-size: 24px;
    font-weight: 900;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.rep-kpi-sm-sub {
    font-size: 11px;
    color: #94A3B8;
    font-weight: 500;
}

.rep-kpi-sm-indigo  { --kpi-sm-c1: #6366F1; --kpi-sm-c2: #4338CA; }
.rep-kpi-sm-cyan    { --kpi-sm-c1: #06B6D4; --kpi-sm-c2: #0E7490; }
.rep-kpi-sm-pink    { --kpi-sm-c1: #EC4899; --kpi-sm-c2: #BE185D; }
.rep-kpi-sm-amber   { --kpi-sm-c1: #F59E0B; --kpi-sm-c2: #B45309; }
.rep-kpi-sm-emerald { --kpi-sm-c1: #10B981; --kpi-sm-c2: #047857; }

/* ============================================================
   SALUD DEL NEGOCIO — 6 cards premium grid
   ============================================================ */
.rep-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}
.rep-health-card {
    padding: 22px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        0 10px 32px -8px var(--health-shadow),
        0 0 0 1px rgba(15, 23, 42, 0.03);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
    animation: rep-fade-up 0.5s cubic-bezier(.4,0,.2,1) both;
}
.rep-health-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--health-c1) 0%, var(--health-c2) 100%);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}
.rep-health-card > * { position: relative; z-index: 1; }
.rep-health-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 20px 40px -8px var(--health-shadow),
        0 0 0 1px rgba(15, 23, 42, 0.05);
}
.rep-health-wide { grid-column: span 2; }
@media (max-width: 768px) { .rep-health-wide { grid-column: span 1; } }

.rep-health-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.rep-health-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--health-c1) 0%, var(--health-c2) 100%);
    color: #fff;
    box-shadow: 0 4px 12px -2px var(--health-shadow);
}
.rep-health-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
    color: var(--health-c2);
    background: rgba(255, 255, 255, 0.7);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--health-c1);
}
.rep-health-label {
    font-size: 13px;
    color: #475569;
    font-weight: 700;
    margin-bottom: 6px;
}
.rep-health-value {
    font-size: 36px;
    font-weight: 900;
    color: #0F172A;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    letter-spacing: -1px;
    margin-bottom: 8px;
    word-break: break-word;
}
.rep-health-bar {
    height: 8px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.rep-health-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--health-c1) 0%, var(--health-c2) 100%);
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.rep-health-sub {
    font-size: 12px;
    color: #64748B;
    font-weight: 500;
    margin-top: 4px;
}
.rep-health-stat-row {
    display: flex;
    gap: 12px;
    margin: 8px 0;
    flex-wrap: wrap;
}
.rep-health-stat-row span {
    font-size: 12px;
    color: #475569;
    background: rgba(255, 255, 255, 0.6);
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
}
.rep-health-stat-row strong {
    color: var(--health-c2);
    font-weight: 900;
    margin-right: 4px;
}

.rep-health-azul   { --health-c1: #3B82F6; --health-c2: #1E40AF; --health-shadow: rgba(59, 130, 246, 0.25); }
.rep-health-violeta{ --health-c1: #8B5CF6; --health-c2: #5B21B6; --health-shadow: rgba(139, 92, 246, 0.25); }
.rep-health-rosa   { --health-c1: #EC4899; --health-c2: #BE185D; --health-shadow: rgba(236, 72, 153, 0.25); }
.rep-health-cyan   { --health-c1: #06B6D4; --health-c2: #0E7490; --health-shadow: rgba(6, 182, 212, 0.25); }
.rep-health-amber  { --health-c1: #F59E0B; --health-c2: #B45309; --health-shadow: rgba(245, 158, 11, 0.25); }
.rep-health-gris   { --health-c1: #64748B; --health-c2: #334155; --health-shadow: rgba(100, 116, 139, 0.25); }

/* Tabla de servicios rentables */
.rep-rentables {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 8px;
}
.rep-rentables th {
    text-align: left;
    color: #64748B;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    padding: 6px 8px;
    border-bottom: 2px solid #E2E8F0;
}
.rep-rentables td {
    padding: 8px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
}
.rep-rentables td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1E293B;
}
.rep-rentables tr:hover {
    background: rgba(124, 58, 237, 0.04);
}
.rep-rentables tr:last-child td { border-bottom: none; }

/* Cancelaciones split pills */
.rep-cancel-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}
.rep-cancel-pill {
    padding: 12px 8px;
    border-radius: 12px;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #E2E8F0;
    transition: transform 0.2s;
}
.rep-cancel-pill:hover { transform: translateY(-2px); }
.rep-cancel-pill-val {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}
.rep-cancel-pill-lbl {
    font-size: 11px;
    color: #475569;
    font-weight: 600;
    line-height: 1.2;
}
.rep-cancel-pill-ok { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); border-color: #6EE7B7; }
.rep-cancel-pill-ok .rep-cancel-pill-val { color: #047857; }
.rep-cancel-pill-warn { background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border-color: #FCD34D; }
.rep-cancel-pill-warn .rep-cancel-pill-val { color: #B45309; }
.rep-cancel-pill-bad { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); border-color: #FCA5A5; }
.rep-cancel-pill-bad .rep-cancel-pill-val { color: #B91C1C; }

/* ============================================================
   INSIGHTS DESTACADOS (4 cards glass fuerte)
   ============================================================ */
.rep-insight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.rep-insight {
    position: relative;
    padding: 24px 22px;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 14px 36px -8px rgba(15, 23, 42, 0.2);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
    animation: rep-fade-up 0.5s cubic-bezier(.4,0,.2,1) both;
    isolation: isolate;
}
.rep-insight:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 48px -8px rgba(15, 23, 42, 0.28);
}
.rep-insight-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.rep-insight::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.6s;
    z-index: 0;
    pointer-events: none;
}
.rep-insight:hover::after { left: 100%; }
.rep-insight > * { position: relative; z-index: 1; }
.rep-insight-1 { background: linear-gradient(135deg, #F59E0B 0%, #DC2626 50%, #7C2D12 100%); }
.rep-insight-2 { background: linear-gradient(135deg, #3B82F6 0%, #1E40AF 50%, #1E3A8A 100%); }
.rep-insight-3 { background: linear-gradient(135deg, #EC4899 0%, #BE185D 50%, #831843 100%); }
.rep-insight-4 { background: linear-gradient(135deg, #10B981 0%, #047857 50%, #064E3B 100%); }
.rep-insight-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.rep-insight-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 800;
    opacity: 0.9;
    margin-bottom: 6px;
}
.rep-insight-name {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 12px 0;
    line-height: 1.15;
    letter-spacing: -0.5px;
    word-break: break-word;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.rep-insight-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.rep-insight-meta span {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.95;
    background: rgba(255, 255, 255, 0.18);
    padding: 4px 10px;
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.rep-insight-meta strong {
    font-weight: 900;
    margin-right: 4px;
    color: #fff;
}

/* ============================================================
   EMBUDO DE CONVERSIÓN — horizontal con flechas
   ============================================================ */
.rep-funnel-card {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    animation: rep-fade-up 0.5s cubic-bezier(.4,0,.2,1) both;
}
.rep-funnel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 8px;
}
.rep-funnel-head h3 {
    margin: 0;
    font-size: 15px;
    color: #1E293B;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rep-funnel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.rep-funnel-step {
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #fff;
    font-weight: 700;
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    min-width: 220px;
    position: relative;
}
.rep-funnel-step:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.rep-funnel-num { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 900; }
.rep-funnel-label { font-size: 13px; font-weight: 700; opacity: 0.95; }
.rep-funnel-pct {
    font-size: 12px;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 8px;
    border-radius: 999px;
}
.rep-funnel-arrow {
    margin: -2px 0;
    opacity: 0.5;
}

/* ============================================================
   TENDENCIA 12 SEMANAS — sparkline dual
   ============================================================ */
.rep-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 18px;
    padding: 20px 22px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.3s, transform 0.3s;
}
.rep-card:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.rep-card-full { grid-column: 1 / -1; }
.rep-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 10px;
}
.rep-card-head h3 {
    font-size: 14px;
    color: #1E293B;
    margin: 0;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rep-card-legend {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #64748B;
    font-weight: 600;
    flex-wrap: wrap;
}
.rep-card-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rep-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.rep-legend-total { background: linear-gradient(180deg, #93C5FD, #3B82F6); }
.rep-legend-completadas { background: linear-gradient(180deg, #FCD34D, #F59E0B); }
.rep-legend-ingresos { background: #10B981; }

.rep-tendencia {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    padding: 16px 0 30px 0;
    border-bottom: 2px solid #E2E8F0;
}
.rep-tendencia-col {
    flex: 1;
    min-width: 28px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    cursor: help;
}
.rep-tendencia-bar {
    background: linear-gradient(180deg, #93C5FD 0%, #3B82F6 100%);
    border-radius: 4px 4px 0 0;
    transition: all 0.3s;
}
.rep-tendencia-completadas {
    background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%);
    border-radius: 4px;
    margin-top: -2px;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.rep-tendencia-col.en-rango .rep-tendencia-bar {
    background: linear-gradient(180deg, #C4B5FD 0%, #7C3AED 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}
.rep-tendencia-col:hover .rep-tendencia-bar {
    filter: brightness(1.1);
    transform: translateY(-3px);
}
.rep-tendencia-num {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 800;
    color: #1E293B;
    background: rgba(255, 255, 255, 0.9);
    padding: 1px 6px;
    border-radius: 6px;
    pointer-events: none;
}
.rep-tendencia-label {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #64748B;
    white-space: nowrap;
    font-weight: 600;
}

/* ============================================================
   GRID DE CHARTS (8 visualizaciones)
   ============================================================ */
.rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
}
@media (max-width: 480px) { .rep-grid { grid-template-columns: 1fr; } }

.rep-estado-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rep-estado-item {
    display: grid;
    grid-template-columns: 50px 1fr 110px;
    align-items: center;
    gap: 12px;
}
.rep-estado-num {
    font-size: 20px;
    font-weight: 900;
    color: #1E293B;
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.rep-estado-bar {
    height: 14px;
    background: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
}
.rep-estado-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
}
.rep-estado-label {
    font-size: 13px;
    color: #475569;
    font-weight: 700;
}

.rep-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.rep-tabla thead {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}
.rep-tabla th {
    text-align: left;
    color: #475569;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 800;
    padding: 8px 10px;
    border-bottom: 2px solid #E2E8F0;
}
.rep-tabla td {
    padding: 10px;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: middle;
    transition: background 0.15s;
}
.rep-tabla tr:hover td { background: rgba(124, 58, 237, 0.03); }
.rep-tabla tr:last-child td { border-bottom: none; }
.rep-tabla td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1E293B;
}
.rep-bar-mini {
    height: 4px;
    background: #E2E8F0;
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
}
.rep-bar-mini > div {
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #7C3AED);
    border-radius: 999px;
    transition: width 0.6s;
}

.rep-dow-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rep-dow-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 10px;
}
.rep-dow-row.pico .rep-dow-fill {
    background: linear-gradient(90deg, #F59E0B 0%, #EF4444 100%) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.45);
}
.rep-dow-label {
    font-size: 12px;
    color: #475569;
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.rep-dow-bar {
    height: 26px;
    background: #F1F5F9;
    border-radius: 8px;
    overflow: hidden;
}
.rep-dow-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366F1 0%, #3B82F6 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 0 12px;
    display: flex;
    align-items: center;
    transition: width 0.7s cubic-bezier(.4,0,.2,1);
    border-radius: 8px;
}

/* Heatmap 24h */
.rep-hora-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 3px;
}
.rep-hora-cell {
    border-radius: 6px;
    padding: 4px 2px;
    text-align: center;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #1E293B;
    transition: transform 0.18s;
    cursor: help;
}
.rep-hora-cell:hover {
    transform: scale(1.12);
    z-index: 2;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25);
}
.rep-hora-cell.pico {
    border: 2px solid #F59E0B;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.55);
    animation: rep-pulse-star 2.4s ease-in-out infinite;
}
.rep-hora-num {
    font-size: 10px;
    font-weight: 800;
    color: #475569;
}
.rep-hora-cnt {
    font-size: 13px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Top horas / rank list */
.rep-rank-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rep-rank-row {
    display: grid;
    grid-template-columns: 36px 70px 1fr 100px;
    align-items: center;
    gap: 12px;
}
.rep-rank-pos {
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.rep-rank-label {
    font-size: 18px;
    font-weight: 900;
    color: #1E293B;
    font-variant-numeric: tabular-nums;
}
.rep-rank-bar {
    height: 18px;
    background: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
}
.rep-rank-bar > div {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #EF4444);
    border-radius: 999px;
    transition: width 0.6s;
}
.rep-rank-num {
    font-size: 12px;
    color: #64748B;
    text-align: right;
    font-weight: 600;
}

/* Distribución por duración */
.rep-dur-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rep-dur-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 12px;
}
.rep-dur-label {
    font-size: 12px;
    color: #475569;
    font-weight: 800;
}
.rep-dur-bar {
    height: 24px;
    background: #F1F5F9;
    border-radius: 8px;
    overflow: hidden;
}
.rep-dur-fill {
    height: 100%;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 0 12px;
    display: flex;
    align-items: center;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
    border-radius: 8px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.muted { color: #94A3B8; }

/* ============================================================
   REVEAL on scroll
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .rep-hero-orb { animation: none; }
    .rep-hora-cell.pico { animation: none; }
}

/* ============================================================
   PRINT styles
   ============================================================ */
@media print {
    .sidebar, .topbar, .rep-hero-actions, .rep-filtros,
    .actions.mb, .rep-chip, .rep-btn, .rep-hero-orb { display: none !important; }
    .rep-card, .rep-kpi-giant, .rep-kpi-sm, .rep-health-card, .rep-insight,
    .rep-funnel-card { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    body { background: #fff !important; font-size: 10pt; }
    .rep-hero {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none;
        border: 2px solid #333;
    }
    .rep-hero-title, .rep-hero-sub, .rep-insight-name,
    .rep-kpi-value, .rep-kpi-sm-val, .rep-health-value, .rep-funnel-num {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
        text-shadow: none !important;
    }
    .rep-kpi-giant, .rep-kpi-sm, .rep-health-card, .rep-insight, .rep-funnel-card, .rep-funnel-step {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none;
        border: 1px solid #ddd !important;
    }
    .rep-funnel-step { color: #000 !important; }
    .rep-tendencia-bar, .rep-tendencia-completadas { background: #ddd !important; }
    .rep-tendencia-col.en-rango .rep-tendencia-bar { background: #555 !important; }
}

/* ============================================================
 * REPORTES CRM WOW 2026-06-25 — calendario-dnd
 * Modulo /empresa/admin/crm/reportes (mismo estilo que citas
 * pero con variante hero cyan-violeta para distinguir)
 * ============================================================ */

/* Variante del hero CRM: cyan→violeta→rosa (más frío que el de citas) */
.rep-hero-crm {
    background: linear-gradient(135deg, #0F766E 0%, #7C3AED 50%, #BE185D 100%);
}
.rep-hero-crm .rep-hero-orb-1 {
    background: radial-gradient(circle, #06B6D4 0%, transparent 70%);
}
.rep-hero-crm .rep-hero-orb-2 {
    background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
}
.rep-hero-crm .rep-hero-orb-3 {
    background: radial-gradient(circle, #10B981 0%, transparent 70%);
    opacity: 0.4;
}

/* Conversion rows (barras horizontales para térmico y embudo) */
.rep-conv-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.rep-conv-row:last-child { margin-bottom: 0; }
.rep-conv-label {
    font-size: 12px;
    color: #475569;
    font-weight: 700;
    text-transform: capitalize;
}
.rep-conv-bar {
    height: 14px;
    background: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
}
.rep-conv-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
    min-width: 8px;
}
.rep-conv-num {
    font-size: 13px;
    font-weight: 900;
    color: #1E293B;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.rep-conv-num .muted {
    font-size: 11px;
    font-weight: 500;
    margin-left: 2px;
}

/* Badges para tabla de leads sin seguimiento */
.badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    text-transform: capitalize;
}
.badge-ok      { background: #D1FAE5; color: #065F46; }
.badge-warn    { background: #FEF3C7; color: #92400E; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-info    { background: #DBEAFE; color: #1E40AF; }

/* ============================================================
 * TOOLTIPS EXPLICATIVOS 2026-06-25 v2 — calendario-dnd
 * Fix MASH 2026-06-25 17:30:
 *   1. Quitada animacion blink (distraia)
 *   2. Popup ahora position:fixed + JS lo mueve al <body> al hover
 *      para escapar overflow:hidden de los cards padres.
 *   3. Flecha adaptativa (arriba o abajo segun donde quepa).
 * ============================================================ */
.rep-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.14);
    color: #6366F1;
    cursor: help;
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
    vertical-align: middle;
    font-size: 11px;
    font-weight: 800;
    user-select: none;
    flex-shrink: 0;
}
.rep-tip svg { display: block; }
.rep-tip:hover,
.rep-tip:focus {
    background: #6366F1;
    color: #fff;
    transform: scale(1.2);
    outline: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
/* Popup fixed: posicionado por JS al hover. opacity controlado por JS. */
.rep-tip-popup {
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    color: #F9FAFB;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    width: 320px;
    max-width: calc(100vw - 24px);
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    z-index: 99999;
    display: none;
    flex-direction: column;
    gap: 10px;
}
.rep-tip-popup.rep-tip-show {
    display: flex;
    opacity: 1;
}
.rep-tip-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rep-tip-label {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #A78BFA;
    margin-bottom: 1px;
}
.rep-tip-consejo .rep-tip-label {
    color: #FCD34D;
}
/* Flecha del popup - posicionada por JS segun donde quepa */
.rep-tip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
}
.rep-tip-arrow.rep-tip-arrow-down {
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: #111827;
}
.rep-tip-arrow.rep-tip-arrow-up {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: #1F2937;
}

/* Responsive: en mobile ocupa mas ancho */
@media (max-width: 640px) {
    .rep-tip-popup { width: 280px; }
}

/* Print styles: oculta el icono ? y su popup */
@media print {
    .rep-tip, .rep-tip-popup { display: none !important; }
}

/* ============================================================
 * DASHBOARD LEADS RECIENTES — WOW v1 — calendario-dnd 2026-06-25
 * Rediseño del widget "Leads recientes" del /empresa/admin/
 * Features:
 *   - Card premium con eyebrow "PIPELINE EN VIVO" + título grande
 *   - Avatar con gradient + ring animado por estado (frio/tibio/caliente/ganado)
 *   - Badge de estado con color semantico
 *   - Tiempo + vendedor con iconos SVG
 *   - Valor estimado destacado a la derecha
 *   - Chevron que aparece en hover
 *   - Hover: gradiente sutil por estado + translateX(4px) + sombra color-tinted
 *   - Reveal stagger on load
 * ============================================================ */
.dash-leads-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFC 100%);
    border-radius: 18px;
    border: 1px solid rgba(99, 102, 241, 0.08);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(99, 102, 241, 0.04);
    overflow: hidden;
    transition: box-shadow 0.3s;
}
.dash-leads-card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 16px 40px rgba(99, 102, 241, 0.08);
}

/* HEAD */
.dash-leads-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.08);
    background:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(99, 102, 241, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168, 85, 247, 0.04) 0%, transparent 60%);
}
.dash-leads-head-text h3 {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-leads-eyebrow {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6366F1;
    background: rgba(99, 102, 241, 0.1);
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
}
.dash-leads-title {
    font-size: 22px;
    font-weight: 800;
    color: #1F2937;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-top: 6px;
}
.dash-leads-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
}
.dash-leads-ver-todos {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: white;
    color: #6366F1;
    font-weight: 700;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    text-decoration: none;
    transition: all 0.18s;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}
.dash-leads-ver-todos:hover {
    background: #6366F1;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
.dash-leads-ver-todos svg { transition: transform 0.18s; }
.dash-leads-ver-todos:hover svg { transform: translateX(3px); }

/* LISTA */
.dash-leads-lista {
    list-style: none;
    margin: 0;
    padding: 8px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ROW */
.dash-leads-row {
    border-radius: 12px;
    transition: all 0.22s cubic-bezier(.4,0,.2,1);
    position: relative;
    opacity: 0;
    transform: translateY(8px);
    animation: dash-leads-fadein 0.5s ease forwards;
}
.dash-leads-row:nth-child(1) { animation-delay: 0.05s; }
.dash-leads-row:nth-child(2) { animation-delay: 0.12s; }
.dash-leads-row:nth-child(3) { animation-delay: 0.19s; }
.dash-leads-row:nth-child(4) { animation-delay: 0.26s; }
.dash-leads-row:nth-child(5) { animation-delay: 0.33s; }
@keyframes dash-leads-fadein {
    to { opacity: 1; transform: translateY(0); }
}
.dash-leads-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    transition: all 0.2s;
    border: 1px solid transparent;
    background: transparent;
}
.dash-leads-row:hover .dash-leads-link {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.05) 100%);
    border-color: rgba(99, 102, 241, 0.15);
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.08);
}

/* AVATAR con ring segun estado */
.dash-leads-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    background: linear-gradient(135deg, #818CF8 0%, #A78BFA 100%);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}
.dash-leads-avatar-text { position: relative; z-index: 1; }
.dash-leads-avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid;
    border-color: rgba(99, 102, 241, 0.4);
    opacity: 0.6;
}
.dash-leads-estado-frio .dash-leads-avatar {
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}
.dash-leads-estado-frio .dash-leads-avatar-ring { border-color: rgba(59, 130, 246, 0.5); }
.dash-leads-estado-tibio .dash-leads-avatar {
    background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.dash-leads-estado-tibio .dash-leads-avatar-ring { border-color: rgba(245, 158, 11, 0.5); }
.dash-leads-estado-caliente .dash-leads-avatar {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}
.dash-leads-estado-caliente .dash-leads-avatar-ring { border-color: rgba(239, 68, 68, 0.5); animation: dash-leads-pulse 1.8s ease-in-out infinite; }
.dash-leads-estado-ganado .dash-leads-avatar {
    background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.dash-leads-estado-ganado .dash-leads-avatar-ring { border-color: rgba(16, 185, 129, 0.5); }
@keyframes dash-leads-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.12); opacity: 0.3; }
}

/* INFO */
.dash-leads-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dash-leads-nombre {
    font-weight: 700;
    font-size: 14.5px;
    color: #1F2937;
    letter-spacing: -0.2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}
.dash-leads-row:hover .dash-leads-nombre { color: #6366F1; }
.dash-leads-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #6B7280;
    flex-wrap: wrap;
}

/* BADGE por estado */
.dash-leads-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.dash-badge-frio {
    background: rgba(59, 130, 246, 0.12);
    color: #1E40AF;
}
.dash-badge-tibio {
    background: rgba(245, 158, 11, 0.14);
    color: #B45309;
}
.dash-badge-caliente {
    background: rgba(239, 68, 68, 0.14);
    color: #B91C1C;
}
.dash-badge-ganado {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

/* Tiempo + vendedor */
.dash-leads-tiempo,
.dash-leads-vendedor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6B7280;
    font-size: 11.5px;
}
.dash-leads-tiempo svg,
.dash-leads-vendedor svg {
    opacity: 0.7;
}

/* VALOR destacado */
.dash-leads-valor {
    font-weight: 800;
    font-size: 14px;
    color: #1F2937;
    font-feature-settings: 'tnum';
    letter-spacing: -0.3px;
    flex-shrink: 0;
    padding-left: 8px;
}
.dash-leads-valor-empty {
    color: #D1D5DB;
    font-weight: 500;
}

/* CHEVRON */
.dash-leads-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #9CA3AF;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.22s;
    flex-shrink: 0;
}
.dash-leads-row:hover .dash-leads-chevron {
    opacity: 1;
    transform: translateX(0);
    color: #6366F1;
}

/* Responsive */
@media (max-width: 640px) {
    .dash-leads-head { padding: 16px; flex-direction: column; align-items: flex-start; }
    .dash-leads-ver-todos { align-self: flex-end; margin-top: -32px; }
    .dash-leads-lista { padding: 6px 8px 10px; }
    .dash-leads-link { padding: 10px 12px; gap: 12px; }
    .dash-leads-avatar { width: 38px; height: 38px; font-size: 13px; }
    .dash-leads-meta { font-size: 11px; gap: 8px; }
}

/* Print styles */
@media print {
    .dash-leads-card { box-shadow: none; border-color: #E5E7EB; }
    .dash-leads-row { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
 * BTN-PELIGRO EN FORM ELIMINAR — fix MASH 2026-06-25 20:15
 * Antes: el boton Eliminar del header del lead se veia mal porque
 *   .btn-peligro solo tenia estilo para .btn-mini y .crm-modal-acciones.
 *   En .crm-form-eliminar quedaba sin estilo base (fondo transparente,
 *   padding 0).
 * Ahora: regla especifica para el contexto del form inline de eliminar,
 *   no rompe los otros usos de .btn-peligro.
 * ============================================================ */
.crm-form-eliminar .btn-peligro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #FCA5A5 0%, #F87171 100%);
    color: #7F1D1D;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.18);
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}
.crm-form-eliminar .btn-peligro:hover {
    background: linear-gradient(135deg, #F87171 0%, #DC2626 100%);
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
    border-color: rgba(220, 38, 38, 0.5);
}
.crm-form-eliminar .btn-peligro:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.3);
}

/* ============================================================
 * INPUT HORA VALIDATION — fix MASH 2026-06-25 21:05
 * Si el usuario escribe manualmente una hora en el form de citas,
 * el input cambia de color: verde si esta en slots libres,
 * rojo si no esta disponible.
 * ============================================================ */
.crm-form-input-ok {
    border-color: #10B981 !important;
    background: rgba(16, 185, 129, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}
.crm-form-input-error {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}
.citas-slots-hint-error {
    color: #B91C1C !important;
    font-weight: 600;
}


/* ============================================================
   BUILDER - Editor de items FAQ
   ============================================================ */
.builder-campo-faq {
    margin-top: 12px;
}
.builder-faq-count {
    display: inline-block;
    background: #eef2ff;
    color: #4f46e5;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    vertical-align: middle;
}
.builder-faq-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.builder-faq-fila {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    transition: all 0.15s ease;
}
.builder-faq-fila:focus-within {
    border-color: #4f46e5;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.builder-faq-fila-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.builder-faq-num {
    flex: 0 0 28px;
    height: 28px;
    width: 28px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.builder-faq-fila-head input[data-faq-campo="pregunta"] {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
}
.builder-faq-fila-head input[data-faq-campo="pregunta"]:focus {
    background: #fff;
    border-color: #c7d2fe;
    outline: none;
}
.builder-faq-fila textarea[data-faq-campo="respuesta"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}
.builder-faq-fila textarea[data-faq-campo="respuesta"]:focus {
    background: #fff;
    border-color: #c7d2fe;
    outline: none;
}
.builder-faq-del {
    flex: 0 0 28px;
    height: 28px;
    width: 28px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.builder-faq-del:hover {
    background: #dc2626;
    color: #fff;
    transform: scale(1.08);
}
.builder-faq-add {
    background: #eef2ff !important;
    color: #4f46e5 !important;
    border: 2px dashed #c7d2fe !important;
    width: 100%;
    padding: 12px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    transition: all 0.15s ease;
}
.builder-faq-add:hover:not(:disabled) {
    background: #4f46e5 !important;
    color: #fff !important;
    border-color: #4f46e5 !important;
    border-style: solid !important;
}
.builder-faq-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* --- Color picker 2026-07-19 (track-p8-quickwins) --- */
.emp-datos-colores-grid { gap: 14px; }
.emp-color-campo { display: flex; flex-direction: column; gap: 6px; padding: 12px; background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(168,85,247,0.04)); border: 1px solid rgba(99,102,241,0.12); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.emp-color-campo:hover { border-color: rgba(99,102,241,0.32); box-shadow: 0 2px 12px rgba(99,102,241,0.08); }
.emp-color-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 4px; margin: 2px 0; }
.emp-color-swatch { width: 100%; aspect-ratio: 1; min-height: 22px; border: 2px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 0; cursor: pointer; transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.18); }
.emp-color-swatch:hover { transform: translateY(-2px) scale(1.1); border-color: rgba(99,102,241,0.5); box-shadow: 0 4px 10px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.3); z-index: 2; position: relative; }
.emp-color-swatch:active { transform: translateY(0) scale(1.05); }
.emp-color-input-row { display: flex; align-items: center; gap: 8px; }
.emp-color-preview { display: inline-block; width: 28px; height: 28px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); flex-shrink: 0; transition: background .12s ease; }
.emp-color-hex { flex: 1; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 10px; border: 1px solid #E2E8F0; border-radius: 6px; background: #fff; transition: border-color .12s ease, box-shadow .12s ease; }
.emp-color-hex:focus { outline: none; border-color: #6366F1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
.emp-color-hex:invalid { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }
.emp-color-toggle { background: #F1F5F9; color: #475569; border: 1px solid #E2E8F0; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .12s ease; display: inline-flex; align-items: center; gap: 4px; }
.emp-color-toggle:hover { background: #6366F1; color: #fff; border-color: #6366F1; }
.emp-color-toggle[aria-expanded="true"] { background: #6366F1; color: #fff; border-color: #6366F1; }
.emp-color-toggle-ico { font-size: 10px; transition: transform .15s ease; }
.emp-color-toggle[aria-expanded="true"] .emp-color-toggle-ico { transform: rotate(180deg); }
.emp-color-advanced { margin-top: 8px; padding: 12px; background: linear-gradient(135deg, rgba(15,23,42,0.03), rgba(99,102,241,0.04)); border: 1px solid rgba(99,102,241,0.12); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.emp-color-advanced[hidden] { display: none; }
.emp-color-row { display: flex; align-items: center; gap: 8px; }
.emp-color-mini-label { width: 24px; font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; text-align: center; flex-shrink: 0; }
.emp-color-native { width: 60px; height: 28px; padding: 0; border: 1px solid #E2E8F0; border-radius: 6px; cursor: pointer; background: #fff; }
.emp-color-native::-webkit-color-swatch-wrapper { padding: 2px; }
.emp-color-native::-webkit-color-swatch { border: none; border-radius: 4px; }
.emp-color-mini-val { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; color: #475569; min-width: 38px; text-align: right; flex-shrink: 0; }
.emp-color-rgb-slider,
.emp-color-hsl-slider,
.emp-color-alpha-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; outline: none; cursor: pointer; background: #E2E8F0; }
.emp-color-rgb-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #6366F1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .1s ease; }
.emp-color-rgb-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.emp-color-rgb-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #6366F1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.emp-color-hsl-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #EC4899; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .1s ease; }
.emp-color-hsl-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.emp-color-hsl-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #EC4899; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.emp-color-alpha-slider { background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent); background-size: 8px 8px; }
.emp-color-alpha-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #10B981; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform .1s ease; }
.emp-color-alpha-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.emp-color-alpha-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #10B981; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
@media (max-width: 768px) { .emp-color-swatches { grid-template-columns: repeat(8, 1fr); } .emp-datos-colores-grid { grid-template-columns: 1fr !important; } }