/* Hoy / Mis Asignaciones (/hoy y /mis-asignaciones).
   Vivía en un bloque <style> dentro del .razor, contra lo que manda CLAUDE.md: esos bloques
   no tienen scope —un selector suelto ahí restila los diálogos que la página abre— y el banco
   visual no puede reproducir el componente para compararlo.
   Colores por TOKEN, nunca hex: los prefijos --ic- y --lc- voltean con data-theme y un hex no.
   Esta pantalla se usa al aire libre, donde la legibilidad ya está al límite.

   OJO al redactar aquí: los prefijos van SIN comodín. Escritos con «*» y separados por una
   barra, el asterisco pegado a la barra cerraba este comentario antes de tiempo y el navegador se
   comía la PRIMERA REGLA de la hoja. Medido en el banco, no deducido. Lo vigila
   ComentariosCssCerradosTests. */

/* Lista: una columna en móvil, 2 columnas máx en desktop (cards altas:
       con 3 columnas el botón primario queda lejos del pulgar/ojo). */
    .ma-list { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
    /* OJO: esto decía «@@media». El «@@» es el escape de Razor para un «@» literal, y se vino
       copiado tal cual cuando la hoja salió del bloque <style> del .razor. En un .css servido
       como CSS no es una at-rule válida: el navegador la descartaba junto con su bloque, así que
       la lista nunca pasó a dos columnas en escritorio desde que se migró. */
    @media (min-width: 960px) {
        .ma-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    }

    /* Card de asignación */
    .ma-card {
        background: var(--ic-surface);
        border: 1px solid var(--ic-border, rgba(148,163,184,0.1));
        border-radius: 14px;
        padding: 14px;
    }
    .ma-card--en-progreso { border-color: rgba(var(--lc-accent-rgb),0.3); background: rgba(var(--lc-accent-rgb),0.03); }
    .ma-card--finalizado  { opacity: 0.65; }

    .ma-card__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }
    .ma-card__chips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
    /* Chip que además es botón («Cargado · corregir»): quitar lo que el UA impone a un button
       y dejar que lc-chip pinte. Un button no hereda fuente ni color. */
    .ma-chip-btn { appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; }
    .ma-chip-btn:disabled { opacity: .6; cursor: default; }
    .ma-card__renta-id { font-size: 0.75rem; color: var(--ic-muted); font-weight: 500; }

    /* Grupo izquierdo del header: círculo de orden + chips */
    .ma-card__lead { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }

    /* Círculo con el número de paso del día */
    .ma-orden-num {
        flex-shrink: 0;
        width: 26px; height: 26px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        /* Relleno de marca: el blanco encima es deliberado y no voltea con el tema. */
        background: var(--ic-brand-gradient);
        color: #fff; font-weight: 800; font-size: 0.82rem;
        box-shadow: 0 2px 8px var(--ic-nav-accent-glow);
    }
    .ma-orden-num--done {
        background: rgba(var(--lc-neutral-rgb), 0.22);
        color: var(--ic-muted);
        box-shadow: none;
    }

    /* Llamada a cargar el camión. (El bloque embebido del que hablaba este comentario ya no
       existe: la hoja entera salió de MisAsignaciones.razor.) */
    .ma-cargar {
        width: 100%;
        display: flex; align-items: center; gap: 12px;
        /* 56px: se toca con una mano mientras la otra carga sillas. El mínimo del panel es 48. */
        min-height: 56px;
        margin: 4px 0 12px;
        padding: 10px 14px;
        border: 1px solid var(--ic-border);
        border-radius: var(--ic-radius-md, 12px);
        background: var(--ic-surface);
        /* Un botón nativo no hereda color (el navegador le impone `buttontext`, negro): sin esta
           línea el texto saldría negro sobre el fondo oscuro. Ojo al escribirlo en un bloque de
           estilos dentro del .razor — el nombre de la etiqueta entre ángulos rompe el parser. */
        color: var(--ic-text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .ma-cargar:hover { background: var(--ic-interactive-hover); }
    .ma-cargar__ico {
        flex-shrink: 0;
        width: 36px; height: 36px; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--ic-primary-dim);
        color: var(--ic-primary);
    }
    .ma-cargar__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .ma-cargar__title { font-size: 0.9375rem; font-weight: 700; }
    .ma-cargar__sub {
        font-size: 0.75rem; color: var(--ic-muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ma-cargar__chev { flex-shrink: 0; opacity: .55; }

    /* Encabezado por día (checklist) + progreso */
    .ma-day-header {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        margin: 18px 2px 8px;
    }
    .ma-day-header:first-of-type { margin-top: 4px; }
    .ma-day-header__label { font-size: 0.95rem; font-weight: 800; color: var(--ic-text); }
    .ma-day-progress {
        font-size: 0.72rem; font-weight: 700; color: var(--ic-muted);
        background: var(--ic-primary-dim, rgba(var(--lc-accent-rgb),0.12));
        border: 1px solid var(--ic-nav-active-border, rgba(76,165,255,0.22));
        border-radius: 999px; padding: 3px 10px; white-space: nowrap;
    }

    .ma-card__client {
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--ic-text);
        margin-bottom: 8px;
        letter-spacing: -0.01em;
    }

    .ma-card__detail-rows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
    .ma-card__detail-row  { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; color: var(--ic-muted); line-height: 1.4; }

    .ma-card__actions { display: flex; flex-direction: column; gap: 8px; }
    .ma-card__secondary-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

    .ma-card__waiting, .ma-card__done {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
        font-weight: 500;
        padding: 8px 12px;
        border-radius: 10px;
    }
    .ma-card__waiting { background: rgba(var(--lc-warn-rgb), 0.1); color: var(--lc-warn); border: 1px solid rgba(var(--lc-warn-rgb), 0.2); }
    .ma-card__done    { background: rgba(var(--lc-ok-rgb), 0.1);  color: var(--lc-ok); border: 1px solid rgba(var(--lc-ok-rgb), 0.2); }

    /* Aviso de ubicación para el chofer. Ocupa su propia línea a propósito: iba a
       leerse en un teléfono, con prisa y a veces al sol. */
    .ma-ubic-aviso {
        gap: 5px;
        color: var(--lc-warn);
        font-weight: 600;
        font-size: .78rem;
    }

    .ma-ubic-aviso--grave { color: var(--lc-err); }

/* ── ¿Habrá alguien en la puerta? (prefijo pr-) ──────────────────────────────────────────────
   Chip en la tarjeta de la parada + el diálogo que lo registra. Lo usa la cuadrilla en la calle,
   así que todo lo pulsable llega a los 48px de --dr-touch-min y los colores salen de tokens:
   esta pantalla se lee al sol y con prisa. */

    /* El chip es un botón: desde la tarjeta se abre el diálogo para registrar o corregir.

       `color: inherit` NO sobra: `font: inherit` arrastra familia, tamaño y peso pero **no el
       color**, y el navegador le pone a todo <button> su propio `buttontext` — negro, también en
       tema oscuro. Mientras el chip traiga su tono (lc-chip--ok, --warn…) gana la clase; esto es la
       red para cuando el tono no pinta el texto. Es la misma trampa que ya documenta .ma-cargar
       treinta líneas más arriba.

       Y los 48px: es un control que la cuadrilla toca en la calle, no una etiqueta. El .lc-chip
       pelado mide ~28px. */
    .ma-card__chips .pr-chip-btn {
        appearance: none;
        -webkit-appearance: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
        min-height: var(--ic-touch-min, 48px);
    }
    .ma-card__chips .pr-chip-btn:disabled { opacity: .6; cursor: default; }

    /* Renglón de detalle cuando ya hay algo registrado: quién lo dijo y cuándo. */
    .pr-detalle-row { gap: 5px; font-size: .78rem; }
    .pr-detalle-row--alerta { color: var(--lc-err); font-weight: 600; }

    /* ── Diálogo ── */

    /* Los teléfonos van primero porque lo primero que hace quien abre esto es marcar. Los
       alternos están capturados en 9 de cada 10 rentas y no se veían en ninguna pantalla de campo. */
    .pr-tels { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

    .pr-tel {
        display: flex; align-items: center; gap: 10px;
        min-height: var(--dr-touch-min, 48px);
        padding: 8px 12px;
        border: 1px solid var(--ic-border);
        border-radius: 12px;
        background: var(--ic-surface-2);
        color: var(--ic-text);
        text-decoration: none;
    }
    .pr-tel:hover { border-color: var(--ic-primary); }
    .pr-tel__txt { display: flex; flex-direction: column; min-width: 0; }
    .pr-tel__nombre { font-weight: 600; font-size: .875rem; }
    .pr-tel__num { font-size: .8rem; color: var(--ic-muted); }

    /* Las tres respuestas, en columna: en un teléfono con una mano, tres botones anchos se
       aciertan; tres botones en fila de 33% no. */
    .pr-opciones { display: flex; flex-direction: column; gap: 8px; }

    .pr-opcion {
        appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
        /* justify-content explícito: un <button> NO se comporta como un <a> aunque los dos sean
           flex. El navegador le impone el contenido centrado, y `text-align: left` no lo corrige
           porque en un contenedor flex esa propiedad no decide nada. Medido en el banco: el icono
           arrancaba a 76px del borde en el botón y a 13px en el <a> de al lado. */
        display: flex; align-items: center; justify-content: flex-start; gap: 10px;
        width: 100%;
        min-height: var(--dr-touch-min, 48px);
        padding: 10px 14px;
        border: 1px solid var(--ic-border);
        border-radius: 12px;
        background: var(--ic-surface);
        color: var(--ic-text);
        font-weight: 600;
        text-align: left;
    }
    .pr-opcion:hover { border-color: var(--ic-primary); }

    /* La selección se marca con borde y relleno, no sólo con color de texto: al sol, un cambio
       de color de texto en un botón grande no se ve. */
    .pr-opcion--sel {
        border-color: var(--ic-primary);
        background: rgba(var(--lc-accent-rgb), 0.12);
        box-shadow: inset 0 0 0 1px var(--ic-primary);
    }

    .pr-detalle { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
    .pr-desde { display: flex; flex-direction: column; gap: 6px; }
    .pr-desde__nota { font-size: .78rem; color: var(--ic-muted); line-height: 1.35; }

    /* Copiar el mensaje con el enlace. Va ANTES de las tres respuestas porque para muchos negocios
       es el mejor camino: la plática real con el cliente ocurre en el WhatsApp de siempre, no en
       el número de la plataforma. */
    .pr-enlace {
        appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer;
        /* Mismo motivo que .pr-opcion: es un <button> y el navegador le centra el contenido. */
        display: flex; align-items: center; justify-content: flex-start; gap: 10px;
        width: 100%;
        min-height: var(--dr-touch-min, 48px);
        margin-bottom: 14px;
        padding: 10px 14px;
        border: 1px dashed var(--ic-border);
        border-radius: 12px;
        background: var(--ic-surface-2);
        color: var(--ic-text);
        text-align: left;
    }
    .pr-enlace:hover { border-color: var(--ic-primary); }
    .pr-enlace:disabled { opacity: .6; cursor: default; }
    .pr-enlace__txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
    .pr-enlace__t { font-weight: 600; font-size: .9rem; }
    .pr-enlace__s { font-size: .75rem; color: var(--ic-muted); line-height: 1.3; }

/* ── El día en /hoy (prefijo hoyn-) ───────────────────────────────────────────────────────────
   Lo que ve en /hoy quien gestiona: una sola lista cronológica del día, y el día siguiente con
   trabajo cuando hoy no hay nada (que es 2 de cada 3 días). Vive en esta hoja, y no en una nueva,
   porque la página que lo hospeda ya la carga y ya está registrada en los cinco sitios que exige
   una hoja nueva. Colores por token: esto se lee en la calle y en los dos temas.

   Aquí vivían además `.hoyn-res*` (el bloque de alarmas) y `.hoyn-crew*` (la agrupación por
   cuadrilla). Se fueron con ellos: las alarmas se disparaban cuando el negocio va normal, y
   agrupar por cuadrilla metía 3 de cada 4 filas en el grupo «sin cuadrilla». */

.hoyn { display: flex; flex-direction: column; }

.hoyn-sk { display: flex; flex-direction: column; gap: 10px; padding: 8px 2px; }

/* ── Día vacío: el estado MAYORITARIO ──────────────────────────────────────────────────────── */
.hoyn-siguiente {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 28px 16px;
    text-align: center;
}
.hoyn-siguiente__ico {
    width: 48px; height: 48px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--lc-neutral-rgb), 0.16);
    color: var(--ic-muted);
}
.hoyn-siguiente__titulo { font-size: 1rem; font-weight: 700; color: var(--ic-text); }
.hoyn-siguiente__sub { font-size: 0.8125rem; color: var(--ic-muted); max-width: 32ch; }

.hoyn-siguiente__cta {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: var(--ic-touch-min);
    margin-top: 4px;
    padding: 10px 18px;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface);
    /* Un button no hereda color: sin esto el texto sale en el negro que impone el navegador. */
    color: var(--ic-text);
    font: inherit;
    cursor: pointer;
}
.hoyn-siguiente__cta:hover { background: var(--ic-interactive-hover); }
.hoyn-siguiente__cta-lb {
    font-size: 0.68rem; font-weight: 700; color: var(--ic-muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.hoyn-siguiente__cta-dia { font-size: 0.9375rem; font-weight: 700; }
.hoyn-siguiente__cta-n { font-size: 0.78rem; color: var(--ic-muted); }

/* ── La lista del día ──────────────────────────────────────────────────────────────────────── */
.hoyn-lista {
    display: grid;
    /* Tope de DOS, como la .ma-list de al lado: el `max(…, 50%)` impide una tercera columna, el
       `320px` impide que se estrechen y el `min(100%, …)` impide que desborden por debajo de 320.
       Una media query no serviría: mide el VIEWPORT, no el hueco donde cae la lista. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(320px, calc(50% - 4px))), 1fr));
    gap: 8px;
    align-items: start;
}

/* El botón va DEBAJO, no al lado. Medido en el banco a 375px: con el botón en la misma línea
   al nombre del cliente le quedaban 104px —ilegible en la calle, que es donde se lee esto—;
   apilándolo sube a ~221px. De paso el CTA gana ancho, que es lo que se toca con prisa. */
.hoyn-parada {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 4px 4px 4px 0;
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-md, 12px);
    background: var(--ic-surface);
}
.hoyn-parada--hecha { opacity: .62; }

.hoyn-parada__main {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    min-height: var(--ic-touch-min);
    padding: 6px 4px 6px 10px;
    border: 0;
    background: transparent;
    color: var(--ic-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hoyn-parada__hora {
    flex-shrink: 0;
    /* 70 y no 62: «10:30 a.m.» partía en dos renglones y la columna de horas dejaba de leerse
       como columna. Los 8px salen del nombre del cliente, que se queda en ~181 a 375px. */
    width: 70px;
    white-space: nowrap;
    display: flex; flex-direction: column;
    font-size: 0.8125rem; font-weight: 700;
    color: var(--ic-text);
}
/* Sin hora pactada: se dice, pero no compite con las que sí la tienen. */
.hoyn-parada__hora--vaga { font-weight: 600; color: var(--ic-muted); }

.hoyn-parada__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hoyn-parada__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hoyn-parada__presencia { font-size: 1rem; color: var(--lc-err); }
.hoyn-parada__cliente {
    font-size: 0.9375rem; font-weight: 700; color: var(--ic-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hoyn-parada__dir {
    font-size: 0.78rem; color: var(--ic-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hoyn-parada__chev { flex-shrink: 0; opacity: .55; }
.hoyn-parada__cta { align-self: flex-end; flex-shrink: 0; margin: 0 6px 6px; }