/* ==========================================================
   CRM - CALENDARIOS, AVISOS Y PROYECTOS
   Va despues de ajustes.css: es la capa de las pantallas
   nuevas, no una correccion de las viejas.
   ========================================================== */

/* ==========================================================
   1. BARRA DEL CALENDARIO
   ========================================================== */

.cal-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

/* Los dos calendarios como pestañas: no es un filtro mas, es
   cambiar de agenda. Tiene que verse cual esta abierta. */
.cal-ambitos {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 12px;
    background: var(--surf-2);
}

.cal-ambito {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.cal-ambito:hover { color: var(--text-main); }

.cal-ambito.activa {
    background: rgba(var(--acento-rgb), 0.14);
    color: var(--primary);
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cal-nav .btn-icon {
    width: 30px;
    height: 30px;
}

.cal-hoy {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

.cal-titulo {
    margin-left: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    text-transform: capitalize;
}

.cal-vistas {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.cal-vista {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--borde-luz);
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}

.cal-vista.activa,
.cal-vista:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.cal-nuevo {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    margin-left: 4px;
}

/* ==========================================================
   2. REJILLA HORARIA
   Una columna por dia, una fila por hora. Los eventos no van
   dentro de las celdas sino en una capa por encima: asi uno de
   90 minutos se dibuja como un bloque continuo en lugar de
   partirse en dos.
   ========================================================== */

.cal-rejilla {
    --cal-hora-w: 52px;
    border: 1px solid var(--borde-luz);
    border-radius: 12px;
    overflow: hidden;
}

.cal-cabecera {
    display: grid;
    grid-template-columns: var(--cal-hora-w) repeat(var(--cal-dias), 1fr);
    background: var(--surf-2);
    border-bottom: 1px solid var(--borde-luz);
}

.cal-dia-cab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border-left: 1px solid var(--borde-luz);
}

.cal-dia-nombre {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-dia-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.1;
}

/* El dia de hoy se marca en la cabecera y no pintando toda la
   columna: una columna de color compite con los eventos. */
.cal-dia-cab.hoy .cal-dia-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #0a0a0b;
}

.cal-horas {
    position: relative;
    max-height: 420px;
    overflow-y: auto;
}

.cal-fila {
    display: grid;
    grid-template-columns: var(--cal-hora-w) repeat(var(--cal-dias), 1fr);
    height: 46px;
}

.cal-hora {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 7px 0 0;
    font-size: 10.5px;
    color: var(--text-dim);
    border-top: 1px solid var(--borde-luz);
}

.cal-celda {
    border-top: 1px solid var(--borde-luz);
    border-left: 1px solid var(--borde-luz);
    cursor: pointer;
    transition: background 120ms ease;
}

.cal-celda:hover {
    background: rgba(var(--acento-rgb), 0.06);
}

/* La capa de eventos se calca sobre la rejilla horaria */
.cal-capa {
    position: absolute;
    top: 0;
    left: var(--cal-hora-w);
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.cal-evento {
    position: absolute;
    left: calc(var(--d) * (100% / var(--cal-dias)) + 3px);
    width: calc((100% / var(--cal-dias)) - 6px);
    padding: 3px 6px;
    border-radius: 7px;
    border-left: 3px solid var(--ev-color, var(--primary));
    background: color-mix(in srgb, var(--ev-color, var(--primary)) 22%, var(--surf-1));
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 140ms ease, filter 140ms ease;
}

.cal-evento:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
}

.cal-evento strong {
    display: block;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-evento span {
    font-size: 10px;
    color: var(--text-muted);
}

/* Los del equipo se distinguen sin leer: otro borde, no otro
   color de fondo, para que el acento siga mandando. */
.cal-evento.de-equipo {
    border-left-style: double;
    border-left-width: 5px;
}

/* ==========================================================
   3. VISTA LISTA
   ========================================================== */

.cal-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-lista-dia {
    margin: var(--e-3) 0 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: capitalize;
}

.cal-evento-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--surf-2);
    cursor: pointer;
    transition: background 140ms ease;
}

.cal-evento-fila:hover {
    background: rgba(var(--acento-rgb), 0.10);
}

.cal-punto {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.cal-punto.de-equipo {
    background: transparent;
    border: 2px solid var(--primary);
}

.cal-fila-hora {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cal-fila-titulo {
    font-size: 13px;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================
   4. FICHA DEL EVENTO
   ========================================================== */

.cal-ficha-fondo,
.pr-caja-fondo {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-4);
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms;
}

.cal-ficha-fondo.abierta,
.pr-caja-fondo.abierta {
    opacity: 1;
    visibility: visible;
}

.cal-ficha,
.pr-ficha {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    overflow-y: auto;
    padding: var(--e-4);
    border-radius: 16px;
    background: #17171a;
    border: 1px solid #2b2b30;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.pr-ficha-ancha { max-width: 620px; }

.cal-ficha header,
.pr-ficha header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
}

.cal-ficha h3,
.pr-ficha h3 {
    margin: 0 !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
}

.cal-ficha .campo-label,
.pr-ficha .campo-label {
    display: block;
    margin: var(--e-3) 0 4px !important;
    font-size: 12px;
    color: var(--text-muted);
}

.cal-ficha-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-3);
}

/* Duraciones rapidas: mueven el fin, no el inicio */
.cal-duraciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: var(--e-3);
    font-size: 11.5px;
    color: var(--text-dim);
}

.cal-duraciones button {
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--borde-luz);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.cal-duraciones button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.cal-ficha-ambito {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.cal-ficha-ambito label { position: relative; cursor: pointer; }

.cal-ficha-ambito input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cal-ficha-ambito span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--borde-luz);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--text-muted);
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.cal-ficha-ambito input:checked + span {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(var(--acento-rgb), 0.10);
}

.cal-ficha-pie,
.pr-ficha-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: var(--e-4);
    padding-top: var(--e-3);
    border-top: 1px solid var(--borde-luz);
}

.cal-ficha-pie > div {
    display: flex;
    gap: 6px;
}

/* ==========================================================
   5. AVISOS
   ========================================================== */

#avisos-toggle { position: relative; }

.avisos-cuenta {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary);
    color: #0a0a0b;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    border: 2px solid var(--bg-main);
    font-variant-numeric: tabular-nums;
}

#avisos-toggle.con-avisos i { color: var(--primary); }

.avisos-panel {
    position: fixed;
    top: calc(var(--head-h, 56px) + 8px);
    right: 12px;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 70;
    padding: var(--e-4);
    border-radius: 14px;
    background: #17171a;
    border: 1px solid #2b2b30;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.avisos-panel.abierto {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.avisos-panel h4 {
    margin: 0 0 var(--e-3) !important;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main);
}

.avisos-panel h4 i { color: var(--primary); font-size: 12px; }

.aviso-fila {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 0;
    border-bottom: 1px solid var(--borde-luz);
}

.aviso-fila:last-child { border-bottom: none; }

.aviso-fila strong {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-main);
}

.aviso-fila span {
    font-size: 11px;
    color: var(--text-dim);
}

/* Lo que arranca en menos de 10 minutos se marca: es la
   diferencia entre "hay cosas hoy" y "esto es ahora". */
.aviso-fila.cerca strong { color: var(--primary); }

.avisos-vacio {
    margin: 0 !important;
    font-size: 12px;
    color: var(--text-dim);
}

/* --- Cartel flotante --- */

.avisos-pila {
    position: fixed;
    top: calc(var(--head-h, 56px) + 12px);
    right: 12px;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.aviso-cartel {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 11px 12px;
    border-radius: 12px;
    background: #17171a;
    border: 1px solid var(--primary);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    animation: aviso-entra 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.aviso-cartel.urgente {
    border-color: var(--warning);
}

.aviso-cartel > i {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 15px;
}

.aviso-cartel.urgente > i { color: var(--warning); }

.aviso-cartel div { flex: 1 1 auto; min-width: 0; }

.aviso-cartel strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aviso-cartel span {
    font-size: 11.5px;
    color: var(--text-muted);
}

.aviso-cartel.yendose {
    animation: aviso-sale 280ms ease forwards;
}

@keyframes aviso-entra {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes aviso-sale {
    to { opacity: 0; transform: translateX(16px); }
}

/* Estas dos animaciones no se apagan con prefers-reduced-motion
   porque son la unica señal de que llego un aviso: sin ellas el
   cartel aparece de la nada y se pierde. */
@media (prefers-reduced-motion: reduce) {
    .aviso-cartel {
        animation: aviso-entra 260ms ease both !important;
    }
}

/* ==========================================================
   6. PROYECTOS
   ========================================================== */

/* Los tres filtros como un solo control segmentado. Antes eran
   botones transparentes sueltos sobre el fondo: con una foto
   detras el texto quedaba ilegible y no se entendia que fueran
   tres opciones de lo mismo. */
.pr-filtros {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: var(--surf-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--borde-luz, var(--border-color));
}

.pr-filtro {
    height: 28px;
    padding: 0 13px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.pr-filtro:hover { color: var(--text-main); }

/* La opcion elegida se marca con una pastilla llena, no con un
   borde: se ve cual esta activa de un vistazo y sin leer. */
.pr-filtro.activa {
    background: rgba(var(--acento-rgb), 0.16);
    color: var(--primary);
}

.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--e-3);
    align-items: start;
}

/* La tarjeta es el cuadro de informacion: nombre, cliente, en
   que etapa esta y cuanto lleva. Lo demas se abre al tocarla. */
.pr-tarjeta {
    padding: var(--e-4) !important;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease;
}

.pr-tarjeta:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--acento-rgb), 0.4) !important;
}

.pr-tarjeta.cerrado { opacity: 0.72; }

.pr-tarjeta header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: 6px;
}

.pr-tarjeta h3 {
    margin: 0 !important;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-main);
}

.pr-estado {
    flex: 0 0 auto;
    height: 20px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pr-abierto {
    background: rgba(var(--acento-rgb), 0.14);
    color: var(--primary);
}

.pr-pausado {
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.pr-cerrado {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-dim);
}

.pr-cliente {
    margin: 0 0 var(--e-3) !important;
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pr-progreso {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.pr-progreso-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pr-tarjeta footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-top: 7px;
}

.pr-etapa {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pct {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* --- Ficha del proyecto --- */

.pr-ficha-cliente {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted);
}

.pr-ficha-desc {
    margin: 0 0 var(--e-4) !important;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.pr-bloque {
    margin-bottom: var(--e-4);
    padding-top: var(--e-3);
    border-top: 1px solid var(--borde-luz);
}

.pr-bloque-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--e-3);
}

.pr-bloque h4 {
    margin: 0 !important;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-main);
}

.pr-bloque h4 i { color: var(--primary); font-size: 12px; }

.pr-etapas {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pr-etapa-fila {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 9px;
    transition: background 140ms ease;
}

.pr-etapa-fila:hover { background: var(--surf-2); }

/* La etapa en curso es la que importa de un vistazo */
.pr-etapa-fila.actual {
    background: rgba(var(--acento-rgb), 0.09);
}

.pr-etapa-check {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 140ms ease;
}

.pr-etapa-fila.hecha .pr-etapa-check { color: var(--primary); }
.pr-etapa-check:hover { color: var(--primary); }

/* El nombre es editable en el lugar: renombrar una etapa no
   merece abrir otro formulario. */
.pr-etapa-nombre {
    flex: 1 1 auto;
    min-width: 0;
    height: 28px !important;
    padding: 0 8px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text-main) !important;
    font-size: 12.5px !important;
}

.pr-etapa-nombre:hover {
    border-color: var(--borde-luz) !important;
}

.pr-etapa-nombre:focus {
    border-color: var(--primary) !important;
    background: var(--surf-2) !important;
}

.pr-etapa-fila.hecha .pr-etapa-nombre {
    color: var(--text-muted) !important;
}

.pr-etapa-quitar {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, color 140ms ease;
}

.pr-etapa-fila:hover .pr-etapa-quitar { opacity: 1; }
.pr-etapa-quitar:hover { color: var(--danger); }

.pr-agregar-etapa {
    margin-top: 6px;
    padding: 6px 10px;
    border: 1px dashed var(--borde-luz);
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.pr-agregar-etapa:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Notas --- */

.pr-nota-form {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px;
    margin-bottom: var(--e-3);
}

.pr-nota-form input { flex: 1 1 auto; }

.pr-nota-form .btn {
    flex: 0 0 auto;
    width: 38px;
    padding: 0 !important;
    justify-content: center;
}

.pr-notas {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.pr-nota {
    padding: 8px 10px;
    border-radius: 9px;
    background: var(--surf-2);
    border: 1px solid var(--borde-luz);
}

.pr-nota p {
    margin: 0 0 3px !important;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-main);
    word-break: break-word;
}

.pr-nota span {
    font-size: 10.5px;
    color: var(--text-dim);
}

.pr-vacio,
.pr-ayuda {
    margin: 0 !important;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-dim);
}

.pr-ayuda { margin-top: var(--e-3) !important; }

/* ==========================================================
   7. MOVIL
   ========================================================== */

@media (max-width: 720px) {
    .cal-barra {
        gap: var(--e-2);
    }

    .cal-vistas {
        width: 100%;
        margin-left: 0;
    }

    .cal-nuevo { margin-left: auto; }

    /* En un telefono una semana entera son columnas de 40px:
       no entra ni el titulo de un evento. Se abre en el dia. */
    .cal-rejilla { --cal-hora-w: 42px; }

    .cal-horas { max-height: 340px; }

    .cal-ficha-grid { grid-template-columns: 1fr; }

    .cal-ficha,
    .pr-ficha {
        max-height: 92vh;
        border-radius: 14px;
    }

    .pr-grid { grid-template-columns: 1fr; }

    .avisos-panel {
        left: 8px;
        right: 8px;
        width: auto;
    }

    .avisos-pila {
        left: 8px;
        right: 8px;
        align-items: stretch;
    }

    .aviso-cartel { width: auto; }
}

/* ==========================================================
   8. BOTONES DE LAS FICHAS: A LA MISMA ALTURA
   index.css le da `margin-top: 0.5rem` a .btn-primary, pensado
   para cuando es el ultimo boton de un formulario largo. En una
   fila de acciones eso lo baja 8px respecto de "Cancelar" y se
   ve torcido. En una fila, ningun boton lleva margen propio.
   ========================================================== */

.cal-ficha-pie .btn,
.pr-ficha-pie .btn,
.cal-ficha-pie > div .btn,
.pr-nota-form .btn {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 36px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    align-self: center;
}

.cal-ficha-pie,
.pr-ficha-pie {
    align-items: center;
}

/* ==========================================================
   9. LOS DOS CALENDARIOS A LA VEZ
   Ya no son pestañas que cambian de agenda: son dos capas
   encendidas al mismo tiempo. Los botones pasan a ser
   interruptores, con la marca de color de cada capa.
   ========================================================== */

.cal-ambitos {
    background: transparent;
    padding: 0;
    gap: 5px;
}

.cal-ambito {
    border: 1px solid var(--borde-luz);
    background: transparent;
}

/* Apagada: se ve que existe pero que no se esta mostrando */
.cal-ambito:not(.activa) {
    opacity: 0.5;
}

.cal-ambito:not(.activa) .cal-marca {
    background: transparent;
}

/* La marca es la misma señal que despues distingue los eventos
   en la rejilla: relleno para lo propio, contorno para el
   equipo. Asi el color de la barra explica el de los bloques. */
.cal-marca {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--primary);
    flex: 0 0 9px;
}

.cal-ambito.de-equipo .cal-marca {
    background: transparent;
}

.cal-ambito.activa {
    border-color: var(--primary);
}

/* Con las dos capas encendidas hay que poder separar de un
   vistazo cual es cual. Lo propio va lleno; lo del equipo, con
   trama diagonal y borde punteado. */
.cal-evento.de-equipo {
    border-left-style: dashed;
    border-left-width: 3px;
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 5px,
            rgba(255, 255, 255, 0.05) 5px 10px
        ),
        color-mix(in srgb, var(--ev-color, var(--primary)) 14%, var(--surf-1));
}

/* ==========================================================
   10. BARRA EN UN SOLO RENGLON
   Antes eran tres grupos con flex-wrap: en cuanto faltaba
   ancho, las vistas y el boton de evento se caian a una
   segunda fila. Ahora es una sola fila que, si no entra, se
   desplaza de costado en vez de partirse.
   ========================================================== */

.cal-barra {
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.cal-barra::-webkit-scrollbar { display: none; }

.cal-barra > * { flex: 0 0 auto; }

/* El separador empuja las vistas al otro extremo */
.cal-sep {
    flex: 1 1 auto !important;
    min-width: 8px;
}

.cal-titulo {
    margin-left: 2px;
    white-space: nowrap;
}

/* ==========================================================
   11. DOS CALENDARIOS, UNO AL LADO DEL OTRO
   ========================================================== */

.cal-dobles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--e-4);
    align-items: start;
}

.cal-columna {
    min-width: 0;
    border: 1px solid var(--borde-luz);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.012);
}

.cal-columna-cab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--borde-luz);
    background: var(--surf-2);
}

.cal-columna-cab h4 {
    flex: 1 1 auto;
    margin: 0 !important;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 7px;
}

.cal-columna-cab h4 i {
    font-size: 11px;
    color: var(--primary);
}

.cal-columna-cuenta {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(var(--acento-rgb), 0.14);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* La columna del equipo se distingue por el marco, no por el
   color de cada evento: adentro son todos iguales. */
.cal-columna.de-equipo {
    border-style: dashed;
}

.cal-columna .cal-rejilla {
    border: none;
    border-radius: 0;
}

.cal-columna .cal-horas { max-height: 380px; }

.cal-columna .cal-rejilla { --cal-hora-w: 34px; }

.cal-columna .cal-hora {
    font-size: 9.5px;
    padding-right: 4px;
}

.cal-columna .cal-cuerpo { padding: 0; }

.cal-columna .estado-vacio { padding: var(--e-4) !important; }

.cal-columna .cal-lista { padding: var(--e-3); }

/* Ya no hay capas superpuestas: la trama del equipo sobraba */
.cal-evento.de-equipo,
.cal-columna.de-equipo .cal-evento {
    border-left-style: solid;
    border-left-width: 3px;
    background: color-mix(in srgb, var(--ev-color, var(--primary)) 22%, var(--surf-1));
}

/* --- Borrar desde la propia pieza --- */

.cal-evento { position: absolute; }

.cal-evento-borrar {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 9px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 140ms ease, background 140ms ease;
}

.cal-evento:hover .cal-evento-borrar { opacity: 1; }
.cal-evento-borrar:hover { background: var(--danger); }

.cal-evento-fila { position: relative; }

.cal-evento-fila .cal-evento-borrar {
    position: static;
    margin-left: auto;
    opacity: 0.35;
}

.cal-evento-fila:hover .cal-evento-borrar { opacity: 1; }

/* En pantalla tactil no hay hover */
@media (hover: none) {
    .cal-evento-borrar { opacity: 0.75; }
}

/* El boton de borrar proyecto: rojo, chico, a la izquierda de
   todo, separado de las acciones normales. */
.pr-borrar {
    width: 38px;
    padding: 0 !important;
    justify-content: center;
    margin-right: auto;
}

@media (max-width: 900px) {
    /* Dos calendarios de 180px no se leen: se apilan */
    .cal-dobles { grid-template-columns: 1fr; }
}

/* ==========================================================
   12. EL CONTADOR NO PISA EL ICONO
   En movil el badge estaba anclado al centro del boton y
   corrido 20px: sobre "Clientes" caia justo encima del icono y
   lo partia al medio. Se lo lleva al vertice superior derecho
   del boton, que es donde no hay nada.
   ========================================================== */

@media (max-width: 768px) {
    html body .main-tabs .tab-btn {
        position: relative !important;
        overflow: visible !important;
    }

    html body .main-tabs .tab-badge {
        position: absolute !important;
        top: 2px !important;
        right: 6px !important;
        left: auto !important;
        transform: none !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 0 3px !important;
        font-size: 8.5px !important;
        line-height: 14px !important;
        border-radius: 999px !important;
        background: var(--primary) !important;
        color: #0a0a0b !important;
        border: 1.5px solid var(--bg-main) !important;
        z-index: 2 !important;
    }

    /* El icono recupera su lugar: sin el badge encima ya no
       necesita pelear por el espacio. */
    html body .main-tabs .tab-btn i {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Un contador en cero no dice nada y encima tapa: se esconde */
    html body .main-tabs .tab-badge:empty,
    html body .main-tabs .tab-badge.cero {
        display: none !important;
    }
}

/* Todo lo de la barra mide igual y se apoya en la misma linea.
   El boton de "Evento" venia 4px mas abajo por el margin-top
   que index.css le pone a .btn-primary. */
.cal-barra .btn,
.cal-barra .btn-icon,
.cal-barra .cal-vista,
.cal-barra .cal-hoy,
.cal-barra .cal-nuevo {
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    align-self: center !important;
    font-size: 12px !important;
    border-radius: 9px !important;
}

.cal-barra .btn-icon {
    width: 32px !important;
    padding: 0 !important;
}

.cal-barra .btn {
    padding: 0 12px !important;
}

/* ajustes.css estira los <span> del boton al 100% para que la
   etiqueta corte con puntos suspensivos. El contador tambien es
   un span, asi que heredaba ese ancho: medía 62px y tapaba el
   icono entero. Se lo excluye. */
@media (max-width: 768px) {
    html body .main-tabs .tab-btn > span.tab-badge {
        display: inline-flex !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Y en cero no se muestra. Va con este selector largo y no con
       el corto de mas arriba porque aquel perdia por especificidad
       contra el `display: inline-flex` de aca: el contador quedaba
       visible marcando "0" sobre el icono de Clientes. */
    html body .main-tabs .tab-btn > span.tab-badge.cero,
    html body .main-tabs .tab-btn > span.tab-badge:empty {
        display: none !important;
    }
}

/* ==========================================================
   13. NADA VACIO OCUPA LUGAR

   Regla del CRM: un contenedor de lista sin elementos mide
   cero. El espacio aparece cuando aparece el contenido, no
   antes. Un hueco de 300px esperando una nota que no existe se
   lee como que algo se rompio.

   Habia dos causas juntas:

   1. El comodin [class*="vacio"] de ajustes.css le pone
      min-height: 320px a CUALQUIER clase que contenga "vacio".
      Estaba pensado para el vacio de pantalla completa (una
      pestaña sin datos), pero tambien agarraba a .pr-vacio, que
      es un <p> de una linea adentro de una ficha.

   2. Los contenedores de lista quedaban con su alto aunque no
      tuvieran hijos.
   ========================================================== */

/* --- 1. Contenedores de lista: vacios, no existen ---------- */

#bitacora-notas:empty,
#agenda-lista:empty,
#avisos-lista:empty,
#consultas-grid:empty,
#clientes-lista:empty,
#users-grid-list:empty,
#ventas-history-container:empty,
#total-leads-history-container:empty,
#submodal-timeline-container:empty,
.pr-notas:empty,
.pr-grid:empty,
.cal-lista:empty,
.historial-grid:empty,
.agenda-lista:empty,
.bitacora-resumen:empty,
.chat-mensajes:empty {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Las listas miden lo que miden sus hijos: el max-height es un
   techo para que no crezcan sin fin, no un piso. */
.pr-notas,
#bitacora-notas,
.agenda-lista,
#avisos-lista {
    min-height: 0 !important;
    height: auto !important;
}

/* --- 2. El vacio "en linea": una frase, no una pantalla ----
   Adentro de una ficha, un panel o una lista corta, el estado
   vacio es una linea de texto gris. La version alta se reserva
   para cuando ocupa la pestaña entera. */

html body .pr-vacio,
html body .avisos-vacio,
html body .bitacora-vacio,
html body .cal-columna .estado-vacio,
html body .pr-ficha .estado-vacio,
html body .cal-ficha .estado-vacio,
html body .agenda-panel .estado-vacio,
html body .agenda-contactos .estado-vacio,
html body #ap-panel .estado-vacio {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: var(--e-3) 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--text-dim) !important;
    text-align: left !important;
}

/* Sin icono gigante en los vacios en linea */
html body .pr-ficha .estado-vacio i,
html body .cal-columna .estado-vacio i,
html body .agenda-panel .estado-vacio i {
    display: none !important;
}

html body .cal-columna .estado-vacio strong,
html body .pr-ficha .estado-vacio strong {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 12.5px !important;
    color: var(--text-muted) !important;
}

html body .cal-columna .estado-vacio p,
html body .pr-ficha .estado-vacio p {
    margin: 0 !important;
    font-size: 11.5px !important;
    max-width: none !important;
}

/* El bloque de notas se cierra sobre su contenido */
.pr-bloque:last-child { padding-bottom: 0; }

/* ==========================================================
   14. FONDO ESMERILADO DETRAS DE LAS VENTANAS
   Toda ventana emergente difumina lo que hay atras. No es solo
   estetica: con el fondo de codigo cayendo y una foto propia,
   el contenido de atras competia con el del modal.

   El blur va en la capa de fondo, no en el modal: si se le
   pone al modal, se difumina su propio contenido.
   ========================================================== */

.cal-ficha-fondo,
.pr-caja-fondo,
.modal-overlay,
.chat-fondo,
.crm-sync-overlay,
#user-profile-modal,
[class*="modal-fondo"] {
    background: rgba(8, 8, 10, 0.55) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
}

/* Los modales viejos del CRM se cierran con la clase .hidden,
   no con .abierto/.visible. Buscar esas clases dejaba el blur
   apagado justo cuando el modal estaba abierto. */
.modal-overlay.hidden {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ==========================================================
   15. AVISO DE GUARDADO
   Logo del estudio con dos anillos que salen pulsando.
   ========================================================== */

.guardando {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: rgba(8, 8, 10, 0.42);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    transition: opacity 220ms ease, visibility 220ms;
}

.guardando.visible {
    opacity: 1;
    visibility: visible;
}

.guardando-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 30px 40px;
    border-radius: 20px;
    background: rgba(23, 23, 26, 0.92);
    border: 1px solid rgba(var(--acento-rgb), 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    animation: guardando-entra 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.guardando-marca {
    position: relative;
    width: 74px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guardando-marca img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

/* Dos anillos desfasados: uno solo se lee como un parpadeo,
   dos dan la sensacion de algo que late. */
.guardando-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    animation: guardando-pulso 1.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.guardando-anillo.dos {
    animation-delay: 0.55s;
}

@keyframes guardando-pulso {
    0%   { transform: scale(0.62); opacity: 0.85; }
    70%  { opacity: 0.12; }
    100% { transform: scale(1.35); opacity: 0; }
}

@keyframes guardando-entra {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.guardando strong {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

/* Al confirmar, los anillos se frenan y el texto cambia: la
   diferencia entre "esperá" y "listo" tiene que verse. */
.guardando.listo .guardando-anillo {
    animation: none;
    opacity: 0;
}

.guardando.listo .guardando-marca::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: guardando-cierra 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes guardando-cierra {
    from { transform: scale(1.25); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Esta animacion no se apaga con prefers-reduced-motion: es la
   unica señal de que el guardado esta en curso. */
@media (prefers-reduced-motion: reduce) {
    .guardando-anillo {
        animation: guardando-pulso 1.6s ease-in-out infinite !important;
    }
}

/* ==========================================================
   16. MODAL DE IMPORTAR CSV
   El input de archivo salia con el estilo nativo del sistema
   (boton gris claro "Seleccionar archivo" sobre fondo oscuro) y
   los botones del pie ocupaban media ventana cada uno.
   ========================================================== */

#csv-modal .modal-card {
    padding: var(--e-5) !important;
    border-radius: 16px !important;
}

#csv-modal h3 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

#csv-modal .csv-ayuda {
    margin: 0 0 var(--e-4) !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--text-muted) !important;
    max-width: 60ch;
}

.csv-paso {
    margin-bottom: var(--e-4);
}

.csv-paso > label {
    display: block;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--text-muted) !important;
}

/* El selector de archivo nativo no se puede estilar entero, pero
   si su boton interno: asi deja de ser una caja gris del sistema
   en medio de una interfaz oscura. */
#csv-archivo {
    width: 100%;
    padding: 8px 10px !important;
    border: 1px dashed var(--borde-luz) !important;
    border-radius: 10px !important;
    background: var(--surf-2) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    cursor: pointer;
}

#csv-archivo::file-selector-button {
    margin-right: 10px;
    padding: 6px 12px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: transparent;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease;
}

#csv-archivo::file-selector-button:hover {
    background: rgba(var(--acento-rgb), 0.14);
}

.btn-enlace {
    margin-top: 8px;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--primary) !important;
    font-size: 12px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-enlace:hover { text-decoration: underline; }

/* Pie del modal: botones del alto de siempre, alineados a la
   derecha, no dos bloques gigantes uno al lado del otro. */
#csv-modal .modal-actions,
.modal-card .modal-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: var(--e-4) !important;
    padding-top: var(--e-3) !important;
    border-top: 1px solid var(--borde-luz) !important;
}

#csv-modal .modal-actions .btn,
.modal-card .modal-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}

/* ==========================================================
   17. LO QUE SIGUE SOBRANDO EN LAS FICHAS
   Sin notas, el bloque no existe: no hay caja, ni texto, ni
   aire. El titulo "Notas" y el campo alcanzan para saber que
   se puede escribir ahi.
   ========================================================== */

.pr-bloque:last-child {
    margin-bottom: 0 !important;
}

.pr-nota-form {
    margin-bottom: 0 !important;
}

/* Con notas, el aire aparece recien ahi */
.pr-notas {
    margin-top: var(--e-3);
}

.pr-ficha-cuerpo > :last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================
   18. DESENFOQUE SIN COSTO POR CUADRO

   El problema no era el blur: era backdrop-filter. Esa
   propiedad le pide al navegador que LEA la region que hay
   detras del elemento y la desenfoque de nuevo en cada cuadro,
   porque no puede saber si lo de atras cambio. Con un canvas
   animado detras, cambia siempre. Medido: +23% de costo por
   repintado con un modal abierto.

   La misma imagen se consigue al reves: en vez de que el modal
   mire hacia atras, se desenfocan las capas de atras con
   `filter`. Un filter sobre un elemento que no cambia se
   resuelve una vez y queda cacheado como textura. Y como al
   abrir un modal el fondo de codigo ya se frena, esas capas no
   cambian: el blur se calcula al abrir, no 20 veces por segundo.
   ========================================================== */

/* El workspace quedo FUERA de esta lista a proposito. Desenfocar
   #crm-workspace obliga a rasterizar de nuevo todo el arbol de la
   aplicacion —tablas, listas, graficos— en una sola textura gigante,
   y cualquier cambio adentro la invalida entera. Era el motivo real
   de la caida de cuadros al abrir una sub-ventana. Solo se
   desenfocan las capas de fondo, que son planas y baratas. */
html.hay-modal #fondo-imagen,
html.hay-modal #fondo-codigo,
html.hay-modal #ambient-background-glow {
    filter: blur(11px);
    /* La escala tapa el borde blando que deja el blur */
    transform: scale(1.012);

    /* Sin transicion a proposito: animar un filter obliga a
       recalcular el desenfoque en cada cuadro de la animacion,
       que es justo lo que se venia a evitar. Entra de golpe, y
       lo que suaviza el cambio es el fundido del propio modal. */
}

/* Sin transicion al cerrar: desenfocar de salida no aporta y
   obliga a recalcular el filtro en cada cuadro de la vuelta. */
html.hay-modal #crm-workspace {
    filter: none;
    transform: none;
}

html:not(.hay-modal) #fondo-imagen,
html:not(.hay-modal) #ambient-background-glow {
    filter: none;
    transform: none;
}

/* El canvas conserva su transform propio: si se lo pisa con
   "none" pierde el escalado que tapa el borde del blur. */
html:not(.hay-modal) #fondo-codigo {
    filter: none;
}

/* Los overlays dejan de mirar hacia atras: ahora solo oscurecen */
html body .cal-ficha-fondo,
html body .pr-caja-fondo,
html body .modal-overlay,
html body .chat-fondo,
html body .crm-sync-overlay,
html body #user-profile-modal,
html body .guardando {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body .cal-ficha-fondo,
html body .pr-caja-fondo,
html body .modal-overlay:not(.hidden),
html body #user-profile-modal {
    /* Sin el workspace desenfocado, la separacion la tiene que dar
       el oscurecido: por eso es mas opaco que antes. */
    background: rgba(6, 6, 8, 0.76) !important;
}

html body .guardando {
    background: rgba(6, 6, 8, 0.5) !important;
}

/* El chat es un panel lateral, no una ventana centrada: el
   fondo puede ser mas suave. */
html body .chat-fondo {
    background: rgba(6, 6, 8, 0.5) !important;
}

/* El panel del chat y los modales quedan fuera del desenfoque
   porque cuelgan de <body>, no de #crm-workspace. */

/* ==========================================================
   19. CLIENTES: DOS COLUMNAS

   Saber si alguien ya es cliente era un trabajo de lectura:
   habia que buscarlo en la cartera y, si no estaba, asumir
   que no. Ahora las dos listas conviven: izquierda los que
   faltan contactar, derecha los que ya cerraron.
   ========================================================== */

.clientes-split {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* Una sola tarjeta: el resumen es su cabecera y las fichas su
   contenido. Nada flota suelto. */
.clientes-col {
    padding: 1.1rem 1.25rem 1.25rem;
    border-radius: 16px;
    min-width: 0;
}

/* Las cuatro cifras van como una tira dentro de la tarjeta, sin
   recuadro propio: separarlas en cajitas dentro de otra caja es
   lo que hacia ver todo desarmado. Las separa una linea. */
.clientes-col .clientes-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0;
    margin: 0 0 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: none;
    border-radius: 0;
}

.clientes-col .clientes-resumen .resumen-item {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 1rem;
    border-radius: 0;
}

/* Una linea fina entre cifras, salvo antes de la primera */
.clientes-col .clientes-resumen .resumen-item + .resumen-item {
    border-left: 1px solid var(--border-color) !important;
}

.clientes-col .clientes-resumen .resumen-item strong {
    font-size: 1.5rem;
    line-height: 1.1;
}

/* El estado vacio ya esta dentro de la tarjeta: no necesita
   fondo, borde ni sombra propios. */
.clientes-col .tabla-vacia {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2.5rem 1rem !important;
    min-height: 0 !important;
}

@media (max-width: 980px) {
    .clientes-split { grid-template-columns: 1fr; }
    .contactar-panel { position: static; }
    .contactar-lista { max-height: 260px; }
}

.contactar-panel {
    padding: 1rem;
    border-radius: 14px;
    /* La cola de trabajo se distingue de la cartera por el borde
       ambar de arriba: es el mismo lenguaje que usa el CRM para
       "pendiente", y no compite con el acento. */
    border-top: 2px solid var(--warning, #f59e0b);
    position: sticky;
    top: 1rem;
}

.contactar-cab {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contactar-titulo {
    margin: 0;
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.contactar-badge {
    margin-left: auto;
    min-width: 22px;
    text-align: center;
    background: rgba(245, 158, 11, 0.16);
    color: var(--warning, #f59e0b);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.contactar-sub {
    margin: 3px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.contactar-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 60vh;
    overflow-y: auto;
    /* Aisla el scroll: lo que se repinta aca no obliga a
       recalcular el resto de la pestana. */
    contain: content;
}

.contactar-alta {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 5px;
    margin-bottom: 10px;
}

.contactar-alta input {
    min-width: 0;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px;
    background: var(--surf-1, rgba(0, 0, 0, 0.2)) !important;
    color: var(--text-main);
    font-size: 0.78rem !important;
}

.contactar-alta .btn-fila {
    height: 30px;
    width: 30px;
}

.contactar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: 0.82rem;
}

.contactar-datos {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.contactar-datos strong {
    color: var(--text-main);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contactar-estado {
    font-size: 0.68rem;
    font-weight: 700;
}

.contactar-estado i { font-size: 0.5em; vertical-align: middle; }

/* Los anotados a mano se distinguen del resto: no son consultas
   del equipo, son una nota de quien esta usando el CRM. */
.contactar-item.es-manual { border-style: dashed; }

.contactar-anotado { color: var(--text-dim, var(--text-muted)); }
.contactar-anotado i { font-size: 0.8em; }

.contactar-borrar { color: var(--text-dim, var(--text-muted)); }
.contactar-borrar:hover { color: var(--danger, #ef4444); }

.contactar-vacio {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
    padding: 8px 0;
}

/* El estado vacio ocupaba el ancho de una ficha y quedaba como un
   recuadro flotando al costado del panel de la izquierda. Se
   estira a toda la columna, que es donde iria la cartera. */
.clientes-col .tabla-vacia {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================
   20. PERFIL COMPACTO

   La pestana daba una pantalla y media de aire vertical para
   cuatro campos. Se aprieta todo sin tocar el contenido.
   ========================================================== */

#tab-profile .metrics-grid { margin-bottom: 1rem !important; gap: 0.6rem; }
#tab-profile .metric-card { padding: 0.7rem 0.85rem; }
#tab-profile .metric-value { font-size: 1.45rem; }
#tab-profile .metric-data h3 { font-size: 0.76rem; }
#tab-profile .metric-subtext { font-size: 0.68rem; }
#tab-profile h3 { margin-bottom: 0.6rem !important; }
#tab-profile .bitacora-grid { margin-bottom: 1rem; }
#tab-profile .bitacora-panel { padding: 1rem 1.1rem; }
#tab-profile .form-group { margin-bottom: 0.7rem !important; }
#tab-profile .glass-panel { padding: 1.1rem !important; }
#tab-profile .avatar-card-item img { width: 42px; height: 42px; }

.form-row-grid.perfil-compacto { gap: 1rem; align-items: start; }

/* ==========================================================
   CONTADORES EN CERO
   Los badges de la campana y del chat se apagan poniendoles
   el atributo `hidden`. No alcanzaba: su `display: inline-flex`
   es una regla de autor y le gana al `[hidden]` del navegador,
   que es de la hoja del user-agent. Por eso quedaba un "0"
   rosa encendido al lado de los dos iconos.
   ========================================================== */

html body .avisos-cuenta[hidden],
html body #chat-toggle .chat-pendientes[hidden],
html body .tab-badge.cero,
html body .tab-badge:empty {
    display: none !important;
}