/* =============================================================
   Turquesa Chelem — Admin. CSS mobile-first (sin build, sin CDN).
   SPEC-002-ADMIN §6. Paleta turquesa + arena.
   ============================================================= */

:root {
    --c-turquesa: #0e8f9c;
    --c-turquesa-osc: #0a6b75;
    --c-arena: #f5f1e8;
    --c-texto: #1f2a2e;
    --c-tenue: #5c6b70;
    --c-linea: #dfe4e2;
    --c-blanco: #ffffff;
    --c-ok: #1a8f5a;
    --c-ok-bg: #e4f5ec;
    --c-error: #c0392b;
    --c-error-bg: #fce8e6;
    --c-warn: #b8860b;
    --c-warn-bg: #fbf3dd;
    --c-info-bg: #e6f2f4;
    --c-peligro: #c0392b;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --sidebar-w: 15.5rem;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-arena);
    color: var(--c-texto);
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.5;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-turquesa); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Shell: sidebar izquierdo + contenido --- */
.app-shell {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
}
.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-mobilebar {
    position: sticky; top: 0; z-index: 25;
    display: flex; align-items: center; gap: .65rem;
    background: var(--c-turquesa); color: #fff;
    padding: .65rem 1rem;
    box-shadow: var(--sombra);
}
.app-mobilebar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; padding: 0;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
}
.app-mobilebar__toggle:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}
.app-mobilebar__ico { width: 1.35rem; height: 1.35rem; display: block; }
.app-mobilebar__titulo {
    font-weight: 700; font-size: .92rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: min(var(--sidebar-w), 86vw);
    display: flex; flex-direction: column;
    background: var(--c-turquesa-osc); color: #fff;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.sidebar.es-abierto { transform: translateX(0); }
.sidebar__cabeza {
    padding: 1.15rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.sidebar__marca {
    display: block; color: #fff; text-decoration: none;
    font-weight: 700; font-size: 1rem; line-height: 1.25;
}
.sidebar__meta {
    margin: .4rem 0 0; font-size: .75rem; opacity: .85;
}
.sidebar__nav {
    display: flex; flex-direction: column; gap: .2rem;
    padding: .75rem .6rem; flex: 1 1 auto; overflow-y: auto;
}
.sidebar__item {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .7rem; border-radius: 10px;
    color: rgba(255,255,255,.88); text-decoration: none;
    font-size: .9rem; border: 0; background: transparent;
    width: 100%; cursor: pointer; text-align: left; font: inherit;
}
.sidebar__item:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar__item.es-activo {
    background: rgba(255,255,255,.18); color: #fff; font-weight: 700;
}
.sidebar__item:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}
.sidebar__silueta {
    width: 1.35rem; height: 1.35rem; flex: 0 0 auto;
    display: block; opacity: .95;
}
.sidebar__txt { line-height: 1.2; }
.sidebar__pie {
    padding: .6rem;
    border-top: 1px solid rgba(255,255,255,.14);
}
.sidebar__salir { margin: 0; }
.sidebar__item--accion { color: rgba(255,255,255,.8); }

.sidebar-backdrop {
    position: fixed; inset: 0; z-index: 35;
    background: rgba(15, 35, 40, .45);
    border: 0; padding: 0; cursor: pointer;
}
.sidebar-backdrop[hidden] { display: none !important; }
body.sidebar-abierto { overflow: hidden; }
@media (min-width: 720px) {
    body.sidebar-abierto { overflow: auto; }
}

/* --- Contenedor --- */
.contenedor {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    flex: 1 1 auto;
}

.pagina__titulo { font-size: 1.3rem; margin: .3rem 0 1rem; }

/* --- Tarjetas --- */
.tarjeta {
    background: var(--c-blanco);
    border: 1px solid var(--c-linea);
    border-radius: var(--radio);
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra);
}
.tarjeta__titulo { font-size: 1rem; margin: 0 0 .7rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tarjeta--alerta { border-left: 4px solid var(--c-warn); }
.tarjeta--peligro { border-left: 4px solid var(--c-peligro); }

/* --- Eventos de pasarela (D-0030/D-0031, solo lectura) --- */
.pasarela-evento {
    border-top: 1px solid var(--c-linea);
    padding: .85rem 0;
}
.pasarela-evento:first-of-type { border-top: 0; padding-top: 0; }
.pasarela-evento:last-child { padding-bottom: 0; }
.pasarela-evento__id {
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
}
.pasarela-evento__details { margin-top: .35rem; }
.pasarela-evento__details > summary {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--c-turquesa);
}
.pasarela-evento__payload {
    margin: .5rem 0 0;
    max-height: 16rem;
    overflow: auto;
    font-size: .75rem;
    line-height: 1.35;
    background: var(--c-arena);
    padding: .65rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--c-linea);
    white-space: pre-wrap;
    word-break: break-word;
}
.pasarela-evento__marcadores {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

/* --- Listas --- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista__item { padding: .6rem 0; border-bottom: 1px solid var(--c-linea); }
.lista__item:last-child { border-bottom: 0; }
.lista__item a { color: var(--c-texto); text-decoration: none; }
.lista__item--flex { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vacio, .ayuda { color: var(--c-tenue); font-size: .88rem; }
.ayuda { display: block; margin-top: .25rem; }

/* --- Formularios --- */
.form__grupo { margin-bottom: .9rem; display: flex; flex-direction: column; }
.form__grupo label,
.form__etiqueta { font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
.form__valor-ro {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-texto);
}
.form input, .form select, .form textarea,
.filtros input, .filtros select {
    font: inherit; color: var(--c-texto);
    padding: .6rem .7rem;
    border: 1px solid var(--c-linea); border-radius: 8px;
    background: #fff; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus {
    outline: 2px solid var(--c-turquesa); border-color: var(--c-turquesa);
}
.input--codigo { letter-spacing: .4em; text-align: center; font-size: 1.3rem; }
.form__acciones { display: flex; gap: .6rem; margin-top: 1rem; flex-wrap: wrap; }
.form--inline { display: inline; margin: 0; }

/* --- Botones --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-weight: 600; cursor: pointer;
    padding: .6rem 1rem; border-radius: 8px; border: 1px solid transparent;
    text-decoration: none; line-height: 1.2;
}
.btn--primario { background: var(--c-turquesa); color: #fff; }
.btn--primario:hover { background: var(--c-turquesa-osc); }
.btn--secundario { background: #fff; color: var(--c-turquesa); border-color: var(--c-turquesa); }
.btn--texto { background: transparent; color: var(--c-turquesa); padding: .4rem .5rem; }
.btn--peligro { background: var(--c-peligro); color: #fff; }
.btn--peligro.btn--texto { background: transparent; color: var(--c-peligro); }
.btn--bloque { width: 100%; }

/* --- Chips de estado --- */
.chip {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    font-size: .72rem; font-weight: 700; background: #eef1f0; color: var(--c-tenue);
}
.chip--confirmada_total, .chip--confirmada_anticipo, .chip--completada, .chip--ok, .chip--aprobado { background: var(--c-ok-bg); color: var(--c-ok); }
.chip--cancelada, .chip--expirada, .chip--rechazado, .chip--cancelado, .chip--contracargo { background: var(--c-error-bg); color: var(--c-error); }
.chip--pago_pendiente, .chip--apartada, .chip--pend, .chip--pendiente, .chip--abandonado, .chip--desconocido, .chip--reembolsado { background: var(--c-warn-bg); color: var(--c-warn); }
.chip--bloqueo { background: #e6e9ee; color: #444; }
.chip--apartado, .chip--apartado_manual { background: #d6ebf8; color: #1a5f8a; }
.chip--plataforma, .chip--reserva { background: #d4f1f4; color: #0a6b75; }
.chip--proceso, .chip--hold { background: #fbf3dd; color: #8a6d0b; }

/* --- Calendario operativo (layout tipo cotizar) --- */
.cal-ops { margin-bottom: 1.5rem; }
.cal-ops__cabecera { margin-bottom: 1rem; }
.cal-ops__leyenda {
    list-style: none; padding: 0; margin: .4rem 0 0;
    display: flex; flex-wrap: wrap; gap: .55rem 1rem;
    font-size: .78rem; color: var(--c-tenue);
}
.cal-ops__leyenda li { display: flex; align-items: center; gap: .4rem; }
.cal-ops__swatch {
    width: 14px; height: 14px; border-radius: 4px;
    border: 1px solid var(--c-linea); display: inline-block;
}
.cal-ops__swatch--plataforma { background: #2aa8b5; border-color: #1e8a95; }
.cal-ops__swatch--proceso { background: #f0d56a; border-color: #d4b84a; }
.cal-ops__swatch--apartado { background: #3b82c4; border-color: #2a6aa8; }
.cal-ops__swatch--bloqueo { background: #b0b6bd; border-color: #8e959c; }

.cal-ops__rejilla { display: grid; gap: 1rem; }
.cal-ops__col { min-width: 0; }
.cal-ops__mes { padding: .85rem; }
.cal-ops__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .65rem;
}
.cal-ops__mes-titulo {
    margin: 0; flex: 1; text-align: center;
    font-size: 1.05rem; text-transform: capitalize;
}
.cal-ops__flecha {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    border: 1px solid var(--c-linea); border-radius: 10px;
    background: #fff; color: var(--c-texto); text-decoration: none;
    font-size: 1.45rem; line-height: 1;
}
.cal-ops__flecha:hover { border-color: var(--c-turquesa); color: var(--c-turquesa); }
.cal-ops__flecha--sig {
    background: var(--c-turquesa); color: #fff; border-color: var(--c-turquesa);
}
.cal-ops__flecha--sig:hover { background: var(--c-turquesa-osc); color: #fff; }

.cal-ops__dow, .cal-ops__grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-ops__dow { margin-bottom: 4px; }
.cal-ops__dow span {
    text-align: center; font-size: .7rem; font-weight: 700; color: var(--c-tenue);
}
.cal-ops__dia {
    min-height: 44px; border-radius: 8px; border: 1px solid var(--c-linea);
    background: #fff; font-size: .85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-texto); font-family: inherit; padding: 0;
    touch-action: manipulation;
}
.cal-ops__dia--vacio { border: 0; background: transparent; pointer-events: none; min-height: 0; }
.cal-ops__dia--pasado { color: #9fb2b8; background: #f3f5f5; }
.cal-ops__dia--hoy { box-shadow: inset 0 0 0 2px var(--c-turquesa); font-weight: 700; }
.cal-ops__dia--plataforma { background: #2aa8b5; color: #fff; border-color: #1e8a95; }
.cal-ops__dia--proceso { background: #f0d56a; color: #5a4a10; border-color: #d4b84a; }
.cal-ops__dia--apartado { background: #3b82c4; color: #fff; border-color: #2a6aa8; }
.cal-ops__dia--bloqueo { background: #b0b6bd; color: #333; border-color: #8e959c; }
.cal-ops__dia.is-sel {
    outline: 2px solid var(--c-turquesa-osc); outline-offset: 1px;
    box-shadow: inset 0 0 0 2px #fff;
}
.cal-ops__dia.is-rango {
    background: #cbe9ec; border-color: #9fd0d6; color: var(--c-texto);
}
.cal-ops__dia.is-sel-fin { background: var(--c-turquesa); color: #fff; border-color: var(--c-turquesa-osc); }
.cal-ops__hint { font-size: .8rem; margin: .65rem 0 0; }

.cal-ops__alta { margin: 0; }
.cal-ops__eyebrow {
    margin: 0 0 .25rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--c-turquesa);
}
.cal-ops__panel-sub { font-size: .82rem; margin: 0 0 .8rem; }
.cal-ops__lista .lista__item { align-items: center; }
.cal-ops__item.is-dim { opacity: .35; }
.cal-ops__panel-scroll { max-height: none; }
.muted { color: var(--c-tenue); }

/* Móvil: apilado calendario → alta → ocupación */
.cal-ops__rejilla {
    grid-template-columns: 1fr;
}

/* Desktop: fila 1 = calendario | Nueva ocupación; fila 2 = Ocupación (ancho completo) */
@media (min-width: 960px) {
    .cal-ops__rejilla {
        grid-template-columns: minmax(280px, 1.2fr) minmax(240px, .9fr);
        align-items: start;
    }
    .cal-ops__col--cal,
    .cal-ops__col--alta {
        position: sticky;
        top: 4.5rem;
        align-self: start;
    }
    .cal-ops__col--panel {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        display: block;
    }
    .cal-ops__panel {
        display: block;
        max-height: none;
        margin: 0;
        overflow: visible;
    }
    .cal-ops__panel-scroll {
        max-height: min(28rem, 50vh);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: .15rem;
    }
}


/* --- Alertas / flash --- */
.alerta {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .9rem; border-radius: 8px; margin-bottom: .8rem; font-size: .9rem;
}
.alerta--success { background: var(--c-ok-bg); color: var(--c-ok); }
.alerta--error   { background: var(--c-error-bg); color: var(--c-error); }
.alerta--warning { background: var(--c-warn-bg); color: var(--c-warn); }
.alerta--info    { background: var(--c-info-bg); color: var(--c-turquesa-osc); }
.alerta span:first-child { flex: 1; }
.alerta__x { background: transparent; border: 0; font-size: 1.2rem; cursor: pointer; color: inherit; line-height: 1; }
.aviso { background: var(--c-info-bg); color: var(--c-turquesa-osc); padding: .7rem .9rem; border-radius: 8px; font-size: .88rem; }
.aviso--pii { background: var(--c-warn-bg); color: var(--c-warn); }

/* --- Tabla responsive (se transforma en tarjetas en móvil) --- */
.tabla-responsive { width: 100%; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla thead { display: none; }
.tabla tr, .tabla tbody, .tabla td { display: block; width: 100%; }
.tabla tbody tr {
    background: #fff; border: 1px solid var(--c-linea); border-radius: 10px;
    padding: .5rem .7rem; margin-bottom: .6rem;
}
.tabla td { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border: 0; text-align: right; }
.tabla td::before {
    content: attr(data-th); font-weight: 600; color: var(--c-tenue); text-align: left;
}
.tabla td:last-child { justify-content: flex-end; }

/* --- Filtros / subnav --- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; align-items: end; }
.filtros__q { flex: 1 1 100%; }
.filtros__campo { display: flex; flex-direction: column; font-size: .8rem; gap: .25rem; }
.subnav { display: flex; gap: .3rem; flex-wrap: wrap; margin: 1rem 0; }
.subnav__item {
    padding: .45rem .8rem; border-radius: 999px; text-decoration: none;
    background: #fff; border: 1px solid var(--c-linea); color: var(--c-tenue); font-size: .85rem;
}
.subnav__item.es-activo { background: var(--c-turquesa); color: #fff; border-color: var(--c-turquesa); }

/* --- Datos (dl) --- */
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; margin: 0; }
.datos dt { color: var(--c-tenue); font-size: .82rem; }
.datos dd { margin: 0; font-weight: 600; text-align: right; }

/* --- Auth --- */
.auth { max-width: 380px; margin: 2rem auto; }
.auth__titulo { font-size: 1.25rem; margin-bottom: .5rem; text-align: center; }
.auth__ayuda { color: var(--c-tenue); font-size: .88rem; text-align: center; margin-bottom: 1rem; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.codes__item { font-family: monospace; background: #fff; border: 1px dashed var(--c-linea); border-radius: 8px; padding: .5rem; text-align: center; }
.qr { text-align: center; margin: 1rem 0; }
.qr__canvas { width: 200px; height: 200px; margin: 0 auto; background: #fff; border: 1px solid var(--c-linea); border-radius: 8px; }
.qr__uri { word-break: break-all; font-size: .72rem; display: block; margin-top: .5rem; }

/* --- Confirmación (details) --- */
.confirmar summary { list-style: none; display: inline-flex; }
.confirmar summary::-webkit-details-marker { display: none; }
.confirmar__caja { margin-top: .8rem; padding: .8rem; background: #fff; border: 1px solid var(--c-linea); border-radius: 8px; }

/* --- Paginación --- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }
.paginacion__b { text-decoration: none; background: #fff; border: 1px solid var(--c-linea); border-radius: 8px; padding: .3rem .8rem; color: var(--c-turquesa); font-size: 1.1rem; }
.paginacion__info { font-size: .85rem; color: var(--c-tenue); }

/* --- Cuadrícula / error --- */
.cuadricula-2 { display: grid; gap: 1rem; }
.error-pagina { text-align: center; margin: 3rem auto; }
.error-pagina__codigo { font-size: 3.5rem; margin: 0; color: var(--c-turquesa); }
.error-pagina__msg { color: var(--c-tenue); margin: .5rem 0 1.5rem; }
.volver { display: inline-block; margin-bottom: .5rem; color: var(--c-turquesa); text-decoration: none; font-size: .9rem; }
.pie { text-align: center; color: var(--c-tenue); font-size: .75rem; padding: 1rem 0 1.5rem; }
.app-main > .pie { margin-top: auto; }

/* --- Tablet / escritorio: sidebar fijo --- */
@media (min-width: 720px) {
    .app-mobilebar { display: none; }
    .sidebar {
        position: sticky; top: 0; align-self: flex-start;
        height: 100vh; max-height: 100vh;
        transform: none; width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
        box-shadow: none; border-right: 1px solid rgba(0,0,0,.08);
    }
    .sidebar-backdrop { display: none !important; }
    .contenedor { padding: 1.25rem 1.5rem 2rem; max-width: 960px; }
    .cuadricula-2 { grid-template-columns: 1fr 1fr; }

    .tabla thead { display: table-header-group; }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: revert; }
    .tabla { border: 1px solid var(--c-linea); border-radius: 10px; overflow: hidden; background: #fff; }
    .tabla th, .tabla td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--c-linea); }
    .tabla thead th { background: var(--c-arena); font-size: .8rem; color: var(--c-tenue); }
    .tabla td::before { content: none; }
    .tabla tbody tr { border: 0; border-radius: 0; margin: 0; padding: 0; }
    .filtros__q { flex: 1 1 auto; }
}