/* ============================================================
   componentes.css — Piezas únicas del sistema editorial (oct-2026)

   Una sola forma de cada cosa (auditoría UX, Fase 5): los filtros de
   una lista son chips, no pestañas; las pestañas cambian de pantalla.
   Crema, carbón, terracota; esquinas de 4 px; sin pastillas; 44 px de
   toque mínimo.
   ============================================================ */

/* ── Chips de filtro ──────────────────────────────────────────────
   Máximo 4 y todos a la vista: en el celular bajan a otra línea en vez
   de esconderse con un scroll de lado que nadie descubre. */
.xt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.xt-chip {
    flex-shrink: 0;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--xt-line-strong, rgba(42, 54, 61, 0.32));
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--xt-carbon, #2A363D);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.xt-chip:hover {
    border-color: var(--xt-terracota, #D84315);
}

.xt-chip:focus-visible {
    outline: 2px solid var(--xt-terracota, #D84315);
    outline-offset: 2px;
}

.xt-chip.is-active,
.xt-chip[aria-pressed="true"] {
    background: var(--xt-carbon, #2A363D);
    border-color: var(--xt-carbon, #2A363D);
    color: #FFF8F0;
}

.xt-chip-num {
    margin-left: 6px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Buscador de una lista ─────────────────────────────────────── */
.xt-buscador {
    position: relative;
    flex: 1 1 260px;
    min-width: 0;
}

.xt-buscador svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--xt-muted, #5E5E5E);
    pointer-events: none;
}

.xt-buscador input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--xt-line-strong, rgba(42, 54, 61, 0.32));
    border-radius: 4px;
    background: #FFFFFF;
    color: var(--xt-carbon, #2A363D);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
}

.xt-buscador input:focus {
    outline: none;
    border-color: var(--xt-terracota, #D84315);
}

.xt-resultados-nota {
    margin: 0 0 10px;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-muted, #5E5E5E);
}

/* ── Otras acciones de un destino ──────────────────────────────────
   Lo que antes era una pestaña de otra cosa (Activo fijo, Recibir
   mercancía, Solicitudes...): una fila de enlaces bajo los filtros. */
.xt-otros {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 20px;
    margin: -4px 0 14px;
}

.xt-otros button {
    min-height: 44px;   /* toque del dedo */
    padding: 8px 0;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xt-terracota-texto);
    cursor: pointer;
}

.xt-otros button:hover {
    border-bottom-color: currentColor;
}

.xt-otros button:focus-visible {
    outline: 2px solid var(--xt-terracota, #D84315);
    outline-offset: 2px;
}

.xt-otros button[aria-current="true"] {
    color: var(--xt-carbon, #2A363D);
    border-bottom-color: var(--xt-terracota, #D84315);
}

/* ── Volver de una acción a la lista del destino ───────────────── */
.xt-volver {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--xt-line, rgba(42, 54, 61, 0.14));
}

.xt-volver.hidden {
    display: none;
}

.xt-volver button {
    min-height: 40px;
    padding: 6px 0;
    background: none;
    border: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--xt-carbon, #2A363D);
    cursor: pointer;
}

.xt-volver button:hover {
    color: var(--xt-terracota-texto);
}

.xt-volver span {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--xt-carbon, #2A363D);
}

/* Una cifra del encabezado que también filtra (Inventario › Por surtir). */
.inv-stat-boton {
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inv-stat-boton:hover {
    border-color: var(--xt-terracota, #D84315);
}

.inv-stat-boton:focus-visible {
    outline: 2px solid var(--xt-terracota, #D84315);
    outline-offset: 2px;
}

/* ── Menú corto de un botón (Excel: plantilla / subir) ─────────────
   <details class="xt-menu"><summary>…</summary><div class="xt-menu-lista">
   Junta acciones hermanas para que la fila no pase de 4 elementos. */
.xt-menu {
    position: relative;
    display: inline-block;
}

.xt-menu > summary {
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.xt-menu > summary::-webkit-details-marker {
    display: none;
}

.xt-menu > summary::after {
    content: " ▾";
}

/* "¿Por qué no coincide?" (notaPorQueNoCoincide, app.js): la nota se lee
   debajo, no como menú flotante, y el ▾ sigue al texto aunque se parta. */
.xt-nota-base > summary {
    display: block;
    padding: 12px 0;
    min-height: 44px;
}
.xt-nota-base[open] > p { position: static; }

.xt-menu-lista {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    padding: 4px 0;
    background: #FFFFFF;
    border: 1px solid var(--xt-line-strong, rgba(42, 54, 61, 0.32));
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(42, 54, 61, 0.14);
}

.xt-menu-lista > button,
.xt-menu-lista > label {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: none;
    border: 0;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--xt-carbon, #2A363D);
    cursor: pointer;
}

.xt-menu-lista > button:hover,
.xt-menu-lista > label:hover {
    background: var(--xt-crema-2, #FAF1E4);
}

/* Inventario en el celular: las 4 cifras caben en dos columnas y el
   texto de entrada se oculta para que la lista suba. */
@media (max-width: 640px) {
    .inv-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .inv-stat {
        min-width: 0;
    }

    .inv-stat-lab,
    .inv-stat-sub {
        overflow-wrap: anywhere;
    }

    .inv-hero-lead {
        display: none;
    }
}

/* Casillas con área de toque de 44 px (auditoría UX visual-11): la etiqueta
   que envuelve una casilla w-5 crece hasta 44 px. */
label:has(> input[type="checkbox"].w-5) {
    min-height: 44px;
}

/* Cotizaciones: con el formulario o la ficha abiertos no se ve el buscador
   ni los filtros; en el directorio de clientes, tampoco el buscador de
   arriba (el directorio trae el suyo). */
#cotizaciones-root.cot-en-detalle .xt-buscador,
#cotizaciones-root.cot-en-detalle .xt-chips,
#cotizaciones-root.cot-en-clientes .xt-buscador,
#cotizaciones-root.cot-en-clientes .xt-chips {
    display: none;
}

/* En el celular la lista abre hacia la derecha del botón y no sale de la
   pantalla (antes se cortaba por la izquierda). */
@media (max-width: 640px) {
    .xt-menu-lista {
        left: 0;
        right: auto;
        max-width: calc(100vw - 32px);
    }
}

/* Preguntas completas del Perfil del Consultor (crecimiento-21): una
   pregunta se lee, no se escanea; nada de 10 px en mayúsculas. */
.cons-pregunta {
    display: block;
    margin-bottom: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xt-carbon, #2A363D);
}

/* ── Tabla que en el celular se lee como fichas (auditoría dinero-16) ──
   En escritorio es la tabla de siempre. Abajo de 640 px cada renglón es una
   ficha y cada celda muestra la etiqueta de su columna, que pone
   js/tabla_fichas.js desde el encabezado (data-etiqueta). Las columnas que la
   tabla esconde en el celular vuelven a verse: en ficha sí caben. */
@media (max-width: 639px) {
    .xt-tabla-fichas,
    .xt-tabla-fichas tbody,
    .xt-tabla-fichas tr {
        display: block;
        width: 100%;
    }
    .xt-tabla-fichas { min-width: 0 !important; }
    .xt-tabla-fichas thead { display: none; }
    .xt-tabla-fichas tbody { border: 0 !important; }
    .xt-tabla-fichas tbody tr {
        border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16)) !important;
        border-radius: var(--ficha-radius, 4px);
        background: var(--xt-crema, #FFF8F0);
        padding: 0.25rem 0.85rem;
        margin-bottom: 0.6rem;
    }
    .xt-tabla-fichas tbody td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0 !important;
        text-align: right !important;
        border: 0;
        min-width: 0;
        overflow-wrap: break-word;
    }
    /* Los botones de una celda toman el ancho que queda y bajan de renglón
       entre palabras, nunca a media palabra ni fuera de la ficha. */
    .xt-tabla-fichas tbody td > div {
        display: flex;
        flex: 1 1 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.4rem;
        min-width: 0;
    }
    .xt-tabla-fichas tbody td button,
    .xt-tabla-fichas tbody td a {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
    .xt-tabla-fichas tbody td + td { border-top: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16)); }
    .xt-tabla-fichas tbody td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        flex: 0 0 auto;
        text-align: left;
        font-weight: 400;
        font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--xt-muted, #5E5E5E);
    }
    .xt-tabla-fichas tbody td[colspan] {
        display: block !important;
        text-align: center !important;
    }
}

/* ── Hoja: modal que en el celular sale desde abajo (dinero-16) ──
   Esquinas de 4 px siempre; abajo de 640 px ocupa todo el ancho, pegada al
   borde inferior. El overlay lleva .xt-hoja-overlay. */
.xt-hoja {
    border-radius: var(--ficha-radius, 4px) !important;
    box-shadow: 0 24px 56px -10px rgba(0, 0, 0, 0.42), 0 8px 16px -5px rgba(0, 0, 0, 0.18);
    /* Más alta que la ventana (pantalla baja, tableta acostada): se desplaza
       por dentro en lugar de cortarse arriba sin poder llegar al título. */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
@media (max-width: 639px) {
    .xt-hoja-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .xt-hoja {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        overflow-y: auto;
        border-radius: var(--ficha-radius, 4px) var(--ficha-radius, 4px) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* Encabezado editorial de la hoja: crema, cuadro terracota, título Fraunces
   (el mismo de los modales de js/ui_modal.js). */
.xt-hoja-cab {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem 0.85rem;
    background: var(--xt-crema, #FFF8F0);
    color: var(--xt-carbon, #2A363D);
    border-bottom: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
}
.xt-hoja-ceja {
    display: block;
    margin: 0.1rem 0 0.25rem;
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-terracota-texto);
}
.xt-hoja-ceja::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    vertical-align: 0.05em;
    background: var(--xt-terracota, #D84315);
}
.xt-hoja-titulo {
    margin: 0;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
}
.xt-hoja-cerrar {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: var(--ficha-radius, 4px);
    background: transparent;
    color: var(--xt-carbon, #2A363D);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.xt-hoja-cerrar:hover { background: rgba(42, 54, 61, 0.06); }
.xt-hoja-cerrar:focus-visible { outline: 2px solid var(--xt-terracota, #D84315); outline-offset: 2px; }

/* ── Más opciones: campos que pocos usan, plegados dentro de un formulario ──
   <details class="xt-mas-opciones"><summary>Más opciones</summary>…</details>
   Mantiene el formulario corto sin esconder nada para siempre. */
.xt-mas-opciones {
    border-top: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    padding-top: 4px;
}
.xt-mas-opciones > summary {
    list-style: none;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, 'DM Mono', monospace);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--xt-carbon, #2A363D);
}
.xt-mas-opciones > summary::-webkit-details-marker { display: none; }
.xt-mas-opciones > summary::after { content: "+"; margin-left: auto; font-size: 1rem; }
.xt-mas-opciones[open] > summary::after { content: "−"; }
.xt-mas-opciones > summary:focus-visible { outline: 2px solid var(--xt-terracota, #D84315); outline-offset: 2px; }

/* ── Capa: hoja que se arma desde JS (foto de asistencia, cuenta-18) ──
   <div class="xt-capa xt-hoja-overlay"><div class="xt-capa-hoja xt-hoja">…
   Misma hoja crema que los modales; en el celular sale desde abajo. */
.xt-capa {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(42, 54, 61, 0.72);
}
.xt-capa-hoja {
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--xt-crema, #FFF8F0);
    border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    color: var(--xt-carbon, #2A363D);
}
.xt-capa-cuerpo { padding: 1rem 1.25rem 1.25rem; }
.xt-capa-ayuda {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--xt-muted, #5E5E5E);
}
.xt-camara-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    background: var(--xt-carbon, #2A363D);
    border-radius: var(--ficha-radius, 4px);
}
.xt-capa-acciones {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.xt-capa-acciones > button {
    flex: 1 1 0;
    justify-content: center;
}

/* ── Agenda de Reservas (restaurante-12) ──────────────────────────
   Reservas y eventos del día en una sola lista de fichas, por hora.
   Esquinas de 4 px y borde completo de 1 px; el estado va en un chip,
   nunca en una franja de un lado. En el celular la hora queda arriba del
   nombre y las acciones bajan de renglón con 44 px de toque. */
.xt-agenda-lista {
    display: grid;
    gap: 10px;
}

.xt-agenda-dia {
    margin: 18px 0 8px;
}

.xt-agenda-ficha {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 18px;
    padding: 1rem 1.15rem;
    border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    border-radius: var(--ficha-radius, 4px);
}

.xt-agenda-ficha .label-mono {
    margin: 0;
}

/* .estado-pill trae 10 px; en la agenda y en sus hojas (Validar llegada,
   invitados del evento) sube al mínimo de 0.75rem. */
.xt-agenda-ficha .estado-pill,
.xt-hoja .estado-pill {
    font-size: 0.75rem;
}

/* Portada del evento (su cartel): miniatura a la derecha de la ficha; en el
   celular va arriba y a lo ancho, como en la cartelera de antes. */
.xt-agenda-portada {
    order: 1;
    flex: 0 0 120px;
    width: 120px;
    height: 90px;
    object-fit: cover;
    border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    border-radius: var(--ficha-radius, 4px);
    background: var(--xt-crema-2, #F5ECDD);
}

/* «Ver todos los eventos» con el filtro Todo. */
.xt-agenda-mas {
    min-height: 44px;
    margin-top: 10px;
}

/* «Pasados, finalizados o sin fecha»: plegada; se abre tocando el título. */
.xt-agenda-otros > summary {
    display: flex;
    align-items: center;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
}

.xt-agenda-otros > summary::-webkit-details-marker {
    display: none;
}

.xt-agenda-otros > summary::after {
    content: " ▾";
    margin-left: 6px;
}

.xt-agenda-otros[open] > summary::after {
    content: " ▴";
}

.xt-agenda-otros > summary:focus-visible {
    outline: 2px solid var(--xt-terracota, #D84315);
    outline-offset: 2px;
}

.xt-agenda-hora {
    flex: 0 0 76px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.xt-agenda-hora-num {
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--xt-carbon, #2A363D);
}

.xt-agenda-cuerpo {
    flex: 1 1 240px;
    min-width: 0;
}

.xt-agenda-nombre {
    margin: 2px 0 6px;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--xt-carbon, #2A363D);
    overflow-wrap: break-word;
}

.xt-agenda-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.xt-agenda-meta {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--xt-muted, #5E5E5E);
    overflow-wrap: break-word;
}

.xt-agenda-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.xt-agenda-acciones .btn-xt-primario,
.xt-agenda-acciones .btn-xt-ghost {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.9rem;
}

@media (max-width: 639px) {
    .xt-agenda-hora {
        flex: 1 1 100%;
        flex-direction: row;
        align-items: baseline;
        gap: 10px;
    }

    .xt-agenda-portada {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
        height: 140px;
    }
}

/* ── Tus enlaces y QR (restaurante-17) ────────────────────────────
   Los enlaces para los clientes en un solo lugar (js/enlaces_publicos.js):
   cada uno con su QR, la dirección y Copiar · WhatsApp · Imprimir QR.
   Borde completo de 1 px y esquinas de 4 px; en el celular el QR va
   arriba y los botones ocupan todo el ancho. Las columnas salen del ancho
   del contenedor, no de la pantalla: en Mi página caben dos fichas lado a
   lado y en la hoja de «Ver tus enlaces» (420 px) va una sola. */
.xt-enlaces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
    gap: 12px;
}

.xt-enlace {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 18px;
    padding: 1rem 1.15rem;
    border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    border-radius: var(--ficha-radius, 4px);
    background: #FFFFFF;
}

.xt-enlace-qr {
    flex: 0 0 auto;
    width: 148px;
    min-height: 148px;
    padding: 8px;
    border: 1px solid var(--xt-line, rgba(42, 54, 61, 0.16));
    border-radius: var(--ficha-radius, 4px);
    background: #FFFFFF;
}

.xt-enlace-qr img,
.xt-enlace-qr canvas {
    display: block;
    width: 100%;
    height: auto;
}

.xt-enlace-cuerpo {
    flex: 1 1 220px;
    min-width: 0;
}

.xt-enlace-titulo {
    margin: 0 0 4px;
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--xt-carbon, #2A363D);
}

.xt-enlace-desc {
    margin: 0 0 8px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--xt-muted, #5E5E5E);
}

.xt-enlace-url {
    margin: 0 0 12px;
    padding: 0.5rem 0.65rem;
    background: var(--xt-crema-2, #F5ECDD);
    border-radius: var(--ficha-radius, 4px);
    font-family: var(--font-mono, 'DM Mono', ui-monospace, monospace);
    font-size: 0.75rem;
    color: var(--xt-carbon, #2A363D);
    overflow-wrap: anywhere;
}

.xt-enlace-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.xt-enlace-acciones .btn-xt-ghost {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.9rem;
}

@media (max-width: 639px) {
    .xt-enlace-qr {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
    }

    .xt-enlace-acciones > * {
        flex: 1 1 100%;
        justify-content: center;
    }
}