/* ==========================================================
   CRM - SELECTOR DE COLOR Y CHAT LIGERO

   Va ultimo de todo: son correcciones sobre capas anteriores
   y necesitan ganar en cascada sin ensuciar todo con !important.
   ========================================================== */

/* ==========================================================
   1. SELECTOR DE COLOR PROPIO

   Reemplaza al <input type="color"> nativo, que abria un
   cuadro del sistema operativo con estilo claro imposible de
   tocar y que, al robar el foco, disparaba el click en
   document que cierra el panel: arrastrar el tono cerraba la
   ventana. Este vive adentro y usa las mismas variables.
   ========================================================== */

.ap-personalizado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.ap-muestra {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 8px;
    background: var(--muestra, var(--primary));
    cursor: pointer;
    transition: border-color 140ms ease;
}

.ap-muestra:hover { border-color: var(--primary); }

.ap-picker {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 12px;
    background: var(--surf-2, rgba(255, 255, 255, 0.04));
}

.ap-picker[hidden] { display: none; }

.ap-picker-campo {
    position: relative;
    height: 118px;
    border-radius: 9px;
    overflow: hidden;
    cursor: crosshair;
    /* Sin esto el navegador se queda el gesto para hacer scroll
       y en pantalla tactil no se puede arrastrar el punto. */
    touch-action: none;
}

.ap-picker-tono,
.ap-picker-blanco,
.ap-picker-negro {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ap-picker-blanco { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); }
.ap-picker-negro  { background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

.ap-picker-marca {
    position: absolute;
    width: 13px;
    height: 13px;
    margin: -7px 0 0 -7px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.ap-picker-hue {
    width: 100%;
    height: 12px;
    margin: 10px 0 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: linear-gradient(to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    cursor: pointer;
}

.ap-picker-hue::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--surf-1, #16181c);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.ap-picker-hue::-moz-range-thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--surf-1, #16181c);
    border: 2px solid #fff;
}

.ap-picker-pie {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.ap-picker-vista {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid var(--borde-luz, var(--border-color));
}

.ap-picker-hex {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 9px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 8px;
    background: var(--surf-1, rgba(0, 0, 0, 0.25));
    color: var(--text-main);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    text-transform: uppercase;
}

.ap-picker-hex:focus {
    outline: none;
    border-color: var(--primary);
}

/* ==========================================================
   2. CHAT LIGERO

   El panel es una capa fija con scroll propio. Aislarlo evita
   que cada mensaje nuevo obligue a recalcular el diseno de la
   pagina que hay debajo, y el fondo opaco evita componerlo
   contra todo lo que tiene detras en cada repintado.
   ========================================================== */

/* --- El chat es una VENTANA, no un panel lateral ------------

   Antes ocupaba el alto entero de la pantalla y traia un velo
   oscuro detras: eso es un modal, y un modal dice "atende esto
   y despues segui". Una conversacion del equipo no es eso: uno
   escribe mientras mira una consulta. Ahora es una caja chica
   apoyada abajo a la derecha, y el CRM sigue vivo detras. */
html body .chat-panel {
    top: auto !important;
    bottom: 16px !important;
    right: 16px !important;
    width: 340px !important;
    max-width: calc(100vw - 32px) !important;
    /* Alto propio, no el de la pantalla. El minimo evita que con
       dos mensajes quede una ventana ridiculamente chata. */
    height: 460px !important;
    max-height: calc(100vh - 96px) !important;
    min-height: 280px !important;
    border: 1px solid var(--borde-luz, var(--border-color)) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45) !important;

    /* Entra desde abajo, que es de donde viene la ventana. */
    transform: translateY(calc(100% + 24px)) !important;

    contain: layout paint style;
    will-change: transform;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--surf-1, #16181c) !important;
}

html body .chat-panel.abierto {
    transform: none !important;
}

/* El velo se va del todo: con la ventana abierta se tiene que
   poder tocar el CRM. Ademas era una capa a pantalla completa
   componiendose sobre el fondo animado. */
html body .chat-fondo {
    display: none !important;
}

/* En el celular no hay lugar para una ventanita: vuelve a ser
   una hoja que sube desde abajo, que es lo que se espera ahi. */
@media (max-width: 560px) {
    html body .chat-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 82vh !important;
        max-height: 82vh !important;
        border-radius: 16px 16px 0 0 !important;
    }
}

html body .chat-mensajes {
    contain: content;
    overscroll-behavior: contain;
    padding: 10px 12px !important;
}

/* La cabecera de una ventana chica no puede medir 64px: se lleva
   un septimo del alto util. */
html body .chat-cabecera {
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 8px 10px 8px 12px !important;
}

html body .chat-titulo strong { font-size: 0.88rem; }
html body .chat-titulo > i { display: none; }
html body .chat-cabecera #chat-estado { font-size: 0.68rem; }

/* El vacio era una tarjeta con su propio fondo flotando dentro
   de la ventana: caja dentro de caja otra vez. */
html body .chat-mensajes .estado-vacio {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    padding: 1.5rem 1rem !important;
}

html body .chat-mensajes .estado-vacio i { font-size: 1.6rem !important; }
html body .chat-mensajes .estado-vacio strong { font-size: 0.9rem !important; }
html body .chat-mensajes .estado-vacio p { font-size: 0.78rem !important; }

html body .chat-envio {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
}

html body .chat-fondo {
    transition: opacity 140ms linear !important;
    will-change: opacity;
}

/* ==========================================================
   2b. LA FICHA DE CONSULTA, MAS CHICA

   El modal se comia la pantalla entera para ocho campos: campos
   de 44px, separaciones de seccion entre uno y otro y un
   historial sin techo que lo estiraba sin limite. Se aprieta
   todo sin sacar nada.
   ========================================================== */

/* legibilidad.css fija `.modal-card { max-width: 650px !important }`
   y varias capas mas ponen alturas de control con !important. Para
   ganar sin subir la especificidad a lo bruto, estas van con
   !important a proposito: es la capa final. */
html body #lead-modal .modal-card {
    max-width: 520px !important;
    width: 100% !important;
    max-height: 82vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0.9rem 1rem 1rem !important;
    border-radius: 14px !important;
}

html body #lead-modal .modal-header {
    margin-bottom: 0.7rem !important;
    padding-bottom: 0.5rem !important;
}

html body #lead-modal .modal-header h3 {
    font-size: 0.95rem !important;
}

/* El formulario es lo unico que scrollea: cabecera y botones
   quedan siempre a la vista. */
html body #lead-modal #lead-form {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-right: 4px;
}

html body #lead-modal .form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
}

html body #lead-modal .form-group {
    margin-bottom: 0.55rem !important;
}

html body #lead-modal label {
    font-size: 0.72rem !important;
    margin-bottom: 2px !important;
}

html body #lead-modal input,
html body #lead-modal select,
html body #lead-modal textarea {
    min-height: 30px !important;
    height: auto !important;
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
}

html body #lead-modal textarea {
    min-height: 48px !important;
    resize: vertical;
}

html body #lead-modal .atajos-fecha {
    gap: 4px;
    margin-top: 4px;
}

html body #lead-modal .atajos-fecha button {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

html body #lead-modal .bloque-timeline {
    margin-top: 0.4rem !important;
    padding-top: 0.6rem !important;
}

html body #lead-modal .bloque-timeline h4 {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
}

html body #lead-modal .interaccion-nueva {
    display: grid !important;
    grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto !important;
    gap: 5px !important;
}

html body #lead-modal .interaccion-nueva .btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 0.75rem !important;
}

/* El historial reservaba media pantalla en blanco esperando
   interacciones que todavia no existen. Ahora crece hasta 120px
   y de ahi scrollea. */
html body #lead-modal #lead-timeline {
    max-height: 120px !important;
    min-height: 0 !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 6px;
}

html body #lead-modal #lead-timeline:empty {
    display: none;
}

html body #lead-modal .modal-actions {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    gap: 8px;
}

html body #lead-modal .modal-actions .btn {
    min-height: 34px !important;
    height: 34px;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
}

@media (max-width: 620px) {
    html body #lead-modal .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================
   2e. CALENDARIO

   La rejilla se veia igual a las 8 que a las 19: nada decia
   donde estaba parado uno. Eso lo arregla la linea de ahora
   (la pone js/agenda.js). El resto es hacer legible lo que ya
   estaba: la columna de hoy, las horas fuera de la jornada y
   los eventos, que eran rectangulos planos.
   ========================================================== */

/* --- La linea de la hora actual ---------------------------- */
.cal-ahora {
    position: absolute;
    left: calc(var(--d) * (100% / var(--cal-dias)));
    width: calc(100% / var(--cal-dias));
    height: 0;
    border-top: 2px solid var(--danger, #ef4444);
    pointer-events: none;
    z-index: 3;
}

/* El punto del extremo: sin el, con un evento debajo la linea
   se lee como el borde del evento y no como la hora. */
.cal-ahora::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger, #ef4444);
}

/* --- La columna de hoy ------------------------------------- */
html body .cal-dia-cab.hoy .cal-dia-nombre {
    color: var(--primary);
}

/* --- Fuera de la jornada ----------------------------------- */
/* Sabado y domingo apagados: la semana laboral se lee sola. */
html body .cal-fila .cal-celda:nth-last-child(-n+2) {
    background: rgba(0, 0, 0, 0.14);
}

/* --- Los eventos ------------------------------------------- */
html body .cal-evento {
    /* La barra de color va al costado y no de borde completo:
       distingue el evento sin encerrarlo. */
    box-shadow: inset 3px 0 0 var(--ev-color, var(--primary));
    border-left: none;
    padding-left: 9px;
    /* Sin transicion en `transform` sobre elementos posicionados
       en porcentaje: al repintar la semana saltan. Solo el brillo. */
    transition: filter 140ms ease, box-shadow 140ms ease;
}

html body .cal-evento:hover {
    transform: none;
    filter: brightness(1.18);
    box-shadow: inset 3px 0 0 var(--ev-color, var(--primary)),
                0 2px 10px rgba(0, 0, 0, 0.35);
}

/* La celda vacia invita a hacer click, pero recien cuando el
   mouse esta encima: antes se pintaba toda la fila. */
html body .cal-celda {
    transition: background 100ms linear;
}

html body .cal-celda:hover {
    background: rgba(var(--acento-rgb), 0.10);
    box-shadow: inset 0 0 0 1px rgba(var(--acento-rgb), 0.25);
}

/* La cabecera de dias no se va con el scroll de las horas */
html body .cal-cabecera {
    position: sticky;
    top: 0;
    z-index: 4;
}

/* Barra de scroll fina: dos calendarios lado a lado con la
   barra gorda del sistema comen 34px de rejilla. */
html body .cal-horas {
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

html body .cal-horas::-webkit-scrollbar { width: 7px; }
html body .cal-horas::-webkit-scrollbar-track { background: transparent; }
html body .cal-horas::-webkit-scrollbar-thumb {
    background: var(--borde-luz, var(--border-color));
    border-radius: 999px;
}

/* ==========================================================
   2f. PIE DE LA FICHA DE PROYECTO

   Dos grupos, no cuatro botones repartidos por el ancho:
   a la izquierda lo que le pasa AL PROYECTO (borrarlo,
   terminarlo), a la derecha lo que uno hace ahora (agendar,
   guardar). `space-between` con cuatro hijos los separaba a
   todos por igual y no se leia ningun grupo.
   ========================================================== */

html body .pr-ficha-pie {
    justify-content: flex-start !important;
    flex-wrap: wrap;
}

/* Este es el que parte el pie en dos: todo lo que viene
   despues se va contra el borde derecho. */
html body .pr-ficha-pie #pr-reunion {
    margin-left: auto !important;
}

/* ==========================================================
   2g. CALENDARIOS: MENOS REJA, MAS AGENDA

   La version anterior dibujaba una cuadricula completa: linea
   vertical y horizontal en cada celda, con el mismo peso. Eso
   hace que la pantalla se lea como una planilla y que los
   eventos, que son lo unico que importa, compitan con el
   fondo.

   El criterio de Google Calendar es al reves: la hora se marca
   con una linea horizontal tenue, el dia con una vertical
   apenas visible, y todo el contraste se guarda para lo que
   esta agendado.
   ========================================================== */

/* El marco exterior se va: la reja ya delimita sola. */
html body .cal-rejilla {
    border: none !important;
    border-radius: 0 !important;
}

/* Cabecera de dias: sin caja gris, solo una linea de base. */
html body .cal-cabecera {
    background: transparent !important;
    border-bottom: 1px solid var(--borde-luz, var(--border-color)) !important;
}

html body .cal-dia-cab {
    border-left: none !important;
    padding: 6px 4px 8px !important;
}

html body .cal-dia-nombre {
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
}

html body .cal-dia-num {
    font-size: 17px !important;
    font-weight: 400 !important;
    margin-top: 2px !important;
}

/* Hoy: el circulo lleno es la marca que ya entendemos todos. */
html body .cal-dia-cab.hoy .cal-dia-num {
    min-width: 28px !important;
    height: 28px !important;
    font-weight: 500 !important;
    background: var(--primary) !important;
    color: #0a0a0b !important;
}

/* --- La reja ----------------------------------------------- */

/* La linea de la hora es la unica que se ve de verdad. */
html body .cal-fila {
    height: 44px !important;
}

html body .cal-celda {
    border-top: 1px solid color-mix(in srgb, var(--borde-luz, #2a2a2e) 55%, transparent) !important;
    /* La vertical, a la mitad de peso: separa dias sin dibujar
       una cuadricula. */
    border-left: 1px solid color-mix(in srgb, var(--borde-luz, #2a2a2e) 28%, transparent) !important;
}

/* La primera columna de cada dia no necesita su propia linea:
   la del borde ya esta. */
html body .cal-fila .cal-celda:first-of-type {
    border-left: none !important;
}

/* La columna de horas: numeros chicos, alineados con la linea
   que nombran, sin borde propio. */
html body .cal-hora {
    border-top: none !important;
    padding: 0 8px 0 0 !important;
    font-size: 10px !important;
    font-variant-numeric: tabular-nums;
    /* Medio renglon hacia arriba para que el numero quede
       montado sobre su linea, no debajo. Con !important porque
       hay una capa previa que pone `transform: none`. */
    transform: translateY(-6px) !important;
}

/* --- Los eventos ------------------------------------------- */

/* Bloque lleno del color del evento, como en cualquier agenda:
   se lee de un vistazo cuanto ocupa y de que es. */
html body .cal-evento {
    padding: 3px 7px !important;
    border-radius: 6px !important;
    border: none !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--ev-color, var(--primary)) 88%, #000) !important;
    color: #0a0a0b !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    left: calc(var(--d) * (100% / var(--cal-dias)) + 2px) !important;
    width: calc((100% / var(--cal-dias)) - 5px) !important;
}

html body .cal-evento strong { font-weight: 600 !important; }
html body .cal-evento span { color: rgba(0, 0, 0, 0.62) !important; }

html body .cal-evento:hover {
    filter: brightness(1.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* Los del equipo se distinguen por una barra al costado, no
   por otro color: el color ya lo usa el evento. */
html body .cal-evento.de-equipo {
    border-left: 3px solid rgba(0, 0, 0, 0.45) !important;
    padding-left: 6px !important;
}

/* --- Buscar en el calendario -------------------------------- */

.cal-buscador {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 10px;
    margin-left: 10px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 9px;
    background: var(--surf-1, rgba(0, 0, 0, 0.2));
    flex: 0 1 230px;
    min-width: 150px;
}

.cal-buscador > i {
    font-size: 11px;
    color: var(--text-dim, var(--text-muted));
    flex: 0 0 auto;
}

.cal-buscador input {
    flex: 1;
    min-width: 0;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--text-main);
    font-size: 12px !important;
    font-family: inherit;
}

.cal-buscador:focus-within {
    border-color: rgba(var(--acento-rgb), 0.55);
}

.cal-buscador:focus-within > i { color: var(--primary); }

/* La lista cuelga del campo y tapa el calendario: es momentanea
   y desaparece al elegir o al tocar afuera. */
.cal-resultados {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
    padding: 5px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 11px;
    background: var(--surf-1, #16181c);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.cal-resultados[hidden] { display: none; }

.cal-resultado {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-main);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.cal-resultado:hover,
.cal-resultado:focus-visible {
    background: rgba(var(--acento-rgb), 0.12);
}

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

.cal-resultado.es-fecha > i {
    color: var(--primary);
    font-size: 12px;
}

.cal-resultado-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cal-resultado strong {
    font-size: 12.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cal-resultado small {
    font-size: 10.5px;
    color: var(--text-muted);
}

.cal-sin-resultados {
    margin: 0;
    padding: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

/* En el telefono el buscador toma toda la fila de la barra. */
@media (max-width: 720px) {
    .cal-buscador {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        order: 10;
    }
}

/* --- Plegar una columna ------------------------------------ */

html body .cal-columna-cab {
    cursor: pointer;
    user-select: none;
    border-radius: 8px;
    transition: background 140ms ease;
}

html body .cal-columna-cab:hover {
    background: rgba(var(--acento-rgb), 0.07);
}

html body .cal-plegar-flecha {
    margin-left: 8px;
    font-size: 10px;
    color: var(--text-dim, var(--text-muted));
    transition: transform 180ms ease;
}

html body .cal-columna.plegada .cal-plegar-flecha {
    transform: rotate(180deg);
}

/* Plegada: queda solo la cabecera, y el ancho lo cede al otro
   calendario en vez de dejar un hueco. */
html body .cal-columna.plegada .cal-cuerpo {
    display: none !important;
}

/* El contenedor hereda `transition-property: all`, y eso incluye
   `grid-template-columns`. Los valores de esta reja no son
   interpolables entre si (`1fr 1fr` contra `minmax(0,1fr) auto`),
   asi que el navegador se quedaba con el valor viejo: el cambio
   de anchos no llegaba a aplicarse nunca, ni siquiera forzandolo
   con un estilo en linea con !important. Sin transicion, entra
   en el acto. */
html body .cal-dobles {
    transition: none !important;
}

/* El contenedor es un grid de `1fr 1fr`: para que el calendario
   abierto se lleve el ancho, hay que cambiar la reja del padre,
   no el hijo. Las clases las pone js/agenda.js al plegar. */
html body .cal-dobles.sin-privado {
    grid-template-columns: auto minmax(0, 1fr) !important;
}

html body .cal-dobles.sin-equipo {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

/* Los dos plegados: no hay ancho que repartir, asi que las dos
   cabeceras van a la par. Sin esta regla ganaria la ultima de
   las dos de arriba y un calendario cerrado quedaria estirado
   al doble que el otro, sin motivo. */
html body .cal-dobles.sin-privado.sin-equipo {
    grid-template-columns: 1fr 1fr !important;
}

html body .cal-columna.plegada {
    min-width: 0 !important;
}

/* Plegada, la cabecera se pone vertical: ocupa el ancho de una
   pestaña lateral en vez de una franja horizontal muerta. */
html body .cal-columna.plegada .cal-columna-cab h4 {
    white-space: nowrap;
}

html body .cal-dobles {
    align-items: start;
}

/* En el telefono los dos calendarios ya van uno debajo del
   otro, asi que plegar solo esconde el cuerpo. */
@media (max-width: 720px) {
    html body .cal-dobles,
    html body .cal-dobles.sin-privado,
    html body .cal-dobles.sin-equipo {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   2c. BUSCADORES

   La cruz azul de la esquina era el boton nativo de
   ::-webkit-search-cancel-button: no se hereda del tema, no
   respeta el acento y aparece con su propio color y su propia
   transicion. Se saca y la cruz la pone el CRM cuando hace
   falta. El subrayado rojo era el corrector del navegador
   marcando nombres propios como errores.
   ========================================================== */

html body input[type="search"]::-webkit-search-cancel-button,
html body input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* El desborde del anillo verde.

   sistema.css le pone `box-shadow: 0 0 0 3px accent-glow` y borde
   de acento a TODO input con foco, e index.css repite lo mismo.
   En un buscador eso se ve mal: el input vive dentro de una caja
   que ya tiene su propio borde, asi que aparecian dos anillos, y
   el de adentro se salia por arriba y por abajo porque el input
   mide casi lo mismo que su contenedor.

   La regla: el que muestra el foco es el CONTENEDOR. El input de
   adentro no lleva ni borde, ni anillo, ni fondo propio. */
html body .buscador input:focus,
html body .buscador input:focus-visible,
html body .buscador input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}

html body .buscador:focus-within {
    border-color: rgba(var(--acento-rgb), 0.55) !important;
    box-shadow: 0 0 0 2px rgba(var(--acento-rgb), 0.12) !important;
}

html body .buscador:focus-within i {
    color: var(--primary) !important;
}

/* Lo mismo para los buscadores armados a mano dentro de modales,
   que no usan la clase .buscador pero tienen la misma forma. */
html body .modal-card input[type="search"]:focus,
html body .modal-card input[type="search"]:focus-visible {
    box-shadow: none !important;
}

/* El anillo general se achica de 3px a 2px y deja de pintar el
   borde: a 3px, en cualquier control pegado a otro, se monta
   encima del vecino. */
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body .campo:focus-visible {
    box-shadow: 0 0 0 2px rgba(var(--acento-rgb), 0.28) !important;
}

/* ==========================================================
   2d. CHAT: BORRAR Y MINIMIZAR
   ========================================================== */

.chat-acciones {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* La papelera del historial no compite con cerrar: se apaga
   hasta que la buscas, y recien ahi se pone roja. */
#chat-vaciar { color: var(--text-dim, var(--text-muted)); }
#chat-vaciar:hover { color: var(--danger, #ef4444); }

/* --- Borrar un mensaje propio -------------------------------
   El boton vive al costado de la burbuja y aparece al pasar por
   encima: estando siempre visible, una conversacion de veinte
   mensajes son veinte papeleras compitiendo con el texto. */
html body .chat-msj {
    position: relative;
}

html body .chat-borrar {
    position: absolute;
    /* Al borde izquierdo de la fila: los mensajes propios se
       pegan a la derecha, asi que ese costado esta libre y el
       boton no se le encima a nada. */
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--surf-2, rgba(255, 255, 255, 0.08));
    color: var(--text-dim, var(--text-muted));
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
}

html body .chat-msj:hover .chat-borrar,
html body .chat-borrar:focus-visible {
    opacity: 1;
}

html body .chat-borrar:hover { color: var(--danger, #ef4444); }

/* En pantalla tactil no hay hover: la papelera queda a la vista. */
@media (hover: none) {
    html body .chat-borrar { opacity: 0.65; }
}

/* La lapida del mensaje eliminado: se nota que hubo algo ahi,
   sin gritar. */
html body .chat-msj.borrado .chat-burbuja {
    background: transparent !important;
    border: 1px dashed var(--border-color) !important;
    color: var(--text-dim, var(--text-muted)) !important;
}

html body .chat-msj.borrado .chat-burbuja p {
    font-style: italic;
    opacity: 0.75;
}

/* --- La pastilla del chat minimizado ------------------------
   Abajo a la izquierda, fuera del camino, pero con el contador
   a la vista: minimizar no es dejar de recibir. */
/* La pastilla queda del mismo lado que la ventana: minimizar es
   guardar la ventana, no mudarla a la otra punta de la pantalla.
   Al restaurar, la caja crece desde donde estaba la pastilla. */
.chat-pildora {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 62;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px 0 13px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 999px;
    background: var(--surf-1, #16181c);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    transition: transform 140ms ease, border-color 140ms ease;
}

.chat-pildora[hidden] { display: none; }

.chat-pildora:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.chat-pildora > i { color: var(--primary); }

.chat-pildora-badge {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--danger, #ef4444);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.chat-pildora-badge[hidden] { display: none; }

@media (max-width: 620px) {
    .chat-pildora span:not(.chat-pildora-badge) { display: none; }
    .chat-pildora { padding: 0 13px; }
}

/* ==========================================================
   5. MOVIL: QUE NADA SE DESBORDE

   La barra de abajo era una tira con scroll horizontal: seis
   pestañas de ancho libre no entran en 390px, asi que al tocar
   "Mi Perfil" el navegador arrastraba la barra para traerlo a
   la vista y "Dashboard" se iba de pantalla. Una barra de
   navegacion que se mueve sola no es navegacion.

   Se cambia por una reja de seis columnas iguales: cada
   pestaña ocupa un sexto y no se mueve nunca. El texto se
   achica y el icono va arriba, que es la forma que ya tiene
   cualquier app en el telefono.
   ========================================================== */

@media (max-width: 768px) {

    html body .main-tabs {
        display: grid !important;
        /* Tantas columnas como pestañas visibles, no seis fijas.
           Con `repeat(6, 1fr)` el usuario comun —que no tiene la
           pestaña de Usuarios— dejaba la sexta columna vacia y la
           barra quedaba corrida, con un hueco a la derecha. */
        grid-auto-flow: column !important;
        grid-auto-columns: 1fr !important;
        grid-template-columns: none !important;
        justify-content: stretch !important;
        gap: 0 !important;
        overflow: hidden !important;
        /* Sin scroll: no hay nada que arrastrar. */
        overflow-x: hidden !important;
        scroll-snap-type: none !important;

        /* La barra crece con su contenido en vez de medir 56px fijos.

           sistema.css le pone `height: 56px` y ademas un
           `padding-bottom` del area segura. Con `box-sizing:
           border-box` ese padding se descuenta de los 56px: los
           botones se corrian hacia arriba y quedaba una franja
           oscura debajo, dentro de la propia barra. Parecia que la
           barra no llegaba al fondo de la pantalla, cuando en
           realidad llegaba y estaba vacia por dentro. */
        height: auto !important;
        min-height: 56px !important;

        /* El area segura sola, sin sumarle nada: es la distancia
           minima para no quedar debajo de la franja de gestos de
           Android. Cualquier pixel extra es hueco. */
        padding: 4px 2px env(safe-area-inset-bottom) !important;
    }

    html body .main-tabs .tab-btn {
        /* El contador se posiciona contra esta caja. */
        position: relative !important;
        overflow: visible !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        /* sistema.css les pone `height: 100%`, que contra una barra
           de alto automatico no significa nada util. */
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        min-height: 46px !important;
        padding: 5px 2px !important;
        font-size: 0.6rem !important;
        line-height: 1.1 !important;
        border-radius: 10px !important;
        scroll-snap-align: none !important;
    }

    html body .main-tabs .tab-btn i {
        font-size: 1rem !important;
    }

    /* El nombre no puede empujar la columna: si no entra, se
       corta con puntos suspensivos y la reja no se deforma. */
    html body .main-tabs .tab-btn > span:not(.tab-badge) {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* El contador se metia por encima del borde de la barra.
       Ahora vive pegado al icono, dentro de la celda. */
    html body .main-tabs .tab-badge {
        position: absolute !important;
        top: 2px !important;
        right: 50% !important;
        margin-right: -20px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 4px !important;
        font-size: 0.58rem !important;
        line-height: 15px !important;
    }

    /* --- El chat en el telefono ---------------------------- */

    /* La ventana se apoya sobre la barra de navegacion, no
       encima: tapaba las pestañas justo cuando uno quiere
       cambiar de pantalla. */
    html body .chat-panel {
        bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        height: calc(100vh - 56px - env(safe-area-inset-bottom) - 70px) !important;
        max-height: none !important;
        border-radius: 16px 16px 0 0 !important;
    }

    html body .chat-pildora {
        bottom: calc(64px + env(safe-area-inset-bottom)) !important;
        right: 12px !important;
        z-index: 41 !important;
    }

    /* --- La barra de arriba --------------------------------

       Se estaba encimando: el nombre del usuario, el cartel de
       Realtime y los iconos ocupaban mas ancho del que hay, y
       como la barra no envuelve ni recorta, cada cosa se
       dibujaba arriba de la anterior.

       Criterio para decidir que se va: en 390px de ancho solo
       entra lo accionable. El logo dice donde estas, los
       iconos son los que se tocan. "Realtime", la pastilla CRM
       y tu propio nombre son informacion que ya sabes. */

    html body .top-navbar {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        overflow: hidden !important;
    }

    html body .top-navbar .brand-container {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* El logotipo se achica pero no se recorta, y cede lugar
       antes que los botones. */
    html body .top-navbar .logo-wrapper {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* El tope de ancho es lo que evita el encimado, no el alto:
       el logotipo es una palabra larga y con 18px de alto medía
       164px de ancho, que es mas de lo que sobra despues de los
       cuatro iconos y la chapa del rol. */
    html body .top-navbar .logo-wrapper img {
        height: 16px !important;
        width: auto !important;
        max-width: 104px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    html body .top-navbar .crm-badge-pill,
    html body .top-navbar .status-indicator,
    html body .top-navbar .user-name,
    html body .rotativo {
        display: none !important;
    }

    /* La chapa del rol se queda: es lo unico de la barra que no
       podes deducir mirando la pantalla. */
    html body .top-navbar .user-meta {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    html body .top-navbar .badge {
        font-size: 0.58rem !important;
        padding: 2px 6px !important;
        white-space: nowrap !important;
    }

    /* Los iconos: medida pareja, sin encimarse, y el ultimo
       pegado al borde. */
    html body .top-navbar .btn-icon {
        flex: 0 0 auto !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }

    html body .top-navbar .btn-icon i { font-size: 13px !important; }

    /* Los contadores de los iconos se salian de la barra. */
    html body .top-navbar .btn-icon .chat-pendientes,
    html body .top-navbar .btn-icon .contador,
    html body .top-navbar .btn-icon > span:not(.dot) {
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        min-width: 14px !important;
        height: 14px !important;
        padding: 0 3px !important;
        font-size: 0.55rem !important;
        line-height: 14px !important;
        border-radius: 999px !important;
    }

    /* --- Nada mas se desborda ------------------------------ */

    /* El ancho de la ventana manda: cualquier reja de dos o mas
       columnas pasa a una sola en vez de empujar la pagina. */
    html body .clientes-split,
    html body .form-row-grid,
    html body .bitacora-grid,
    html body #lead-modal .form-row,
    html body .contactar-alta {
        grid-template-columns: 1fr !important;
    }

    html body .contactar-alta .btn-fila { width: 100% !important; }

    /* Los numeros largos de las tarjetas de resumen partian la
       reja: se dejan encoger. */
    html body .metric-card,
    html body .resumen-item,
    html body .cliente-ficha,
    html body .glass-panel {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* La cabecera de cada seccion: titulo arriba, acciones
       abajo a todo el ancho. En una fila, el boton "Cargar
       consulta" y el buscador se aplastaban hasta ser
       ilegibles. */
    html body .section-head {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        min-height: 0 !important;
    }

    /* El `flex: 1 1 320px` del texto esta pensado para la fila de
       escritorio, donde 320px es un ANCHO minimo. Al girar el
       contenedor a columna, ese mismo numero pasa a ser un ALTO:
       el titulo reclamaba 320px de alto y dejaba media pantalla en
       blanco antes de los botones. En vertical el bloque tiene que
       medir lo que mide su texto. */
    html body .section-head__texto {
        flex: 0 0 auto !important;
        min-height: 0 !important;
    }

    html body .section-head__texto h2 { margin-bottom: 4px !important; }
    html body .section-head__texto p { margin: 0 !important; }

    html body .section-head__acciones {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    html body .section-head__acciones .btn,
    html body .section-head__acciones .buscador,
    html body .section-head__acciones select {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Los filtros de proyecto si van en una fila: son tres
       palabras cortas y funcionan como un solo control. */
    html body .section-head__acciones .pr-filtros {
        flex: 1 1 100% !important;
        justify-content: center !important;
    }

    html body .pr-filtro { flex: 1 1 0 !important; }

    /* La barra de filtros de consultas, uno abajo del otro. */
    html body .barra-filtros {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* El pie de la ficha de proyecto: los cuatro botones
       entraban a la fuerza y quedaban de 20px de ancho. */
    html body .pr-ficha-pie,
    html body .modal-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html body .pr-ficha-pie .btn,
    html body .modal-actions .btn {
        flex: 1 1 auto !important;
    }

    html body .pr-ficha-pie #pr-reunion {
        margin-left: 0 !important;
    }

    /* Las fichas de consulta y los modales usan el ancho real
       del telefono, con aire a los costados. */
    html body .modal-card,
    html body #lead-modal .modal-card,
    html body .pr-ficha {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 80px) !important;
    }

    /* Las tablas anchas scrollean solas en vez de estirar la
       pagina entera. */
    html body .table-wrapper,
    html body .tabla-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* --- Aire de mas ---------------------------------------

       En una pantalla de 390x844 el espacio vertical es el
       recurso escaso: cada bloque que respira de mas empuja
       al siguiente fuera de la vista y obliga a scrollear
       para ver cuatro numeros. */

    /* Los paneles traen 20px de padding pensados para monitor. */
    html body .glass-panel,
    html body .chart-card {
        padding: 14px !important;
    }

    /* Las cifras de resumen, de a dos por fila. Apiladas en una
       sola columna median 533px: media pantalla para cuatro
       numeros de una cifra. */
    html body .clientes-resumen,
    html body .consultas-resumen,
    html body .metrics-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    html body .clientes-col .clientes-resumen .resumen-item {
        padding: 8px !important;
    }

    /* Con dos columnas, la linea divisoria vertical de escritorio
       queda cortando en el lugar equivocado. */
    html body .clientes-col .clientes-resumen .resumen-item + .resumen-item {
        border-left: none !important;
    }

    html body .metric-card { padding: 10px 12px !important; }
    html body .metric-value { font-size: 1.3rem !important; }
    html body .metric-data h3 { font-size: 0.7rem !important; }
    html body .metric-subtext { font-size: 0.63rem !important; }

    /* Los estados vacios reservaban 280px de alto minimo mas 40px
       de padding arriba y abajo. En el telefono, un cartel que
       dice "todavia no hay nada" no necesita media pantalla. */
    html body .tab-content > .estado-vacio,
    html body .tab-content > div > .estado-vacio,
    html body .estado-vacio,
    html body .empty-state {
        min-height: 0 !important;
        padding: 24px 14px !important;
    }

    html body .tabla-vacia {
        padding: 24px 14px !important;
    }

    html body .estado-vacio i,
    html body .empty-state i { font-size: 1.5rem !important; }

    /* Separacion entre bloques de una vista: 24px entre cada uno
       suma una pantalla entera a lo largo de la pagina. */
    html body .tab-content > * + * {
        margin-top: 12px !important;
    }

    html body .clientes-split { gap: 12px !important; }

    /* Ultimo cinturon: nada puede ser mas ancho que la pantalla
       ni provocar scroll lateral en el documento. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    html body img,
    html body table,
    html body pre {
        max-width: 100% !important;
    }
}

/* ==========================================================
   6. EL CARTEL DE "EN QUE ESTA TRABAJANDO EL EQUIPO"
   ========================================================== */

.rotativo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 320px;
    height: 28px;
    margin-right: 8px;
    padding: 0 12px;
    border: 1px solid var(--borde-luz, var(--border-color));
    border-radius: 999px;
    background: var(--surf-2, rgba(255, 255, 255, 0.05));
    font-size: 11.5px;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
}

.rotativo[hidden] { display: none; }

.rotativo > i {
    color: var(--primary);
    font-size: 10px;
    flex: 0 0 auto;
}

.rotativo-quien {
    color: var(--primary);
    font-weight: 700;
    flex: 0 0 auto;
}

.rotativo-texto {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    /* El ancho lo pone el texto que se va escribiendo, por eso no
       hay `width` fijo: la caja crece con las letras. */
}

/* El cursor solo existe mientras se teclea. Un cursor parpadeando
   sobre una frase quieta durante ocho segundos es ruido. */
.rotativo-texto.tecleando::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    margin-left: 2px;
    vertical-align: -1px;
    background: var(--primary);
    animation: rotativo-cursor 700ms steps(1) infinite;
}

@keyframes rotativo-cursor {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* En pantallas chicas la barra no tiene lugar: el cartel se va
   antes que los botones, que son los que hacen falta. */
@media (max-width: 900px) {
    .rotativo { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rotativo-texto.tecleando::after { animation: none; }
}

/* ==========================================================
   7. SPOTIFY EN MI PERFIL
   ========================================================== */

.spotify-bloque {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-color);
}

.spotify-bloque[hidden] { display: none; }

.spotify-ayuda {
    margin: 0 0 0.7rem;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.spotify-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.spotify-estado {
    flex: 1 1 160px;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spotify-estado i { color: #1db954; margin-right: 5px; }

/* ==========================================================
   8. PANTALLA DE CARGA

   Tenia tres colores compitiendo: el halo turquesa alrededor
   de la tarjeta, el verde del acento y un degradado a naranja
   en la barra (`linear-gradient(90deg, var(--primary), #f59e0b)`
   en index.css). Tres colores para decir "espera un segundo".

   Queda uno solo —el acento de la marca— y el movimiento lo da
   un pulso: la tarjeta late y el halo late con ella. Nada de
   barras de progreso: la barra prometia un avance medible que
   no existe, porque no sabemos cuanto falta.
   ========================================================== */

html body .splash-logo-badge {
    background: var(--surf-1, var(--bg-surface)) !important;
    border: 1px solid rgba(var(--acento-rgb), 0.22) !important;
    /* Un solo halo, del color de la marca, que respira con la
       tarjeta en vez de quedarse fijo. */
    box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0.35) !important;
    animation: sc-latido 1.8s ease-in-out infinite !important;
}

/* El anillo se expande y se desvanece: se lee como "esta
   trabajando" sin prometer cuanto falta. */
@keyframes sc-latido {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0.30);
    }
    70% {
        transform: scale(1.03);
        box-shadow: 0 0 0 26px rgba(var(--acento-rgb), 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0);
    }
}

/* La barra de progreso se va. En su lugar, tres puntos que
   laten en secuencia: dicen lo mismo sin mentir sobre el
   avance, y ocupan una fraccion del espacio. */
/* 35px = los tres puntos de 7px con 7 de aire entre ellos. El
   ancho va fijo y no `auto` porque los puntos 2 y 3 son
   pseudo-elementos posicionados: no ocupan lugar en el flujo,
   asi que con `auto` la caja mediria 7px y el grupo quedaria
   descentrado. */
html body .splash-loader-bar {
    width: 35px !important;
    height: 7px !important;
    background: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

html body .splash-loader-progress {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--primary) !important;
    animation: sc-punto 1.2s ease-in-out infinite !important;
}

/* Los otros dos puntos son pseudo-elementos: no hace falta
   tocar el HTML para tener tres. */
html body .splash-loader-progress::before,
html body .splash-loader-progress::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: sc-punto 1.2s ease-in-out infinite;
}

html body .splash-loader-progress {
    position: relative !important;
}

html body .splash-loader-progress::before {
    left: 14px;
    animation-delay: 0.15s;
}

html body .splash-loader-progress::after {
    left: 28px;
    animation-delay: 0.3s;
}

@keyframes sc-punto {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-3px); }
}

html body .splash-subtext {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-dim, var(--text-muted)) !important;
}

@media (prefers-reduced-motion: reduce) {
    html body .splash-logo-badge,
    html body .splash-loader-progress,
    html body .splash-loader-progress::before,
    html body .splash-loader-progress::after {
        animation: none !important;
    }
}

/* ==========================================================
   3. NADA DE DESENFOQUE EN NINGUN LADO

   Se venia apagando el blur archivo por archivo y siempre
   quedaba alguno prendido en otra capa. Esta regla lo corta
   de raiz para toda la aplicacion.

   Por que pesa tanto:

   - `backdrop-filter` obliga al navegador a LEER lo que hay
     detras del elemento y desenfocarlo de nuevo en cada
     cuadro, porque no puede saber si cambio.
   - `filter: blur()` sobre un contenedor grande obliga a
     rasterizar todo su arbol en una textura aparte; cualquier
     cambio adentro la invalida entera. Es lo que hacia caer
     los cuadros al cambiar de pestana: el contenido nuevo
     obligaba a rehacer el desenfoque completo.

   La separacion visual la dan el color, el borde y la sombra,
   que se resuelven en el compositor y no cuestan por cuadro.
   ========================================================== */

html body *,
html body *::before,
html body *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* El desenfoque del fondo al abrir un modal se cambia por un
   oscurecido: misma intencion (mandar el fondo atras), sin
   rasterizar nada. */
html.hay-modal #crm-workspace,
html.hay-modal #fondo-imagen,
html.hay-modal #fondo-codigo,
html.hay-modal #ambient-background-glow,
html:not(.hay-modal) #crm-workspace,
html:not(.hay-modal) #fondo-imagen,
html:not(.hay-modal) #fondo-codigo,
html:not(.hay-modal) #ambient-background-glow {
    filter: none !important;
    transform: none !important;
}

/* El workspace no se toca ni con opacidad: bajarla tambien
   obliga a rasterizar el arbol entero en una capa. El que manda
   el fondo atras es el velo oscuro del propio modal. */

/* El orbe de ambiente animaba `filter: blur()` entre 25px y
   50px sobre una mancha de 950x700, en bucle infinito: el
   navegador rehacia ese desenfoque en cada cuadro durante toda
   la sesion. El degradado radial ya es difuso por si mismo, no
   necesita blur; queda solo el latido de escala y opacidad,
   que corre en el compositor. */
html body #ambient-background-glow::before {
    filter: none !important;
    animation-name: ap-latido !important;
}

@keyframes ap-latido {
    0%   { transform: translate(-50%, -50%) scale(0.85); opacity: 0.45; }
    50%  { transform: translate(-50%, -50%) scale(1.2);  opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(0.9);  opacity: 0.5; }
}

/* ==========================================================
   4. CAMBIO DE PESTANA SIN CASCADA

   Al activar una pestana corrian tres animaciones encimadas:
   la de la seccion entera (ui.css), una escalonada por cada
   hijo directo (micro.css y ui.css otra vez) y una por cada
   pastilla de etapa. En una pestana con tablas eso son decenas
   de animaciones de opacidad al mismo tiempo, y cada una
   necesita su propia capa: por eso el cambio de pestana se
   sentia pesado justo al entrar.

   Queda UNA sola, corta, sobre la seccion. La sensacion de
   "se armo" se pierde poco; lo que se gana es que entre de
   una en cualquier maquina.
   ========================================================== */

html body .tab-content.active > *,
html body .tab-content.active > .section-head,
html body .tab-content.active > .consultas-resumen,
html body .tab-content.active > .barra-filtros,
html body .tab-content.active > .barra-etapas,
html body .tab-content.active > #consultas-grid,
html body .etapa-pill {
    animation: none !important;
}

html body .tab-content.active {
    animation: ap-entrada 160ms ease-out both !important;
}

@keyframes ap-entrada {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html body .tab-content.active { animation: none !important; }
}

html body #ambient-background-glow::after {
    /* Una drop-shadow sobre un PNG de 650px se recalcula cada vez
       que la capa se repinta y no aporta nada sobre un logo en
       marca de agua al 12% de opacidad. */
    filter: none !important;
}

/* ==========================================================
   .hidden TIENE QUE GANARLE A LAS PESTAÑAS

   `.hidden { display:none !important }` (index.css) pierde por
   especificidad contra `.main-tabs .tab-btn { display:inline-flex
   !important }` (ui.css:499) y contra `html body .main-tabs
   .tab-btn { display:flex !important }` (ajustes.css:1163).

   El resultado era que la pestaña Usuarios seguia visible para
   quien no es admin, aunque auth.js le pusiera la clase. Esconder
   el boton no era la seguridad —la Edge Function y RLS ya
   rechazan a los que no son admin— pero mostraba una pestaña que
   al abrirse no tiene nada que mostrar.

   Va en picker.css porque es la ultima hoja que carga index.html:
   a igual especificidad gana la que se declara despues.
   ========================================================== */

html body .main-tabs .tab-btn.hidden,
html body .main-tabs .tab-btn.admin-only.hidden {
    display: none !important;
}

/* ==========================================================
   FILTROS Y TARJETA DE CONSULTA: LEGIBLES Y COMPACTOS

   La barra de filtros son un buscador y cinco listas. En el
   telefono cada una ocupaba el ancho completo, una debajo de
   otra: seis controles de 48px apilados que empujaban la lista
   de consultas fuera de la pantalla. Antes de ver una sola
   consulta habia que scrollear toda la botonera.

   Y las etiquetas se cortaban ("Todas las categor…") porque el
   ancho lo repartia el contenido y no una medida fija.

   Va al final de picker.css porque seis hojas distintas opinan
   sobre .barra-filtros y a igual especificidad gana la ultima.
   ========================================================== */

/* --- Escritorio: una sola fila que envuelve si no entra ----- */
@media (min-width: 769px) {
    html body .barra-filtros {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* El buscador manda y se estira; las listas van todas del
       mismo ancho para que la barra se lea como una sola cosa. */
    html body .barra-filtros .buscador {
        flex: 1 1 260px !important;
        min-width: 220px !important;
    }

    html body .barra-filtros .select-field {
        flex: 0 1 168px !important;
        min-width: 148px !important;
        max-width: 200px !important;
    }
}

/* --- Telefono: dos por fila, el buscador entero ------------- */
@media (max-width: 768px) {
    html body .barra-filtros {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    html body .barra-filtros .buscador {
        grid-column: 1 / -1 !important;
    }

    html body .barra-filtros .select-field {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
}

/* Una lista que no puede recortar su texto ensancha la fila y
   descoloca al resto. Se recorta con puntos suspensivos, que es
   lo que el navegador no hace solo en un <select>. */
html body .barra-filtros .select-field {
    text-overflow: ellipsis !important;
    padding-right: 26px !important;
}


/* --- La tarjeta de consulta en el telefono ------------------
   Sacada la columna Presupuesto (ver COLUMNAS en js/leads.js),
   la fila 'monto resp fecha' quedaba con un guion suelto a la
   izquierda. Ahora responsable y fecha comparten esa fila.
   ----------------------------------------------------------- */
@media (max-width: 768px) {
    html body .grid-fila {
        grid-template-areas:
            'cliente cliente etapa'
            'canal   tipo    prio'
            'resp    fecha   fecha'
            'acc     acc     acc' !important;
        gap: 6px !important;
    }

    html body .celda-responsable {
        text-align: left !important;
    }
}

/* La cabecera y las filas pasan de nueve columnas a ocho. */
@media (min-width: 769px) {
    html body .grid-head,
    html body .grid-fila {
        grid-template-columns:
            var(--col-cliente) var(--col-chip) var(--col-chip) var(--col-chip)
            var(--col-etapa) var(--col-resp) var(--col-fecha) var(--col-acc) !important;
    }
}

/* ==========================================================
   TELEFONO: TERMOMETRO Y FILTROS MAS CHICOS

   El termometro (Consultas activas / Prioridad media / Carga
   manual) y la barra de filtros ocupaban juntos casi una
   pantalla completa antes de la primera consulta. En una
   pantalla de telefono, tres tarjetas de 88px de alto con un
   numero de 24px son un encabezado, no un resumen.

   El numero sigue siendo lo mas grande de la tarjeta —es el
   dato— pero deja de competir con el titulo de la seccion.

   Las medidas van en px y no en tokens de espaciado porque
   .resumen-item las trae con !important desde ajustes.css y hay
   que igualar el peso para poder bajarlas.
   ========================================================== */

@media (max-width: 768px) {

    /* --- Termometro --------------------------------------- */
    html body .consultas-resumen,
    html body .clientes-resumen {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    html body .resumen-item {
        min-height: 0 !important;
        padding: 8px 10px !important;
        gap: 1px !important;
        border-radius: 10px !important;
    }

    html body .resumen-item strong,
    html body .resumen-item .valor,
    html body .resumen-item b {
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    html body .resumen-item span,
    html body .resumen-item .etiqueta {
        margin-top: 1px !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    html body .resumen-item small,
    html body .resumen-item .apoyo {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    /* El realce al pasar el dedo no aporta en tactil y en una
       tarjeta chica el desplazamiento se ve como un salto. */
    html body .resumen-item:hover {
        transform: none !important;
    }

    /* --- Barra de filtros --------------------------------- */
    html body .filtros-toggle {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        border-radius: 10px !important;
    }

    html body .barra-filtros {
        gap: 6px !important;
    }

    html body .barra-filtros .buscador,
    html body .barra-filtros .select-field,
    html body .barra-filtros > * {
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
    }

    html body .barra-filtros .buscador input,
    html body .barra-filtros .select-field {
        font-size: 0.78rem !important;
    }

    html body .barra-filtros .select-field {
        padding-left: 8px !important;
        padding-right: 22px !important;
    }

    html body .barra-filtros .buscador i {
        font-size: 0.78rem !important;
    }
}

/* ==========================================================
   PANEL DE CONFIGURACION: CABECERA, CIERRE Y PALETA CHICA

   Tres cosas:

   1. No tenia cabecera ni boton de cerrar. Se cerraba con
      Escape o con un clic afuera, dos cosas que no se ven: si
      alguien no las conoce, el panel parece trabado.

   2. Las ocho muestras de color se repartian el ancho completo
      del panel con aspect-ratio 1, o sea que su alto crecia con
      el ancho: quedaban ocho circulos enormes que empujaban
      todo lo demas fuera de la vista. El acento se elige una
      vez y no se toca mas; no merece ser lo mas grande.

   3. El titulo de cada seccion y los espacios, mas ajustados,
      para que el panel entre de una en pantallas de portatil.
   ========================================================== */

html body .ap-cab {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html body .ap-cab h4 {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

html body .ap-cab h4 i { color: var(--primary) !important; }

/* --- Paleta al tamaño de un boton, no de una tarjeta -------- */
html body .ap-colores {
    grid-template-columns: repeat(8, 1fr) !important;
    gap: 5px !important;
    margin-bottom: 8px !important;
}

html body .ap-color {
    aspect-ratio: auto !important;
    height: 22px !important;
    width: 22px !important;
    justify-self: center !important;
    border-width: 2px !important;
}

html body .ap-seccion {
    margin-bottom: 12px !important;
}

html body .ap-seccion h4 {
    font-size: 12px !important;
    margin-bottom: 7px !important;
}

html body .ap-personalizado {
    margin-bottom: 4px !important;
}

/* --- Tonos --------------------------------------------------- */
html body .ap-tono {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

html body .ap-tono > span:first-child {
    display: block !important;
    margin-bottom: 4px !important;
}

html body .ap-tono-fila {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html body .ap-tono-fila .select-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 11.5px !important;
}

html body .ap-tono-fila .ap-probar {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(var(--acento-rgb), 0.10) !important;
    color: var(--primary) !important;
    border: 1px solid rgba(var(--acento-rgb), 0.28) !important;
    border-radius: 8px !important;
}

/* --- Listo --------------------------------------------------- */
html body .ap-listo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin-top: 8px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    background: var(--primary) !important;
    color: var(--bg-card) !important;
    border: 1px solid var(--primary) !important;
}

/* ==========================================================
   AVISO DE EVENTO NUEVO EN EL CALENDARIO DEL EQUIPO

   El cartel de proximidad ("empieza en 5 minutos") es una
   linea: titulo y hora. Este dice tres cosas —quien, que y
   cuando— asi que necesita alto y no puede recortar el texto
   con puntos suspensivos como hace .aviso-cartel strong.

   El nombre de quien lo cargo es el dato que cambia lo que uno
   hace con el aviso, asi que se resalta y entra con su propia
   animacion: un destello del color de acento que se apaga.
   ========================================================== */

html body .aviso-cartel.aviso-nuevo {
    align-items: flex-start !important;
    width: 340px !important;
    padding: 12px 13px !important;
}

html body .aviso-cartel.aviso-nuevo > i {
    margin-top: 2px !important;
}

/* El titulo de este cartel envuelve: son varias palabras y
   cortarlas en "Nacho agregó un evento al calen…" pierde justo
   la parte que importa. */
html body .aviso-cartel.aviso-nuevo strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

html body .aviso-cartel.aviso-nuevo .aviso-detalle,
html body .aviso-cartel.aviso-nuevo .aviso-nota {
    display: block !important;
    margin-top: 3px !important;
}

html body .aviso-cartel.aviso-nuevo .aviso-detalle {
    color: var(--text-main) !important;
    font-weight: 600 !important;
}

html body .aviso-cartel.aviso-nuevo .aviso-nota {
    color: var(--text-dim) !important;
    font-size: 11px !important;
    /* La descripcion puede ser larga: dos lineas y corta. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* --- El nombre --------------------------------------------- */
html body .aviso-quien {
    display: inline-block !important;
    padding: 1px 7px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: var(--primary) !important;
    background: rgba(var(--acento-rgb), 0.14) !important;
    border: 1px solid rgba(var(--acento-rgb), 0.35) !important;
    animation: aviso-quien-entra 1400ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes aviso-quien-entra {
    0% {
        transform: scale(0.82);
        background: rgba(var(--acento-rgb), 0.75);
        color: #10151a;
        box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0.55);
    }
    35% {
        transform: scale(1.06);
        background: rgba(var(--acento-rgb), 0.55);
        color: #10151a;
        box-shadow: 0 0 0 7px rgba(var(--acento-rgb), 0);
    }
    100% {
        transform: scale(1);
        background: rgba(var(--acento-rgb), 0.14);
        color: var(--primary);
        box-shadow: 0 0 0 0 rgba(var(--acento-rgb), 0);
    }
}

/* Quien pidio menos movimiento en el sistema operativo no quiere
   un nombre que rebota. Queda el resaltado, sin animacion. */
@media (prefers-reduced-motion: reduce) {
    html body .aviso-quien { animation: none !important; }
}

/* ==========================================================
   PULGAR ARRIBA EN EL CHAT

   Una pastilla chica debajo de la burbuja. No va dentro de la
   burbuja porque el texto de un mensaje puede ser largo y el
   contador quedaria perdido en medio del parrafo.

   Se ve siempre, tambien en cero: un boton que aparece solo con
   el mouse encima no existe en el telefono, que es donde mas se
   usa este chat. En cero queda tenue; con reacciones se enciende.
   ========================================================== */

html body .chat-pulgar {
    align-self: flex-start;
    margin-top: -2px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--surf-2, rgba(255, 255, 255, 0.07));
    color: var(--text-dim, var(--text-muted));
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 120ms ease, color 120ms ease,
                background 120ms ease, border-color 120ms ease;
}

/* Los mensajes propios se pegan a la derecha: su pulgar tambien. */
html body .chat-msj.mio .chat-pulgar {
    align-self: flex-end;
}

html body .chat-pulgar:hover,
html body .chat-pulgar:focus-visible {
    opacity: 1;
}

/* Con al menos una reaccion deja de ser un boton en espera y pasa
   a ser informacion: se muestra entero aunque nadie lo toque. */
html body .chat-pulgar.con-gente {
    opacity: 1;
    color: var(--text-main);
}

/* El propio, marcado con el color de acento. Es la unica forma de
   saber de un vistazo si ya reaccionaste o no. */
html body .chat-pulgar.puesto {
    opacity: 1;
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    color: var(--primary);
}

html body .chat-pulgar i {
    font-size: 11px;
}

/* El dedo necesita mas superficie que el puntero. */
@media (hover: none) {
    html body .chat-pulgar {
        height: 26px;
        padding: 0 10px;
        font-size: 12px;
        opacity: 0.6;
    }
}

/* ==========================================================
   LA PAPELERA DEL CHAT, AL COSTADO Y BAJO DEMANDA

   Estaba en `left: 0` con la fila en position relative: sobre un
   mensaje propio corto la burbuja tambien queda a la izquierda de
   ese borde, asi que el boton le caia encima y tapaba el texto.
   Y se mostraba con `:hover`, que en un telefono no existe: por
   eso terminaba siempre visible.

   Ahora sale FUERA de la caja del mensaje —al lado, en el hueco
   que deja el `max-width` del 82%— y solo cuando se toca el
   mensaje. js/chat.js pone la clase `seleccionado`.
   ========================================================== */

html body .chat-borrar {
    /* Mensaje propio: la burbuja se pega a la derecha, el boton va
       a su izquierda, fuera de la caja. */
    left: auto !important;
    right: calc(100% + 6px) !important;
    opacity: 0 !important;
    pointer-events: none;
}

/* Mensaje ajeno: espejado, el hueco libre esta del otro lado. */
html body .chat-msj:not(.mio) .chat-borrar {
    right: auto !important;
    left: calc(100% + 6px) !important;
}

html body .chat-msj.seleccionado .chat-borrar,
html body .chat-borrar:focus-visible {
    opacity: 1 !important;
    pointer-events: auto;
}

/* El mensaje elegido se marca, para que se entienda que la
   papelera pertenece a ese y no al de al lado. */
html body .chat-msj.seleccionado .chat-burbuja {
    outline: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
    outline-offset: 2px;
}

/* Con el mouse encima tambien aparece: en escritorio seguir
   teniendo que hacer clic para ver el boton seria un paso de mas. */
@media (hover: hover) {
    html body .chat-msj:hover .chat-borrar {
        opacity: 1 !important;
        pointer-events: auto;
    }
}

/* ==========================================================
   EL CARTEL DE "EN QUE ANDA EL EQUIPO" EN EL TELEFONO

   Estaba oculto por debajo de 900px. Es informacion del equipo,
   no un adorno, asi que tiene que verse tambien en el telefono.

   El primer intento fue mandarlo a un segundo renglon: entraba,
   pero la barra pasaba a medir el doble y eso rompe la cabecera.
   Una barra de navegacion es una linea; si crece, deja de ser un
   marco y se convierte en contenido.

   Asi que va en la MISMA linea, y el ancho se reparte por
   prioridad en vez de por orden de llegada:

     1. La chapa del rol   - fija, nunca se toca
     2. Los botones        - fijos, son las acciones
     3. El cartel          - elastico, se corta con puntos
     4. El logotipo        - el primero que cede

   El logotipo cede primero porque es lo unico redundante: la
   marca ya esta en el icono de la app y en la pantalla de carga.
   ========================================================== */

@media (max-width: 900px) {
    html body .top-navbar {
        /* Una sola linea, sin excepciones. */
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 52px !important;
        gap: 6px !important;
        /* Nada se recorta contra el borde de la barra: cada pieza
           se encarga de su propio limite. */
        overflow: visible !important;
    }

    /* --- 4. El logotipo: el primero que cede ---------------- */
    html body .top-navbar .brand-container {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body .top-navbar .logo-wrapper img,
    html body .top-navbar .splash-logo-img,
    html body .top-navbar img[data-marca-logo] {
        max-width: 108px !important;
        min-width: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    /* --- 2. Los botones: fijos ------------------------------ */
    html body .top-navbar .btn-icon {
        flex: 0 0 auto !important;
    }

    /* --- 3. El cartel: elastico, cerrado, con puntos -------- */
    html body .top-navbar .rotativo,
    html body .rotativo {
        display: flex !important;
        order: 10 !important;
        /* Crece con lo que sobre y se achica hasta 84px antes que
           empujar a nadie. Menos de eso no se lee: ahi conviene
           que desaparezca, y de eso se ocupa el bloque de 560px. */
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 84px !important;
        max-width: none !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        gap: 5px !important;
        /* Se cierra sobre si mismo: el padding entra en la medida
           y lo que sobra se recorta ADENTRO, contra su borde. Sin
           esto el texto se iba de la caja y la pastilla quedaba
           abierta de un lado, sin la curva. */
        box-sizing: border-box !important;
        overflow: hidden !important;
        border: 1px solid var(--borde-luz, var(--border-color)) !important;
    }

    html body .rotativo[hidden] {
        display: none !important;
    }

    /* El icono y el nombre miden lo que miden. */
    html body .rotativo > i,
    html body .rotativo .rotativo-quien {
        flex: 0 0 auto !important;
    }

    /* El texto es lo unico elastico de adentro. */
    html body .rotativo .rotativo-texto {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* --- 1. La chapa del rol: intocable --------------------- */
    html body .top-navbar .user-meta,
    html body .top-navbar #user-role-badge {
        flex: 0 0 auto !important;
        order: 11 !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
    }
}

/* Pantallas muy angostas: el cartel se va.

   Por debajo de 560px, entre el logotipo, cuatro botones y la
   chapa del rol no quedan los 84px minimos para que la frase se
   entienda. Un cartel de tres letras y puntos suspensivos no
   informa nada y encima aprieta al resto. Lo que se anda
   trabajando se sigue viendo en la pestaña Mi Perfil. */
@media (max-width: 560px) {
    html body .top-navbar .rotativo,
    html body .rotativo {
        display: none !important;
    }
}

/* ==========================================================
   LA BARRA DE ESCRIBIR DEL CHAT

   1. El <textarea> traia el agarre de redimensionar del
      navegador —esa pastillita gris en la esquina—. Ademas de
      quedar burdo, dejaba estirar la caja a mano y romper el
      alto del panel. El campo ya crece solo con el texto
      (js/chat.js lo ajusta al escribir), asi que el agarre no
      hacia falta para nada.

   2. La zona se afina: era mas alta que el boton de enviar y se
      comia lugar de la conversacion, que es lo que importa.
   ========================================================== */

html body #chat-texto {
    resize: none !important;
    /* Sin el agarre de WebKit, que no respeta `resize`. */
    -webkit-appearance: none;
    appearance: none;
    padding: 7px 13px !important;
    min-height: 34px !important;
    max-height: 96px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    /* La barra propia dentro de un campo de tres renglones es
       ruido: se desplaza igual con el dedo o la rueda. */
    scrollbar-width: none;
}

html body #chat-texto::-webkit-scrollbar { display: none; }
html body #chat-texto::-webkit-resizer { display: none; }

html body .chat-envio {
    gap: 6px !important;
    padding: 6px 8px !important;
    align-items: flex-end !important;
}

html body .chat-envio .chat-enviar,
html body .chat-envio .chat-clip {
    height: 34px !important;
    width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 auto !important;
}

/* ==========================================================
   EL PANEL DEL CHAT CON EL TECLADO ABIERTO

   js/chat.js publica en `--teclado` cuantos pixeles tapa el
   teclado del telefono, medidos con `visualViewport`. Aca el
   panel se levanta esa misma cantidad y se acorta en la misma
   proporcion, asi la barra de escribir queda justo encima del
   teclado y la conversacion no pierde altura util de mas.

   La transicion es corta a proposito: acompaña el movimiento
   del teclado sin agregar una animacion que se note.
   ========================================================== */

:root {
    --teclado: 0px;
}

@media (max-width: 768px) {
    html body .chat-panel {
        bottom: var(--teclado, 0px) !important;
        /* `dvh` y no `vh`: en el telefono `vh` cuenta la barra de
           direcciones del navegador aunque no este a la vista. */
        height: calc(82dvh - var(--teclado, 0px) * 0.45) !important;
        max-height: calc(100dvh - var(--teclado, 0px) - 12px) !important;
        transition: bottom 140ms ease-out, height 140ms ease-out !important;
    }

    /* El fondo oscuro cubre todo igual: si se moviera con el panel
       se veria una franja clara abajo mientras sube el teclado. */
    html body .chat-fondo {
        bottom: 0 !important;
        height: 100dvh !important;
    }
}

/* Quien pidio menos movimiento no quiere que el panel se deslice
   detras del teclado: salta a la posicion final y listo. */
@media (prefers-reduced-motion: reduce) {
    html body .chat-panel { transition: none !important; }
}

/* ==========================================================
   PUBLICAR / ELIMINAR DEL ANUNCIO, EN LA MISMA LINEA

   No estaban desalineados por el contenedor: `.btn-primary`
   trae de index.css un `margin-top: 0.5rem` y un padding
   propio mas grande, y `.btn-danger` no. Resultado: el boton
   azul arrancaba medio centimetro mas abajo y media distinto
   que el rojo, en escritorio y en el telefono.

   Aca se igualan los dos y se les saca el margen. El alto lo
   fija la fila, no cada boton por su cuenta.
   ========================================================== */

html body #btn-save-announcement,
html body #btn-delete-announcement {
    margin: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

/* El contenedor es el que manda: una sola linea, sin envolver.
   Con `flex-wrap: wrap` en un telefono angosto "Eliminar" se
   caia a un renglon propio. */
html body #btn-save-announcement {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

html body #btn-delete-announcement {
    flex: 0 0 auto !important;
}

html body #btn-save-announcement:not(.hidden) ~ #btn-delete-announcement,
html body #btn-delete-announcement {
    align-self: stretch !important;
}