/* ==========================================================================
   ORLA TURS - Sistema de diseno
   --------------------------------------------------------------------------
   CSS propio, sin frameworks. Un solo archivo, cargado en todas las pantallas.
   Organizado en: tokens, base, layout, componentes, mapa de asientos, utilidades.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Marca */
    --brand:          #0f4c81;
    --brand-dark:     #0a3559;
    --brand-light:    #1a6cb0;
    --brand-soft:     #e8f1f9;
    --accent:         #f5a524;
    --accent-dark:    #d18a12;
    --accent-on:      #3a2606;

    /* Texto sobre rellenos de color (botones, fichas, avatares) */
    --btn-fg:         #ffffff;

    /* Estados: color solido, fondo suave, borde y texto sobre ese fondo */
    --success:        #16a34a;
    --success-soft:   #dcfce7;
    --success-line:   #86efac;
    --success-on:     #15803d;
    --success-hover:  #15803d;
    --warning:        #d97706;
    --warning-soft:   #fef3c7;
    --warning-line:   #fcd34d;
    --warning-on:     #b45309;
    --danger:         #dc2626;
    --danger-soft:    #fee2e2;
    --danger-line:    #fca5a5;
    --danger-on:      #b91c1c;
    --danger-hover:   #b91c1c;
    --info:           #0284c7;
    --info-soft:      #e0f2fe;
    --info-line:      #7dd3fc;
    --info-on:        #0369a1;

    /* Neutros */
    --bg:             #f1f5f9;
    --surface:        #ffffff;
    --surface-alt:    #f8fafc;
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --text:           #0f172a;
    --text-strong:    #334155;
    --text-muted:     #64748b;
    --text-soft:      #94a3b8;
    --muted-soft:     #f1f5f9;
    --muted-hover:    #475569;
    --overlay:        rgba(15, 23, 42, .5);
    --focus-ring:     rgba(26, 108, 176, .14);
    --tooltip-bg:     #0f172a;
    --tooltip-fg:     #ffffff;

    /* Superficies con identidad propia */
    --sidebar-bg:     #0a3559;
    --sidebar-fg:     #cbd9e6;
    --sidebar-dim:    #6f8ba6;
    --sidebar-soft:   #9db4c9;
    --sidebar-hover:  rgba(255, 255, 255, .07);
    --sidebar-active: rgba(255, 255, 255, .11);
    --sidebar-line:   rgba(255, 255, 255, .10);

    --footer-bg:      #0a3559;
    --footer-fg:      #a8bccf;
    --footer-link:    #cbd9e6;
    --footer-dim:     #7f9bb3;
    --footer-line:    rgba(255, 255, 255, .1);

    --hero-grad:      linear-gradient(140deg, #0a3559 0%, #0f4c81 55%, #1a6cb0 100%);
    --auth-grad:      linear-gradient(140deg, #0a3559, #0f4c81);
    --auth-fg:        rgba(255, 255, 255, .78);
    --ticket-grad:    linear-gradient(135deg, #0a3559, #1a6cb0);

    /* Asientos */
    --seat-free:      #ffffff;
    --seat-free-br:   #94a3b8;
    --seat-selected:  #16a34a;
    --seat-blocked:   #cbd5e1;
    --seat-taken:     #64748b;
    --seat-taken-br:  #475569;
    --seat-mine:      #0f4c81;
    --seat-driver:    #334155;

    /* Geometria */
    --radius:         10px;
    --radius-sm:      6px;
    --radius-lg:      16px;
    --shadow:         0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-md:      0 4px 12px rgba(15, 23, 42, .10);
    --shadow-lg:      0 12px 32px rgba(15, 23, 42, .16);
    --sidebar-w:      252px;
    --header-h:       60px;

    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   1b. MODO OSCURO
   --------------------------------------------------------------------------
   Solo se redefinen los tokens de arriba; ninguna regla de mas abajo cambia.

   Tres estados, los mismos que ofrece el boton de la barra superior:
     - sin atributo       -> automatico: manda el telefono o el sistema
     - data-theme="light" -> el usuario pidio claro a la fuerza
     - data-theme="dark"  -> el usuario pidio oscuro a la fuerza

   Por eso el bloque del sistema lleva :not([data-theme="light"]): si el
   usuario eligio claro, el modo oscuro del telefono ya no le gana.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand:          #4a9ae0;
        --brand-dark:     #08131f;
        --brand-light:    #7cc0f5;
        --brand-soft:     #16324e;
        --accent:         #f0b429;
        --accent-dark:    #d79a24;
        --accent-on:      #2b1c04;

        --btn-fg:         #08131f;

        --success:        #22c55e;
        --success-soft:   #10301f;
        --success-line:   #1f5a38;
        --success-on:     #6ee7a0;
        --success-hover:  #16a34a;
        --warning:        #f59e0b;
        --warning-soft:   #33260c;
        --warning-line:   #6b4f14;
        --warning-on:     #fbbf24;
        --danger:         #ef4444;
        --danger-soft:    #3a1518;
        --danger-line:    #7a2a2f;
        --danger-on:      #fca5a5;
        --danger-hover:   #dc2626;
        --info:           #38bdf8;
        --info-soft:      #0e2c40;
        --info-line:      #1d5273;
        --info-on:        #7dd3fc;

        --bg:             #0b1220;
        --surface:        #131d2e;
        --surface-alt:    #1a2637;
        --border:         #27344a;
        --border-strong:  #3a4c6b;
        --text:           #e8eefa;
        --text-strong:    #ccd8ea;
        --text-muted:     #9aacc5;
        --text-soft:      #758aa6;
        --muted-soft:     #223047;
        --muted-hover:    #5b6c85;
        --overlay:        rgba(2, 6, 14, .66);
        --focus-ring:     rgba(124, 192, 245, .25);
        --tooltip-bg:     #2a3a53;
        --tooltip-fg:     #e8eefa;

        --sidebar-bg:     #0e1626;
        --sidebar-fg:     #c3d1e2;
        --sidebar-dim:    #708aa6;
        --sidebar-soft:   #9db4c9;
        --sidebar-hover:  rgba(255, 255, 255, .06);
        --sidebar-active: rgba(255, 255, 255, .10);
        --sidebar-line:   rgba(255, 255, 255, .08);

        --footer-bg:      #0b1424;
        --footer-fg:      #9fb3ca;
        --footer-link:    #c3d1e2;
        --footer-dim:     #708aa6;
        --footer-line:    rgba(255, 255, 255, .08);

        --hero-grad:      linear-gradient(140deg, #0a1526 0%, #12365a 55%, #1b5384 100%);
        --auth-grad:      linear-gradient(140deg, #080f1c, #12314f);
        --auth-fg:        rgba(226, 236, 250, .72);
        --ticket-grad:    linear-gradient(135deg, #102a45, #1c5c94);

        --seat-free:      #1e2b3f;
        --seat-free-br:   #64748b;
        --seat-selected:  #22c55e;
        --seat-blocked:   #2c3a52;
        --seat-taken:     #475569;
        --seat-taken-br:  #64748b;
        --seat-mine:      #2d7fc4;
        --seat-driver:    #334155;

        --shadow:         0 1px 3px rgba(0, 0, 0, .50), 0 1px 2px rgba(0, 0, 0, .34);
        --shadow-md:      0 4px 14px rgba(0, 0, 0, .55);
        --shadow-lg:      0 14px 36px rgba(0, 0, 0, .62);
    }
}

/* El mismo juego, pero cuando el usuario lo eligio a mano (gana siempre) */
:root[data-theme="dark"] {
    color-scheme: dark;

    --brand:          #4a9ae0;
    --brand-dark:     #08131f;
    --brand-light:    #7cc0f5;
    --brand-soft:     #16324e;
    --accent:         #f0b429;
    --accent-dark:    #d79a24;
    --accent-on:      #2b1c04;

    --btn-fg:         #08131f;

    --success:        #22c55e;
    --success-soft:   #10301f;
    --success-line:   #1f5a38;
    --success-on:     #6ee7a0;
    --success-hover:  #16a34a;
    --warning:        #f59e0b;
    --warning-soft:   #33260c;
    --warning-line:   #6b4f14;
    --warning-on:     #fbbf24;
    --danger:         #ef4444;
    --danger-soft:    #3a1518;
    --danger-line:    #7a2a2f;
    --danger-on:      #fca5a5;
    --danger-hover:   #dc2626;
    --info:           #38bdf8;
    --info-soft:      #0e2c40;
    --info-line:      #1d5273;
    --info-on:        #7dd3fc;

    --bg:             #0b1220;
    --surface:        #131d2e;
    --surface-alt:    #1a2637;
    --border:         #27344a;
    --border-strong:  #3a4c6b;
    --text:           #e8eefa;
    --text-strong:    #ccd8ea;
    --text-muted:     #9aacc5;
    --text-soft:      #758aa6;
    --muted-soft:     #223047;
    --muted-hover:    #5b6c85;
    --overlay:        rgba(2, 6, 14, .66);
    --focus-ring:     rgba(124, 192, 245, .25);
    --tooltip-bg:     #2a3a53;
    --tooltip-fg:     #e8eefa;

    --sidebar-bg:     #0e1626;
    --sidebar-fg:     #c3d1e2;
    --sidebar-dim:    #708aa6;
    --sidebar-soft:   #9db4c9;
    --sidebar-hover:  rgba(255, 255, 255, .06);
    --sidebar-active: rgba(255, 255, 255, .10);
    --sidebar-line:   rgba(255, 255, 255, .08);

    --footer-bg:      #0b1424;
    --footer-fg:      #9fb3ca;
    --footer-link:    #c3d1e2;
    --footer-dim:     #708aa6;
    --footer-line:    rgba(255, 255, 255, .08);

    --hero-grad:      linear-gradient(140deg, #0a1526 0%, #12365a 55%, #1b5384 100%);
    --auth-grad:      linear-gradient(140deg, #080f1c, #12314f);
    --auth-fg:        rgba(226, 236, 250, .72);
    --ticket-grad:    linear-gradient(135deg, #102a45, #1c5c94);

    --seat-free:      #1e2b3f;
    --seat-free-br:   #64748b;
    --seat-selected:  #22c55e;
    --seat-blocked:   #2c3a52;
    --seat-taken:     #475569;
    --seat-taken-br:  #64748b;
    --seat-mine:      #2d7fc4;
    --seat-driver:    #334155;

    --shadow:         0 1px 3px rgba(0, 0, 0, .50), 0 1px 2px rgba(0, 0, 0, .34);
    --shadow-md:      0 4px 14px rgba(0, 0, 0, .55);
    --shadow-lg:      0 14px 36px rgba(0, 0, 0, .62);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0 0 .5em; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }

code, kbd, pre { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-alt); padding: .12em .4em; border-radius: 4px; border: 1px solid var(--border); }

::selection { background: var(--brand); color: var(--btn-fg); }

:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT DEL PANEL
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    overflow-y: auto;
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--sidebar-line);
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
}
.sidebar__brand:hover { text-decoration: none; }

.sidebar__logo {
    width: 34px; height: 34px;
    background: var(--accent);
    border-radius: 9px;
    display: grid; place-items: center;
    color: var(--brand-dark);
    font-weight: 800;
    font-size: .82rem;
    flex-shrink: 0;
}

.sidebar__role {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--accent);
    font-weight: 600;
    display: block;
    margin-top: 1px;
}

.sidebar__nav { padding: 10px 0 28px; flex: 1; }

.sidebar__group {
    padding: 14px 18px 5px;
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--sidebar-dim);
    font-weight: 700;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    color: var(--sidebar-fg);
    font-size: .89rem;
    border-left: 3px solid transparent;
    transition: background .12s, color .12s;
}
.sidebar__link:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.sidebar__link.is-active {
    background: var(--sidebar-active);
    color: #fff;
    border-left-color: var(--accent);
    font-weight: 600;
}
.sidebar__icon { width: 18px; text-align: center; flex-shrink: 0; opacity: .9; font-size: .95rem; }
.sidebar__badge {
    margin-left: auto;
    background: var(--accent);
    color: var(--brand-dark);
    font-size: .68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}

.main {
    flex: 1;
    margin-left: var(--sidebar-w);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--header-h);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 30;
}

.topbar__title { font-size: 1.02rem; font-weight: 650; margin: 0; }
.topbar__spacer { flex: 1; }

.topbar__user {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 10px; border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--btn-fg);
    display: grid; place-items: center;
    font-size: .74rem; font-weight: 700;
    flex-shrink: 0;
}
.avatar--lg { width: 52px; height: 52px; font-size: 1.05rem; }

.content { padding: 22px; flex: 1; }

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-head__text { flex: 1; min-width: 220px; }
.page-head h1 { margin: 0 0 3px; }
.page-head__sub { color: var(--text-muted); font-size: .89rem; margin: 0; }
.page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.breadcrumb { font-size: .8rem; color: var(--text-soft); margin-bottom: 6px; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb span { margin: 0 5px; }

/* --------------------------------------------------------------------------
   4. TARJETAS Y REJILLAS
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.card__head {
    padding: 13px 18px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
    background: var(--surface-alt);
}
.card__title { margin: 0; font-size: .97rem; font-weight: 650; }
.card__sub { margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); font-weight: 400; }
.card__actions { margin-left: auto; display: flex; gap: 7px; }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }
.card__foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--surface-alt);
    display: flex; align-items: center; gap: 10px;
}

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--sidebar { grid-template-columns: 2fr 1fr; align-items: start; }

/* Tarjetas de estadistica */
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 15px 17px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.stat::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand);
}
.stat--success::before { background: var(--success); }
.stat--warning::before { background: var(--warning); }
.stat--danger::before  { background: var(--danger); }
.stat--accent::before  { background: var(--accent); }

.stat__label {
    font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--text-muted); font-weight: 650; margin-bottom: 5px;
}
.stat__value { font-size: 1.55rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat__meta { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
.stat__meta strong { color: var(--text); }

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--brand);
    color: var(--btn-fg);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: background .13s, box-shadow .13s, opacity .13s;
    white-space: nowrap;
}
.btn:hover { background: var(--brand-light); text-decoration: none; color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--text); }

.btn--accent  { background: var(--accent); color: var(--accent-on); }
.btn--accent:hover { background: var(--accent-dark); color: var(--accent-on); }

.btn--success { background: var(--success); color: var(--btn-fg); }
.btn--success:hover { background: var(--success-hover); }

.btn--danger  { background: var(--danger); color: var(--btn-fg); }
.btn--danger:hover { background: var(--danger-hover); }

.btn--muted   { background: var(--text-muted); color: var(--btn-fg); }
.btn--muted:hover { background: var(--muted-hover); }

.btn--sm { padding: 5px 10px; font-size: .79rem; border-radius: 5px; }
.btn--lg { padding: 11px 22px; font-size: .97rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 6px 9px; }

.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   6. FORMULARIOS
   -------------------------------------------------------------------------- */
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.form-grid--1 { grid-template-columns: 1fr; }
.form-grid--2 { grid-template-columns: repeat(2, 1fr); }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.label {
    font-size: .81rem;
    font-weight: 620;
    color: var(--text-strong);
}
.label .req { color: var(--danger); margin-left: 2px; }

.input, .select, .textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
    font-size: .89rem;
    color: var(--text);
    transition: border-color .13s, box-shadow .13s;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand-light);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled,
.input[readonly] {
    background: var(--surface-alt);
    color: var(--text-muted);
    cursor: not-allowed;
}
.textarea { resize: vertical; min-height: 78px; }
.select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8.5 2 4h8z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field__error { font-size: .78rem; color: var(--danger); font-weight: 500; }
.field__hint  { font-size: .78rem; color: var(--text-muted); }

.check { display: flex; align-items: flex-start; gap: 8px; font-size: .87rem; cursor: pointer; }
.check input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

.input-group { display: flex; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .btn  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.input-prefix {
    display: flex; align-items: center; padding: 0 10px;
    background: var(--surface-alt); border: 1px solid var(--border-strong);
    border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    color: var(--text-muted); font-size: .87rem; font-weight: 600;
}
.input-prefix + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.form-actions {
    display: flex; gap: 9px; flex-wrap: wrap;
    padding-top: 16px; margin-top: 16px;
    border-top: 1px solid var(--border);
}

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
legend {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    font-weight: 700; color: var(--text-muted); padding: 0 0 8px;
    width: 100%; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   7. TABLAS
   -------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .865rem; }
.table th {
    text-align: left;
    padding: 9px 14px;
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}
.table td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--brand-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .nowrap { white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; }
.table__foot td { background: var(--surface-alt); font-weight: 700; border-top: 2px solid var(--border-strong); }

.table--compact th, .table--compact td { padding: 6px 10px; }

.empty {
    padding: 46px 22px;
    text-align: center;
    color: var(--text-muted);
}
.empty__icon { font-size: 2.4rem; opacity: .35; margin-bottom: 10px; }
.empty__title { font-weight: 650; color: var(--text); margin-bottom: 4px; }

/* --------------------------------------------------------------------------
   8. DISTINTIVOS Y AVISOS
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: .73rem;
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}
.badge-success { background: var(--success-soft); color: var(--success-on); }
.badge-warning { background: var(--warning-soft); color: var(--warning-on); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger-on); }
.badge-info    { background: var(--info-soft);    color: var(--info-on); }
.badge-muted   { background: var(--muted-soft);   color: var(--text-muted); }
.badge-brand   { background: var(--brand-soft);   color: var(--brand); }

.code-tag {
    display: inline-block;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .78rem;
    background: var(--brand-soft);
    color: var(--brand);
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.alert {
    display: flex; gap: 11px;
    padding: 12px 15px;
    border-radius: var(--radius);
    margin-bottom: 16px;
    font-size: .885rem;
    border: 1px solid;
    line-height: 1.5;
}
.alert__icon { flex-shrink: 0; font-size: 1.05rem; line-height: 1.35; }
.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: 650; margin-bottom: 2px; }
.alert-success { background: var(--success-soft); border-color: var(--success-line); color: var(--success-on); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-line); color: var(--warning-on); }
.alert-danger  { background: var(--danger-soft);  border-color: var(--danger-line); color: var(--danger-on); }
.alert-info    { background: var(--info-soft);    border-color: var(--info-line); color: var(--info-on); }
.alert ul { margin: 5px 0 0; padding-left: 18px; }

/* --------------------------------------------------------------------------
   9. MAPA DE ASIENTOS (estilo cine)
   -------------------------------------------------------------------------- */
.seatmap {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.bus {
    max-width: 340px;
    margin: 0 auto;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    border-radius: 26px 26px 12px 12px;
    padding: 14px 16px 20px;
    position: relative;
}

.bus__front {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 14px;
    border-bottom: 2px dashed var(--border);
}
.bus__driver {
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--seat-driver); color: #fff;
    display: grid; place-items: center; font-size: 1rem;
}
.bus__label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-soft); font-weight: 700;
}

.bus__rows { display: flex; flex-direction: column; gap: 7px; }

.seat-row { display: flex; align-items: center; gap: 7px; justify-content: center; }
.seat-row__num {
    width: 18px; font-size: .68rem; color: var(--text-soft);
    text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.seat-aisle { width: 22px; flex-shrink: 0; }

.seat {
    width: 40px; height: 40px;
    border-radius: 9px 9px 5px 5px;
    border: 2px solid var(--seat-free-br);
    background: var(--seat-free);
    color: var(--text);
    font-size: .76rem;
    font-weight: 700;
    font-family: inherit;
    display: grid; place-items: center;
    cursor: pointer;
    transition: transform .1s, background .13s, border-color .13s, box-shadow .13s;
    position: relative;
    padding: 0;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.seat:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: var(--shadow-md);
}

.seat--placeholder { border: 2px dashed var(--border); background: transparent; cursor: default; }

.seat.is-selected {
    background: var(--seat-selected);
    border-color: var(--success-hover);
    color: var(--btn-fg);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .22);
}
.seat.is-reservado, .seat.is-ocupado {
    background: var(--seat-taken);
    border-color: var(--seat-taken-br);
    color: #fff;
    cursor: not-allowed;
}
.seat.is-bloqueado {
    background: var(--seat-blocked);
    border-color: var(--border-strong);
    color: var(--text-soft);
    cursor: not-allowed;
}
.seat.is-mine { background: var(--seat-mine); border-color: var(--brand); color: #fff; }
.seat:disabled { cursor: not-allowed; }
.seat:disabled:hover { transform: none; box-shadow: none; }

.seat__tip {
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: var(--tooltip-bg); color: var(--tooltip-fg);
    font-size: .7rem; font-weight: 500;
    padding: 3px 8px; border-radius: 5px;
    white-space: nowrap; opacity: 0; pointer-events: none;
    transition: opacity .13s; z-index: 5;
}
.seat:hover .seat__tip { opacity: 1; }

.seat-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    justify-content: center;
    margin-top: 18px; padding-top: 15px;
    border-top: 1px solid var(--border);
    font-size: .79rem;
    color: var(--text-muted);
}
.seat-legend__item { display: flex; align-items: center; gap: 6px; }
.seat-legend__box {
    width: 17px; height: 17px; border-radius: 5px 5px 3px 3px;
    border: 2px solid var(--seat-free-br); background: var(--seat-free);
}
.seat-legend__box--selected { background: var(--seat-selected); border-color: var(--success-hover); }
.seat-legend__box--taken    { background: var(--seat-taken);    border-color: var(--seat-taken-br); }
.seat-legend__box--blocked  { background: var(--seat-blocked);  border-color: var(--border-strong); }

/* Panel lateral de la compra */
.selection-panel { position: sticky; top: calc(var(--header-h) + 16px); }

.selection-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.selection-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .86rem;
}
.selection-item__seat {
    width: 30px; height: 30px; border-radius: 7px;
    background: var(--brand); color: var(--btn-fg);
    display: grid; place-items: center;
    font-weight: 700; font-size: .76rem; flex-shrink: 0;
}
.selection-item__price { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }

.total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 11px 0; font-size: .89rem;
}
.total-row--grand {
    border-top: 2px solid var(--border-strong);
    margin-top: 6px; padding-top: 13px;
    font-size: 1.16rem; font-weight: 700;
}
.total-row__value { font-variant-numeric: tabular-nums; }

/* Cuenta regresiva */
.countdown {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px;
    background: var(--warning-soft);
    border: 1px solid var(--warning-line);
    border-radius: var(--radius);
    color: var(--warning-on);
    font-size: .85rem;
    margin-bottom: 14px;
}
.countdown__time {
    font-family: var(--mono); font-size: 1.12rem; font-weight: 700;
    font-variant-numeric: tabular-nums; margin-left: auto;
}
.countdown.is-urgent { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-on); }

/* --------------------------------------------------------------------------
   10. BOLETO DIGITAL
   -------------------------------------------------------------------------- */
.ticket {
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 1px solid var(--border);
}

.ticket__head {
    background: var(--ticket-grad);
    color: #fff;
    padding: 20px 24px;
    display: flex; align-items: center; gap: 14px;
}
.ticket__logo {
    width: 46px; height: 46px; border-radius: 11px;
    background: var(--accent); color: var(--accent-on);
    display: grid; place-items: center; font-weight: 800; font-size: .8rem;
    flex-shrink: 0;
}
.ticket__brand { font-size: 1.2rem; font-weight: 700; line-height: 1.15; }
.ticket__tagline { font-size: .76rem; opacity: .85; }
.ticket__folio {
    margin-left: auto; text-align: right;
    font-family: var(--mono); font-size: .84rem; font-weight: 600;
}
.ticket__folio small { display: block; font-size: .66rem; opacity: .8; font-family: var(--font); text-transform: uppercase; letter-spacing: .07em; }

.ticket__route {
    display: flex; align-items: center; gap: 14px;
    padding: 22px 24px;
    border-bottom: 2px dashed var(--border);
}
.ticket__place { flex: 1; min-width: 0; }
.ticket__place small {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .08em; color: var(--text-muted); font-weight: 650;
}
.ticket__place strong { font-size: 1.12rem; display: block; line-height: 1.25; }
.ticket__arrow { color: var(--brand); font-size: 1.3rem; flex-shrink: 0; }

.ticket__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px; padding: 20px 24px;
}
.ticket__cell small {
    display: block; font-size: .68rem; text-transform: uppercase;
    letter-spacing: .07em; color: var(--text-muted); font-weight: 650; margin-bottom: 2px;
}
.ticket__cell strong { font-size: .97rem; }
.ticket__cell--seat strong { font-size: 1.5rem; color: var(--brand); line-height: 1; }

.ticket__qr {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 24px;
    border-top: 2px dashed var(--border);
    background: var(--surface-alt);
}
.ticket__qr-img {
    background: #fff; padding: 8px; border-radius: 9px;
    border: 1px solid var(--border); flex-shrink: 0; line-height: 0;
}
.ticket__qr-text { font-size: .8rem; color: var(--text-muted); min-width: 0; }
.ticket__qr-text strong { color: var(--text); display: block; margin-bottom: 3px; font-size: .87rem; }
.ticket__code {
    font-family: var(--mono); font-size: .68rem;
    word-break: break-all; color: var(--text-soft); margin-top: 5px;
}

.ticket__terms {
    padding: 15px 24px; font-size: .76rem; color: var(--text-muted);
    border-top: 1px solid var(--border); line-height: 1.5;
}

.ticket--void { opacity: .72; }
.ticket--void .ticket__head { background: linear-gradient(135deg, #7f1d1d, #b91c1c); }

.stamp {
    display: inline-block; padding: 5px 16px;
    border: 3px solid var(--danger); color: var(--danger);
    font-weight: 800; text-transform: uppercase; letter-spacing: .14em;
    border-radius: 7px; transform: rotate(-5deg); font-size: .95rem;
}
.stamp--ok { border-color: var(--success); color: var(--success); }

/* --------------------------------------------------------------------------
   11. SITIO PUBLICO
   -------------------------------------------------------------------------- */
.public-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 30;
    box-shadow: var(--shadow);
}
.public-header__inner {
    max-width: 1160px; margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; gap: 20px;
}
.public-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.public-nav a {
    padding: 7px 12px; border-radius: var(--radius-sm);
    color: var(--text); font-size: .89rem; font-weight: 550;
}
.public-nav a:hover { background: var(--surface-alt); text-decoration: none; }
.public-nav a.is-active { color: var(--brand); background: var(--brand-soft); font-weight: 650; }

.brand-mark { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 750; font-size: 1.12rem; }
.brand-mark:hover { text-decoration: none; }
.brand-mark__logo {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--brand); color: var(--btn-fg);
    display: grid; place-items: center; font-weight: 800; font-size: .78rem;
}

.container { max-width: 1160px; margin: 0 auto; padding: 26px 20px; }
.container--narrow { max-width: 760px; }
.container--wide   { max-width: 1360px; }

.hero {
    background: var(--hero-grad);
    color: #fff;
    padding: 52px 20px 60px;
    text-align: center;
    position: relative;
}
.hero h1 { font-size: 2.1rem; margin-bottom: 10px; color: #fff; letter-spacing: -.025em; }
.hero p { font-size: 1.03rem; opacity: .92; max-width: 620px; margin: 0 auto; }

.search-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 18px;
    max-width: 900px;
    margin: -34px auto 0;
    position: relative;
    z-index: 5;
}
.search-box__grid {
    display: grid; gap: 12px;
    grid-template-columns: 1fr 1fr 170px auto;
    align-items: end;
}

.trip-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex; align-items: center; gap: 18px;
    box-shadow: var(--shadow);
    transition: box-shadow .14s, border-color .14s;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.trip-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.trip-card__time { text-align: center; flex-shrink: 0; min-width: 62px; }
.trip-card__time strong { font-size: 1.28rem; display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.trip-card__time small  { font-size: .73rem; color: var(--text-muted); }

.trip-card__route { flex: 1; min-width: 190px; }
.trip-card__route strong { font-size: 1rem; display: block; }
.trip-card__route small  { color: var(--text-muted); font-size: .81rem; }

.trip-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .81rem; color: var(--text-muted); }

.trip-card__price { text-align: right; flex-shrink: 0; }
.trip-card__price strong { font-size: 1.4rem; color: var(--brand); display: block; line-height: 1.1; }
.trip-card__price small  { font-size: .73rem; color: var(--text-muted); }

.public-footer {
    background: var(--footer-bg); color: var(--footer-fg);
    padding: 34px 20px 22px; margin-top: 46px;
    font-size: .86rem;
}
.public-footer__inner { max-width: 1160px; margin: 0 auto; }
.public-footer a { color: var(--footer-link); }
.public-footer__bottom {
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--footer-line);
    font-size: .79rem; color: var(--footer-dim);
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   12. AUTENTICACION
   -------------------------------------------------------------------------- */
.auth {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 26px 18px;
    background: var(--auth-grad);
}
.auth__card {
    width: 100%; max-width: 410px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px;
}
.auth__brand { text-align: center; margin-bottom: 22px; }
.auth__logo {
    width: 58px; height: 58px; border-radius: 15px;
    background: var(--brand); color: var(--btn-fg);
    display: grid; place-items: center; margin: 0 auto 12px;
    font-weight: 800; font-size: 1.05rem;
}
.auth__title { font-size: 1.28rem; margin-bottom: 3px; }
.auth__sub { color: var(--text-muted); font-size: .87rem; margin: 0; }
.auth__foot { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--text-muted); }

.demo-users {
    margin-top: 18px; padding: 12px 14px;
    background: var(--surface-alt); border: 1px dashed var(--border-strong);
    border-radius: var(--radius); font-size: .78rem; color: var(--text-muted);
}
.demo-users strong { color: var(--text); display: block; margin-bottom: 5px; font-size: .8rem; }
.demo-users code { font-size: .74rem; }
.demo-users div { margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   13. CALENDARIO
   -------------------------------------------------------------------------- */
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th {
    padding: 9px 5px; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); font-weight: 700;
    border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.calendar td {
    border: 1px solid var(--border);
    height: 96px; vertical-align: top; padding: 5px;
    width: 14.28%;
}
.calendar td.is-today { background: var(--brand-soft); }
.calendar td.is-outside { background: var(--surface-alt); opacity: .55; }
.calendar__day { font-size: .76rem; font-weight: 700; color: var(--text-muted); margin-bottom: 3px; }
.calendar__event {
    display: block; font-size: .68rem; padding: 2px 5px;
    border-radius: 4px; margin-bottom: 2px;
    color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendar__event:hover { text-decoration: none; opacity: .88; }

.timeline-bar {
    height: 22px; border-radius: 5px; color: #fff;
    font-size: .68rem; display: flex; align-items: center;
    padding: 0 7px; overflow: hidden; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. UTILIDADES
   -------------------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }
.small { font-size: .81rem; }
.tiny  { font-size: .74rem; }
.bold  { font-weight: 650; }
.mono  { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .05em; }

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-brand   { color: var(--brand); }

.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 5px; }  .gap-2 { gap: 9px; }  .gap-3 { gap: 14px; } .gap-4 { gap: 20px; }
.flex-1 { flex: 1; min-width: 0; }

.mt-0 { margin-top: 0; }    .mt-1 { margin-top: 6px; }  .mt-2 { margin-top: 12px; }
.mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 12px; }
.mb-3 { margin-bottom: 18px; } .mb-4 { margin-bottom: 26px; }

.w-full { width: 100%; }
.hidden { display: none !important; }

.divider { height: 1px; background: var(--border); margin: 16px 0; }

.filters {
    display: grid; gap: 11px;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    align-items: end;
}

.pagination {
    display: flex; gap: 5px; align-items: center;
    justify-content: center; flex-wrap: wrap;
    padding: 14px; border-top: 1px solid var(--border);
}
.pagination a, .pagination span {
    padding: 6px 11px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); font-size: .84rem;
    color: var(--text); background: var(--surface);
    min-width: 34px; text-align: center;
}
.pagination a:hover { background: var(--surface-alt); text-decoration: none; }
.pagination .is-current { background: var(--brand); color: var(--btn-fg); border-color: var(--brand); font-weight: 650; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }
.pagination__info { color: var(--text-muted); font-size: .82rem; margin-right: auto; padding-left: 5px; }

.progress {
    height: 7px; background: var(--border); border-radius: 20px; overflow: hidden;
}
.progress__bar { height: 100%; background: var(--brand); border-radius: 20px; transition: width .3s; }
.progress__bar--success { background: var(--success); }
.progress__bar--warning { background: var(--warning); }
.progress__bar--danger  { background: var(--danger); }

.dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .88rem; margin: 0; }
.dl dt { color: var(--text-muted); font-weight: 550; }
.dl dd { margin: 0; font-weight: 550; }

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a {
    padding: 9px 15px; font-size: .885rem; font-weight: 570;
    color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 650; }

/* --------------------------------------------------------------------------
   15. BOTONES DE LA BARRA SUPERIOR
   -------------------------------------------------------------------------- */
.menu-toggle,
.theme-toggle {
    width: 38px; height: 38px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    place-items: center;
    transition: background .13s, border-color .13s;
}
.menu-toggle  { display: none; }
.theme-toggle { display: grid; }
.menu-toggle:hover,
.theme-toggle:hover { background: var(--surface-alt); border-color: var(--border-strong); }

/**
 * El boton del tema lleva los tres iconos dentro y solo se ensena el que toca.
 * Asi no hace falta JavaScript para pintar el icono correcto al cargar: lo
 * decide el atributo data-theme del <html>, que se pone antes de dibujar.
 */
.theme-toggle__icon { display: none; }
:root:not([data-theme])   .theme-toggle__icon--auto  { display: block; }
:root[data-theme="light"] .theme-toggle__icon--light { display: block; }
:root[data-theme="dark"]  .theme-toggle__icon--dark  { display: block; }

/* En el sitio publico y en el acceso va suelto, sin barra que lo sostenga */
.theme-toggle--flotante {
    position: fixed;
    right: 14px;
    bottom: 14px;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 45;
    width: 42px; height: 42px;
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   15b. RESPONSIVE
   --------------------------------------------------------------------------
   De la pantalla grande al telefono. Los cortes:

     1080  tablet acostada  - las rejillas de 3 y 4 columnas bajan a 2
      900  tablet parada    - la barra superior empieza a apretarse
      820  movil            - el menu lateral se esconde tras el boton
      640  telefono         - una sola columna y campos de 16px (sin zoom en iOS)
      420  telefono chico   - botones a lo ancho y asientos mas juntos

   Ademas, al final: pantallas tactiles (areas de toque), telefonos con
   muesca (safe-area) y quien pidio menos animacion.
   -------------------------------------------------------------------------- */

/* Nada empuja la pagina a lo ancho: lo que no cabe, se desplaza por dentro */
.app, .main, .content, .container { min-width: 0; max-width: 100%; }

@media (max-width: 1080px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--sidebar { grid-template-columns: 1fr; }
    .selection-panel { position: static; }
    .search-box__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .topbar { gap: 9px; padding: 0 14px; }
    .topbar__title {
        font-size: .95rem;
        min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Del recuadro del usuario se queda solo la inicial */
    .topbar__user { padding: 0; border: 0; background: transparent; }
    .topbar__user .small { display: none; }

    .public-header__inner { flex-wrap: wrap; padding: 10px 16px; gap: 12px; }
    .public-nav { margin-left: 0; width: 100%; }
}

@media (max-width: 820px) {
    :root { --sidebar-w: 0px; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        width: 252px; flex-basis: 252px;
        box-shadow: var(--shadow-lg);
    }
    .sidebar.is-open { transform: translateX(0); }
    .main { margin-left: 0; }
    .menu-toggle { display: grid !important; }

    .sidebar-backdrop {
        position: fixed; inset: 0; background: var(--overlay); z-index: 35;
    }

    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .form-grid, .form-grid--2 { grid-template-columns: 1fr; }
    .content { padding: 15px; }
    .container { padding: 20px 16px; }
    .hero { padding: 40px 16px 50px; }
    .hero h1 { font-size: 1.6rem; }
    .search-box { margin-top: -26px; padding: 15px; }
    .search-box__grid { grid-template-columns: 1fr; }
    .trip-card { flex-direction: column; align-items: flex-start; }
    .trip-card__price { text-align: left; }
    .ticket__route { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ticket__arrow { transform: rotate(90deg); }
    .table th, .table td { padding: 8px 10px; }
}

@media (max-width: 640px) {
    /* En iOS, tocar un campo de menos de 16px hace que el navegador acerque
       la pagina y ya no la regresa. Con 16px se queda quieta. */
    .input, .select, .textarea { font-size: 16px; padding: 10px 12px; }
    .select { background-position: right 11px center; }

    .topbar { padding: 0 10px; gap: 7px; }
    .topbar__ayuda { display: none; }
    /* El chip del area se queda solo con su icono. Lleva .topbar delante
       porque la regla original esta mas abajo (seccion 16) y, a igualdad
       de fuerza, gana la ultima: hay que pesar mas, no solo venir despues. */
    .topbar .topbar__area { font-size: 0; gap: 0; padding: 5px; }
    .topbar .topbar__area .topbar__area-icon { font-size: .66rem; }

    .content   { padding: 12px; }
    .container { padding: 18px 14px; }

    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.02rem; }

    .card { margin-bottom: 14px; }
    .card__head, .card__foot { padding: 11px 14px; }
    .card__body { padding: 14px; }

    .page-head { gap: 10px; margin-bottom: 14px; }
    .page-head__actions { width: 100%; }
    .page-head__actions .btn { flex: 1 1 auto; justify-content: center; }

    .stat { padding: 13px 14px; }
    .stat__value { font-size: 1.35rem; }

    .filters { grid-template-columns: 1fr 1fr; }
    .filters .field--full { grid-column: 1 / -1; }

    .form-actions .btn { flex: 1 1 auto; justify-content: center; }

    .table { font-size: .82rem; }
    .table th, .table td { padding: 7px 9px; }

    /* La lista de datos deja de ser dos columnas: etiqueta arriba, dato abajo */
    .dl { grid-template-columns: 1fr; gap: 0; }
    .dl dt { margin-top: 9px; font-size: .78rem; }
    .dl dt:first-child { margin-top: 0; }

    /* Las pestanas se desplazan de lado en vez de amontonarse */
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { white-space: nowrap; }

    .calendar td { height: 64px; }
    .calendar__day { font-size: .7rem; }
    .calendar__event { font-size: .6rem; }

    .seatmap { padding: 12px; border-radius: var(--radius); }
    .bus { padding: 12px 10px 16px; }
    .seat-legend { gap: 10px; font-size: .74rem; }

    .auth { padding: 18px 14px; }
    .auth__card { padding: 22px 18px; }

    .ticket__head, .ticket__route, .ticket__grid, .ticket__qr, .ticket__terms {
        padding-left: 16px; padding-right: 16px;
    }
    .ticket__qr { flex-direction: column; align-items: flex-start; gap: 14px; }

    .public-header__inner { padding: 9px 12px; }
    .public-nav { gap: 3px; }

    .empty { padding: 32px 16px; }
    .pagination__info { width: 100%; text-align: center; margin: 0 0 6px; padding: 0; }

    .galeria { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .mapakm__lienzo { height: 240px; }
}

@media (max-width: 420px) {
    .filters, .grid--auto, .form-grid { grid-template-columns: 1fr; }

    .btn-group { display: flex; width: 100%; }
    .btn-group .btn { flex: 1 1 auto; justify-content: center; }

    .bus { max-width: 100%; }
    .seat { width: 34px; height: 34px; font-size: .7rem; }
    .seat-aisle { width: 14px; }
    .seat-row { gap: 5px; }

    .stat__value { font-size: 1.25rem; }
    .topbar { padding: 0 8px; gap: 6px; }
    /* Ya no cabe, y de todos modos el titulo se repite en el <h1> de abajo */
    .topbar__title { display: none; }
    .hero h1 { font-size: 1.4rem; }
    .auth__card { padding: 20px 15px; }
}

/* Dedo en lugar de raton: se agrandan las areas de toque y se apagan los
   efectos de "pasar por encima", que en tactil se quedan pegados. */
@media (hover: none) and (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn--sm { min-height: 33px; }
    .sidebar__link { padding: 12px 18px; }
    .tabs a { padding: 11px 15px; }
    .pagination a, .pagination span {
        min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
    }
    .table tbody tr:hover { background: transparent; }
    .trip-card:hover { box-shadow: var(--shadow); border-color: var(--border); }
    .area-card:hover { transform: none; box-shadow: var(--shadow); }
    .seat:hover:not(:disabled) { transform: none; box-shadow: none; border-color: var(--seat-free-br); }
}

/* Telefonos con muesca o barra de gestos: el contenido no se mete debajo */
@supports (padding: max(0px)) {
    @media (max-width: 820px) {
        .topbar {
            padding-left:  max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right));
        }
        .content {
            padding-left:   max(12px, env(safe-area-inset-left));
            padding-right:  max(12px, env(safe-area-inset-right));
            padding-bottom: max(12px, env(safe-area-inset-bottom));
        }
        .container {
            padding-left:  max(14px, env(safe-area-inset-left));
            padding-right: max(14px, env(safe-area-inset-right));
        }
        .sidebar { padding-left: env(safe-area-inset-left); }
        .public-footer { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
    }
}

/* Quien pidio menos movimiento en su telefono, menos movimiento recibe */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   16. AREAS DEL NEGOCIO
   --------------------------------------------------------------------------
   Cada linea de negocio (gruas, hoteles, transporte de turismo, viajes,
   trailers, urbanos...) tiene su color, definido en config/areas.php y
   entregado a la tarjeta con la variable --area-color.
   -------------------------------------------------------------------------- */

.area-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 150px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 3px solid var(--area-color, var(--brand));
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    transition: transform .12s, box-shadow .12s;
}
.area-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: var(--text);
}

.area-card__top { display: flex; gap: 12px; align-items: flex-start; }

.area-card__icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--area-color, var(--brand));
    color: #fff;
    font-weight: 800;
    font-size: .95rem;
}

.area-card__title { font-weight: 650; font-size: 1rem; line-height: 1.25; }
.area-card__sub   { font-size: .8rem; color: var(--text-muted); margin-top: 3px; }

.area-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
    font-size: .8rem;
    color: var(--text-muted);
}
.area-card__dato strong { color: var(--text); font-size: 1.05rem; }
.area-card__entrar { color: var(--area-color, var(--brand)); font-weight: 600; white-space: nowrap; }

/* Encabezado del area en el menu lateral */
.sidebar__area {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 12px 6px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--sidebar-hover);
    border-left: 3px solid var(--area-color, var(--accent));
    color: #fff;
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.25;
}
.sidebar__area-icon {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 7px;
    background: var(--area-color, var(--accent));
    color: #fff;
    font-size: .78rem;
    font-weight: 800;
}
.sidebar__area-label {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sidebar-soft);
    font-weight: 700;
}
.sidebar__link--otra { color: var(--sidebar-soft); font-size: .84rem; }
.sidebar__empty {
    margin: 4px 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--sidebar-hover);
    color: var(--sidebar-soft);
    font-size: .76rem;
    line-height: 1.45;
}

/* Chip del area en la barra superior */
.topbar__area {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 6px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-alt);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}
.topbar__area:hover { text-decoration: none; border-color: var(--area-color, var(--brand)); }
.topbar__area-icon {
    width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 6px;
    background: var(--area-color, var(--brand));
    color: #fff;
    font-size: .66rem;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   17. MAPA DE KILOMETROS (cotizadores)
   --------------------------------------------------------------------------
   El mapa que se usa en los cotizadores de gruas, autobuses y trailers para
   trazar el recorrido y llevar los kilometros reales a los campos del
   formulario. Ver partials/mapa_km.php y assets/js/mapa-km.js.
   -------------------------------------------------------------------------- */

.mapakm { display: flex; flex-direction: column; gap: 12px; }

.mapakm__lienzo {
    position: relative;
    height: 340px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
}
.mapakm__lienzo .mapboxgl-canvas { outline: none; }

/**
 * Aviso que se pinta encima del mapa mientras carga.
 *
 * Dos cuidados que costaron un error:
 *   1. pointer-events: none  -> el aviso NUNCA se come los clics del mapa.
 *   2. La regla [hidden]     -> "display: grid" le gana al display:none que
 *      trae el navegador para el atributo hidden, asi que hay que apagarlo
 *      aqui a mano o el aviso se queda pegado para siempre.
 */
.mapakm__aviso {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface-alt);
    pointer-events: none;
    z-index: 3;
    transition: opacity .25s;
}
.mapakm__aviso[hidden] { display: none !important; }

/* Mismo cuidado con el renglon de error */
.mapakm__error[hidden],
.mapakm__paso[hidden] { display: none !important; }

/* Los tres pasos, siempre a la vista */
.mapakm__pasos {
    margin: 0;
    padding: 12px 14px 12px 34px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    font-size: .84rem;
    line-height: 1.55;
    color: var(--text);
}
.mapakm__pasos li + li { margin-top: 5px; }

/* El renglon que dice que toca hacer AHORA */
.mapakm__paso {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: var(--radius-sm);
    background: var(--warning-soft);
    border: 1px solid var(--warning-line);
    font-size: .88rem;
    font-weight: 600;
    color: var(--warning-on);
}
.mapakm__paso--listo {
    background: var(--success-soft);
    border-color: var(--success-line);
    color: var(--success-on);
}
.mapakm__paso-num {
    width: 26px; height: 26px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--warning);
    color: var(--btn-fg);
    font-size: .8rem;
    font-weight: 800;
}
.mapakm__paso--listo .mapakm__paso-num { background: var(--success); }

/* El bloque de "pasar los kilometros" */
.mapakm__aplicar {
    padding: 12px 13px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
}
.mapakm__aplicar-titulo {
    font-size: .82rem;
    font-weight: 700;
    margin-bottom: 9px;
    color: var(--text);
}
.mapakm__aplicar .mapakm__nota { margin-top: 8px; }

.mapakm__barra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.mapakm__buscar { flex: 1 1 200px; min-width: 160px; }

.mapakm__paradas { display: flex; flex-direction: column; gap: 6px; }

.mapakm__parada {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    font-size: .82rem;
}
.mapakm__parada-num {
    width: 22px; height: 22px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--btn-fg);
    font-size: .68rem;
    font-weight: 700;
}
.mapakm__parada-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapakm__parada-km { color: var(--text-muted); font-size: .76rem; white-space: nowrap; }

.mapakm__totales {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.mapakm__total {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.mapakm__total-label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 700;
}
.mapakm__total-valor { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }

.mapakm__nota { font-size: .76rem; color: var(--text-muted); line-height: 1.5; }
.mapakm__error {
    padding: 9px 11px;
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger-on);
    font-size: .79rem;
}

@media (max-width: 640px) {
    .mapakm__lienzo { height: 260px; }
}

/* Paseos en destino (cotizador de autobuses): el pin lleva "dia.orden" y el
   color del dia, el mismo de la linea de su ruta. Ver js/paseos-autobuses.js. */
.paseos__pin {
    min-width: 30px;
    height: 22px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    cursor: grab;
}

/* Casetas ($) y gasolineras (G) sobre la ruta. Ver js/mapa-km.js. */
.mapakm__pin {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
}
.mapakm__pin--caseta { background: #b45309; border-radius: 4px; }
.mapakm__pin--gas    { background: #15803d; }
.mapakm__ver { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mapakm__popup { font-size: .78rem; color: #1f2937; line-height: 1.4; }

/* --------------------------------------------------------------------------
   18. GUIA EN PANTALLA
   --------------------------------------------------------------------------
   La tarjeta "Como se usa esta pantalla" que sale arriba del contenido en
   todo el panel. El texto sale de config/ayuda.php.
   -------------------------------------------------------------------------- */

.ayuda {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    overflow: hidden;
}

.ayuda__cabeza {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ayuda__cabeza::-webkit-details-marker { display: none; }
.ayuda__cabeza:hover { background: var(--surface-alt); }

.ayuda__icono {
    width: 24px; height: 24px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: var(--btn-fg);
    font-size: .85rem;
    font-weight: 800;
}

.ayuda__titulo {
    font-weight: 650;
    font-size: .95rem;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.ayuda__cerrar {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-soft);
    font-weight: 700;
    white-space: nowrap;
}
.ayuda:not([open]) .ayuda__cerrar { color: var(--brand); }

/* La etiqueta dice "ocultar" cuando esta abierta y "ver los pasos" cuando no */
.ayuda[open]      .ayuda__cerrar-ver     { display: none; }
.ayuda:not([open]) .ayuda__cerrar-ocultar { display: none; }

.ayuda__cuerpo {
    padding: 0 16px 16px 51px;
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text);
}

.ayuda__resumen { margin: 0 0 12px; color: var(--text); }

.ayuda__bloque { margin-bottom: 12px; }
.ayuda__bloque-titulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 5px;
}

.ayuda__pasos {
    margin: 0;
    padding-left: 20px;
}
.ayuda__pasos li { margin-bottom: 4px; }
.ayuda__pasos li::marker { font-weight: 700; color: var(--brand); }

.ayuda__ojo,
.ayuda__listo {
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    margin-top: 8px;
}
.ayuda__ojo   { background: var(--warning-soft); color: var(--warning-on); }
.ayuda__listo { background: var(--success-soft); color: var(--success-on); }

@media (max-width: 640px) {
    .ayuda__cuerpo { padding: 0 14px 14px; }
}

/* --------------------------------------------------------------------------
   19. FOTOS DE LAS UNIDADES EN VENTA
   --------------------------------------------------------------------------
   La galeria de la ficha y la miniatura de los listados. Las fotos vienen de
   camaras y telefonos distintos, asi que ninguna tiene la misma proporcion:
   se recortan con object-fit para que la cuadricula no se desmorone, y al
   abrirlas se ve la foto completa.
   -------------------------------------------------------------------------- */
.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.galeria__item {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-alt);
}

.galeria__item--portada { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.galeria__item img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: var(--border);
}

.galeria__item figcaption {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 6px 8px;
    min-height: 28px;
}

.galeria__acciones {
    display: flex;
    gap: 6px;
    padding: 0 8px 8px;
}

.galeria__acciones form { flex: 1; }
.galeria__acciones .btn { width: 100%; }

/* Miniatura de los listados */
.thumb {
    display: block;
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-alt);
}

.thumb--vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: .75rem;
}

/* --------------------------------------------------------------------------
   20. IMPRESION
   -------------------------------------------------------------------------- */
@media print {
    /**
     * El papel siempre es blanco: aunque la pantalla este en modo oscuro,
     * al imprimir se vuelve a la paleta clara. Sin esto saldrian hojas con
     * letra clara sobre blanco, es decir, en blanco.
     */
    :root,
    :root:not([data-theme="light"]),
    :root[data-theme="dark"] {
        color-scheme: light;
        --bg: #fff; --surface: #fff; --surface-alt: #fff;
        --border: #ccc; --border-strong: #999;
        --text: #000; --text-strong: #222; --text-muted: #444; --text-soft: #666;
        --muted-soft: #f1f5f9;
        --brand: #0f4c81; --brand-dark: #0a3559; --brand-light: #1a6cb0; --brand-soft: #e8f1f9;
        --btn-fg: #fff; --accent: #f5a524; --accent-on: #3a2606;
        --success: #16a34a; --success-soft: #dcfce7; --success-line: #86efac; --success-on: #15803d;
        --warning: #d97706; --warning-soft: #fef3c7; --warning-line: #fcd34d; --warning-on: #b45309;
        --danger:  #dc2626; --danger-soft:  #fee2e2; --danger-line:  #fca5a5; --danger-on:  #b91c1c;
        --info:    #0284c7; --info-soft:    #e0f2fe; --info-line:    #7dd3fc; --info-on:    #0369a1;
        --ticket-grad: linear-gradient(135deg, #0a3559, #1a6cb0);
        --shadow: none; --shadow-md: none; --shadow-lg: none;
    }

    .sidebar, .topbar, .public-header, .public-footer, .ayuda,
    .no-print, .btn, .pagination, .filters, .theme-toggle { display: none !important; }

    body { background: #fff; color: #000; font-size: 12px; }
    .main { margin-left: 0; }
    .content, .container { padding: 0; }
    .card, .ticket { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
    .ticket { max-width: 100%; }
    .ticket__head { background: var(--brand-dark) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    a[href]::after { content: ''; }
    .page-break { page-break-after: always; }
}

/* ==========================================================================
   MOSAICO DE HABITACIONES  (panel del hotel)
   --------------------------------------------------------------------------
   Una tarjeta por cuarto, del color de su estado, para verse de lejos desde
   el mostrador. El color carga la informacion; el texto solo la confirma, por
   eso cada tarjeta escribe su estado con letras ademas de pintarse.
   ========================================================================== */

.cuartos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
    gap: 12px;
}

.cuarto {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 132px;
    padding: 12px 12px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    color: #fff;
    text-decoration: none;
    transition: transform .12s, box-shadow .12s;
}

.cuarto:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    text-decoration: none;
    color: #fff;
}

.cuarto__num   { font-size: 1.3rem; font-weight: 750; line-height: 1.1; letter-spacing: -.02em; }
.cuarto__tipo  { font-size: .74rem; opacity: .92; line-height: 1.25; }
.cuarto__icono { font-size: 1.6rem; line-height: 1; opacity: .55; margin: 2px 0; }

.cuarto__estado {
    margin-top: auto;
    font-size: .68rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* La ventana de disponibilidad: de que fecha a que fecha esta libre. */
.cuarto__fechas {
    font-size: .68rem;
    line-height: 1.3;
    opacity: .95;
    background: rgba(0, 0, 0, .16);
    border-radius: 5px;
    padding: 4px 6px;
}

.cuarto__aviso {
    position: absolute;
    top: 8px; right: 8px;
    font-size: .6rem;
    font-weight: 750;
    background: rgba(255, 255, 255, .22);
    border-radius: 20px;
    padding: 2px 7px;
}

/* Los estados. Se usan los mismos colores que los badges del resto del panel. */
.cuarto--libre         { background: #16a34a; }
.cuarto--sucia         { background: #ca8a04; }
.cuarto--reservada     { background: #0284c7; }
.cuarto--ocupada       { background: #dc2626; }
.cuarto--mantenimiento { background: #7c3aed; }
.cuarto--fuera         { background: #64748b; }

/* En modo oscuro se bajan un punto para que no deslumbren. */
:root[data-theme="dark"] .cuarto--libre         { background: #15803d; }
:root[data-theme="dark"] .cuarto--sucia         { background: #a16207; }
:root[data-theme="dark"] .cuarto--reservada     { background: #0369a1; }
:root[data-theme="dark"] .cuarto--ocupada       { background: #b91c1c; }
:root[data-theme="dark"] .cuarto--mantenimiento { background: #6d28d9; }
:root[data-theme="dark"] .cuarto--fuera         { background: #475569; }

/* La leyenda de colores que va arriba del mosaico. */
.leyenda { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.leyenda__item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--text-muted);
}

.leyenda__color {
    width: 13px; height: 13px; border-radius: 4px; display: inline-block;
}


/* ==========================================================================
   GRAFICAS
   --------------------------------------------------------------------------
   Se dibujan con SVG en linea, sin librerias: el proyecto no usa dependencias
   externas y una grafica de barras no justifica la primera.

   Los colores salen de las variables del tema, asi que la grafica se ve bien
   en claro y en oscuro sin escribir dos veces nada.
   ========================================================================== */

.grafica { width: 100%; overflow-x: auto; }

.grafica svg { display: block; width: 100%; height: auto; min-width: 420px; }

.grafica__rejilla  { stroke: var(--border); stroke-width: 1; }
.grafica__eje      { fill: var(--text-muted); font-size: 10px; }
.grafica__etiqueta { fill: var(--text-muted); font-size: 10px; text-anchor: middle; }

.grafica__barra          { fill: var(--brand); }
.grafica__barra--entrada { fill: var(--success); }
.grafica__barra--salida  { fill: var(--danger); }
.grafica__barra:hover    { opacity: .78; }

.grafica__linea { fill: none; stroke: var(--brand); stroke-width: 2; }
.grafica__area  { fill: var(--brand); opacity: .12; }
.grafica__punto { fill: var(--brand); }

.grafica__valor { fill: var(--text); font-size: 9px; text-anchor: middle; font-weight: 600; }

.grafica-leyenda {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: .8rem; color: var(--text-muted); margin-top: 6px;
}

.grafica-leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.grafica-leyenda__color { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.grafica-vacia {
    display: grid; place-items: center; min-height: 140px;
    color: var(--text-muted); font-size: .86rem;
}

/* ==========================================================================
   PUNTO DE VENTA
   --------------------------------------------------------------------------
   Dos columnas en pantalla grande: a la izquierda se busca, a la derecha esta
   el carrito. En telefono el carrito pasa a ser una hoja que sube desde abajo,
   y mientras tanto se ve una barra con el total.

   Las medidas estan pensadas para dedos, no para raton: los botones del
   mostrador se tocan de pie y con prisa.
   ========================================================================== */

.pos {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 400px);
    gap: 16px;
    align-items: start;
}

.pos__izq { min-width: 0; }

/* ---------------- Buscador ---------------- */

.pos__buscador {
    display: flex; gap: 8px; margin-bottom: 12px;
    position: sticky; top: 0; z-index: 5;
    background: var(--bg); padding: 4px 0;
}

.pos__input { flex: 1; font-size: 1.05rem; height: 52px; font-weight: 600; }

.pos__escanear {
    height: 52px; padding: 0 16px; display: inline-flex;
    align-items: center; gap: 8px; white-space: nowrap;
}

/* ---------------- Resultados de la busqueda ---------------- */

.pos__resultados {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; margin-bottom: 14px;
    max-height: 340px; overflow-y: auto;
}

.pos__resultado {
    display: grid; grid-template-columns: 1fr auto;
    gap: 2px 12px; width: 100%; text-align: left;
    padding: 11px 14px; border: 0; border-bottom: 1px solid var(--border);
    background: transparent; cursor: pointer; color: var(--text);
}

.pos__resultado:last-child { border-bottom: 0; }
.pos__resultado:hover, .pos__resultado:focus { background: var(--surface-alt); }

.pos__resultado-nombre  { font-weight: 600; }
.pos__resultado-meta    { grid-column: 1; font-size: .74rem; color: var(--text-muted); }
.pos__resultado-precio  { grid-row: 1 / 3; align-self: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.pos__resultado-precio small { font-weight: 400; color: var(--text-muted); }
.pos__resultado--vacio  { color: var(--text-muted); cursor: default; display: block; }

/* ---------------- Botones rapidos ---------------- */

.pos__rapidos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 8px;
}

.pos__rapido {
    --rapido-color: var(--brand);
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 6px; min-height: 76px; padding: 10px 12px;
    border: 1px solid var(--border); border-left: 4px solid var(--rapido-color);
    border-radius: 11px; background: var(--surface);
    cursor: pointer; text-align: left; color: var(--text);
    transition: transform .06s ease, box-shadow .12s ease;
}

.pos__rapido:hover  { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.pos__rapido:active { transform: scale(.97); }

.pos__rapido-nombre { font-weight: 600; font-size: .86rem; line-height: 1.25; }
.pos__rapido-precio { font-weight: 700; color: var(--rapido-color); font-variant-numeric: tabular-nums; }

/* ---------------- Ultimos tickets ---------------- */

.pos__ultimas { margin-top: 18px; }

.pos__ultima {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 7px 10px; border-bottom: 1px solid var(--border);
    font-size: .82rem; color: var(--text);
}

.pos__ultima:hover { background: var(--surface-alt); }

/* ---------------- Carrito ---------------- */

.pos__der {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 14px;
    display: flex; flex-direction: column;
    position: sticky; top: 12px; max-height: calc(100vh - 110px);
}

.pos__carrito-cabeza {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}

.pos__cerrar-carrito { display: none; }

.pos__turno { padding: 6px 0; }

.pos__lineas { flex: 1; overflow-y: auto; margin: 8px -4px; padding: 0 4px; min-height: 90px; }

.pos__vacio { display: grid; place-items: center; min-height: 140px; text-align: center; }

.pos__linea {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border);
}

.pos__linea-datos   { min-width: 0; flex: 1; }
.pos__linea-nombre  { font-weight: 600; font-size: .9rem; }
.pos__linea-detalle { font-size: .76rem; color: var(--text-muted); margin-top: 2px; }
.pos__linea-acciones{ display: flex; align-items: center; gap: 6px; }
.pos__linea-total   { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }

.pos__paso {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--surface-alt);
    cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--text);
}

.pos__paso:active { background: var(--muted-soft); }

.pos__quitar {
    width: 28px; height: 28px; border: 0; border-radius: 8px;
    background: transparent; color: var(--danger); cursor: pointer; font-size: 1.1rem;
}

.pos__quitar:hover { background: var(--danger-soft); }

.pos__totales { border-top: 1px solid var(--border); padding-top: 10px; }

.pos__total .total-row__value { font-size: 1.7rem; font-weight: 800; }

.pos__cobrar { margin-top: 10px; min-height: 56px; font-size: 1.1rem; }

/* ---------------- Barra de telefono ---------------- */

.pos__barra {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border: 0;
    background: var(--brand); color: var(--btn-fg);
    font-size: .95rem; font-weight: 600; cursor: pointer;
    box-shadow: 0 -2px 14px rgba(0,0,0,.18);
}

.pos__barra-total { font-size: 1.25rem; font-weight: 800; }
.pos__barra-ver   { font-size: .78rem; opacity: .85; }

/* ==========================================================================
   CUADROS DEL PUNTO DE VENTA
   ========================================================================== */

.pos-modal {
    position: fixed; inset: 0; z-index: 60;
    background: var(--overlay);
    display: grid; place-items: center; padding: 16px;
    overflow-y: auto;
}

.pos-modal__caja {
    background: var(--surface); border-radius: 16px;
    width: 100%; max-width: 440px; padding: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.3);
    max-height: calc(100vh - 32px); overflow-y: auto;
}

.pos-modal__caja--ancha { max-width: 560px; }
.pos-modal__caja--exito { max-width: 380px; text-align: center; }

.pos-modal__cabeza {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}

.pos-modal__cerrar {
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    cursor: pointer; color: var(--text-muted); padding: 0 4px;
}

.pos-sin-scroll { overflow: hidden; }

.pos__tabs { margin-bottom: 12px; }

.pos__equivale {
    min-height: 26px; margin: 8px 0 12px;
    font-size: .95rem; color: var(--text-strong);
}

.pos__sugeridos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------------- Envase ---------------- */

.pos__opciones { display: grid; gap: 8px; margin-top: 10px; }

.pos__opcion {
    display: flex; flex-direction: column; gap: 3px; text-align: left;
    padding: 13px 15px; border: 1px solid var(--border-strong);
    border-radius: 11px; background: var(--surface); cursor: pointer; color: var(--text);
}

.pos__opcion:hover { border-color: var(--brand); background: var(--brand-soft); }
.pos__opcion--aviso { border-color: var(--warning-line); }
.pos__opcion--aviso:hover { border-color: var(--warning); background: var(--warning-soft); }

/* ---------------- Cobro ---------------- */

.pos__cobro-total {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 12px 14px; margin-bottom: 14px;
    background: var(--brand-soft); border-radius: 11px;
}

.pos__cobro-cifra { font-size: 1.9rem; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }

.pos__metodos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.pos__metodo {
    flex: 1 1 86px; padding: 10px 8px; border-radius: 10px;
    border: 1px solid var(--border-strong); background: var(--surface);
    cursor: pointer; font-weight: 600; font-size: .85rem; color: var(--text);
}

.pos__metodo.is-active {
    background: var(--brand); color: var(--btn-fg); border-color: var(--brand);
}

.pos__billetes { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }

.pos__cambio {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; padding: 12px 14px; border-radius: 11px;
    background: var(--success-soft); margin-top: 10px;
}

.pos__cambio.is-falta { background: var(--danger-soft); }

.pos__cambio-cifra { font-size: 1.7rem; font-weight: 800; color: var(--success-on); font-variant-numeric: tabular-nums; }
.pos__cambio.is-falta .pos__cambio-cifra { color: var(--danger-on); }

.pos__cobro-error {
    background: var(--danger-soft); border: 1px solid var(--danger-line);
    color: var(--danger-on); border-radius: 10px; padding: 10px 12px;
    font-size: .86rem; margin: 10px 0;
}

/* ---------------- Clientes ---------------- */

.pos__clientes { margin-top: 8px; display: grid; gap: 4px; }

.pos__cliente {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%; text-align: left;
    padding: 9px 12px; border: 1px solid var(--border);
    border-radius: 9px; background: var(--surface); cursor: pointer; color: var(--text);
}

.pos__cliente:hover { background: var(--brand-soft); border-color: var(--brand); }

.pos__cliente-elegido {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 13px; border-radius: 10px;
    background: var(--success-soft); border: 1px solid var(--success-line);
    margin-bottom: 12px;
}

/* ---------------- Venta cobrada ---------------- */

.pos__hecho-icono {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--success); color: #fff;
    display: grid; place-items: center; font-size: 2rem;
    margin: 4px auto 12px;
}

.pos__hecho-folio { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; }

.pos__hecho-cambio {
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    padding: 14px; border-radius: 12px; background: var(--success-soft);
    margin-bottom: 12px;
}

.pos__hecho-cambio .pos__cambio-cifra { font-size: 2.3rem; }

/* ---------------- Camara ---------------- */

.pos__camara {
    position: relative; width: 100%; min-height: 240px;
    background: #000; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center;
}

.pos__camara video { width: 100%; height: auto; display: block; }

.pos__mira {
    position: absolute; left: 50%; top: 50%;
    width: 72%; height: 38%; transform: translate(-50%, -50%);
    border: 2px solid rgba(255,255,255,.85); border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
    pointer-events: none;
}

.pos__escaner-aviso { margin-top: 10px; }

/* ---------------- Avisos flotantes ---------------- */

.pos-aviso {
    position: fixed; left: 50%; top: 14px; transform: translateX(-50%);
    z-index: 80; padding: 10px 18px; border-radius: 999px;
    font-size: .88rem; font-weight: 600;
    background: var(--tooltip-bg); color: var(--tooltip-fg);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    transition: opacity .35s ease, transform .35s ease;
    max-width: 90vw; text-align: center;
}

.pos-aviso--ok    { background: var(--success); }
.pos-aviso--error { background: var(--danger); }
.pos-aviso--aviso { background: var(--warning); color: #fff; }
.pos-aviso.is-ido { opacity: 0; transform: translateX(-50%) translateY(-12px); }

/* ==========================================================================
   PUNTO DE VENTA EN TELEFONO
   ========================================================================== */

@media (max-width: 860px) {
    .pos { grid-template-columns: 1fr; }

    .pos__der {
        position: fixed; inset: auto 0 0 0; z-index: 50;
        max-height: 82vh; border-radius: 18px 18px 0 0;
        transform: translateY(102%); transition: transform .22s ease;
        box-shadow: 0 -6px 28px rgba(0,0,0,.25);
    }

    .pos--carrito-abierto .pos__der { transform: translateY(0); }
    .pos--carrito-abierto .pos__barra { display: none; }

    .pos__cerrar-carrito { display: inline-flex; }
    .pos__barra { display: flex; }

    .pos__izq { padding-bottom: 70px; }

    .pos__rapidos { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
    .pos__escanear-texto { display: none; }
    .pos__escanear { padding: 0 14px; font-size: 1.2rem; }
}

/* ==========================================================================
   TICKET IMPRESO
   --------------------------------------------------------------------------
   Se imprime desde el navegador, asi que funciona con CUALQUIER impresora que
   tenga controlador en el equipo o en el telefono: termica de 58 u 80 mm, de
   inyeccion o laser. No hace falta instalar nada ni hablar ESC/POS.

   El ancho del papel lo decide la tienda y llega como clase en el <body>.
   ========================================================================== */

.ticket-doc {
    background: var(--surface-alt);
    margin: 0; padding: 18px;
    font-family: "Courier New", Courier, monospace;
    color: #000;
}

.ticket-papel {
    background: #fff; margin: 0 auto; padding: 10px 12px;
    width: 58mm; max-width: 100%;
    font-size: 11px; line-height: 1.35;
    box-shadow: 0 2px 12px rgba(0,0,0,.14);
}

.ticket-doc--80mm .ticket-papel { width: 80mm; font-size: 12px; }
.ticket-doc--carta .ticket-papel { width: 190mm; font-size: 13px; padding: 20px; }

.ticket-papel__centro  { text-align: center; }
.ticket-papel__nombre  { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.ticket-papel__sep     { border: 0; border-top: 1px dashed #000; margin: 7px 0; }

.ticket-papel table { width: 100%; border-collapse: collapse; }
.ticket-papel td    { padding: 1px 0; vertical-align: top; }
.ticket-papel .der  { text-align: right; white-space: nowrap; }
.ticket-papel .art  { font-weight: 700; }
.ticket-papel .sub  { font-size: 10px; }

.ticket-papel__total {
    font-size: 15px; font-weight: 700;
    display: flex; justify-content: space-between; gap: 10px;
    padding: 4px 0;
}

.ticket-acciones {
    max-width: 320px; margin: 16px auto 0;
    display: flex; gap: 8px; flex-direction: column;
}

@media print {
    /* El navegador manda el papel del tamano del ticket y sin margenes: de
       otro modo una termica de 58 mm corta el renglon a la mitad. */
    @page { margin: 0; }

    html, body { background: #fff !important; }

    .ticket-doc { padding: 0; background: #fff; }
    .ticket-papel { box-shadow: none; width: auto; max-width: none; padding: 0 2mm; }
    .ticket-acciones, .no-imprimir { display: none !important; }
}

/* ==========================================================================
   FOTOS DE PRODUCTO
   --------------------------------------------------------------------------
   Para que sirven de verdad: cuando el cajero busca "coca" y le salen ocho
   renglones parecidos, la foto le dice cual es en medio segundo. El ojo lee
   una imagen antes que un texto, y por eso la foto va SIEMPRE a la izquierda
   del nombre.

   Cuando un producto no tiene foto se deja el hueco igual, con un marco gris.
   Si no, los renglones con foto y sin foto quedan desalineados y la lista se
   vuelve dificil de recorrer.
   ========================================================================== */

/* ---------------- En las tablas ---------------- */

.con-foto {
    display: flex; align-items: center; gap: 10px;
}

.miniatura {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 8px; object-fit: cover;
    background: var(--surface-alt); border: 1px solid var(--border);
}

.miniatura--vacia {
    display: block;
    border-style: dashed;
}

/* ---------------- En la ficha del producto ---------------- */

.foto-ficha { text-align: center; }

.foto-ficha img {
    max-width: 100%; max-height: 320px;
    border-radius: 12px; border: 1px solid var(--border);
}

.foto-ficha p { margin: 10px 0 0; }

/* ---------------- En el formulario ---------------- */

.foto-campo {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px; align-items: start;
}

.foto-campo__vista {
    position: relative;
    width: 180px; height: 180px;
    border: 1px dashed var(--border-strong); border-radius: 12px;
    background: var(--surface-alt);
    display: grid; place-items: center; overflow: hidden;
}

.foto-campo__vista img {
    width: 100%; height: 100%; object-fit: cover;
}

.foto-campo__hueco { color: var(--text-soft); font-size: .85rem; }

.foto-campo__nota {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--success); color: #fff;
    font-size: .68rem; text-align: center; padding: 4px 6px;
}

.foto-campo__acciones { display: grid; gap: 8px; align-content: start; }

/* ---------------- En el punto de venta ---------------- */

.pos__resultado-foto {
    width: 44px; height: 44px; flex: 0 0 44px;
    grid-row: 1 / 3; grid-column: 1;
    border-radius: 8px; object-fit: cover;
    background: var(--surface-alt); border: 1px solid var(--border);
    align-self: center;
}

.pos__resultado-foto--vacia { display: block; border-style: dashed; }

/* Con foto, el renglon del buscador pasa a tres columnas. */
.pos__resultado { grid-template-columns: auto 1fr auto; }
.pos__resultado-nombre { grid-column: 2; }
.pos__resultado-meta   { grid-column: 2; }
.pos__resultado-precio { grid-column: 3; }

.pos__rapido-foto {
    width: 100%; height: 56px;
    border-radius: 7px; object-fit: cover;
    background: var(--surface-alt);
}

.pos__linea-foto {
    width: 38px; height: 38px; flex: 0 0 38px;
    border-radius: 7px; object-fit: cover;
    border: 1px solid var(--border);
}

@media (max-width: 560px) {
    .foto-campo { grid-template-columns: 1fr; }
    .foto-campo__vista { width: 100%; height: 200px; }
}

/* --------------------------------------------------------------------------
   GENGAS: gasolineras cercanas con su precio (admin/gengas/index.php)
   -------------------------------------------------------------------------- */

.gengas { display: flex; flex-direction: column; gap: 14px; }
.gengas__mapa {
    position: relative;
    height: 400px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-alt);
}
.gengas__acciones { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gengas__lista { display: flex; flex-direction: column; }
.gengas__vacio { text-align: center; margin: 0; }
.gengas__item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.gengas__item p { margin: 2px 0; font-size: .92rem; }
.gengas__precios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 8px 0;
}
.gengas__precio {
    padding: 6px 8px;
    border-radius: 4px;
    color: #fff;
    font-size: .92rem;
}
.gengas__precio--premium { background: #d32f2f; }
.gengas__precio--regular { background: #388e3c; }
.gengas__precio--diesel  { background: #455a64; }
.gengas__fuente { text-align: center; margin: 0; }

/* El pin del mapa: burbuja con el precio y la gota debajo (js/gengas.js).
   Los colores son fijos, no del tema: van sobre el mapa, no sobre la pagina. */
.gengas__pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.gengas__burbuja {
    padding: 2px 8px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.gengas__gota {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #dc2626;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.gengas__pin--barata .gengas__burbuja {
    background: #14532d;
    outline: 2px solid #facc15;
}
.gengas__pin--barata { z-index: 2; }
.gengas__pin--sin .gengas__burbuja { background: #6b7280; font-weight: 500; font-size: .7rem; }
.gengas__pin--sin .gengas__gota    { background: #9ca3af; }

/* Selector de combustible y letrero de estado, encima del mapa. */
.gengas__combustibles {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    gap: 4px;
}
.gengas__chip {
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.gengas__chip.is-activo { color: #fff; }
.gengas__chip--regular.is-activo { background: #388e3c; }
.gengas__chip--premium.is-activo { background: #d32f2f; }
.gengas__chip--diesel.is-activo  { background: #455a64; }
.gengas__estado {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .82);
    color: #fff;
    font-size: .78rem;
    white-space: nowrap;
    pointer-events: none;
}

/* El recuadro que sale al tocar una gasolinera. */
.gengas__recuadro { color: #1f2937; font-size: .8rem; line-height: 1.35; padding-right: 10px; }
.gengas__recuadro-nombre { display: block; font-size: .88rem; }
.gengas__recuadro-dir { color: #6b7280; font-size: .72rem; margin: 2px 0 8px; }
.gengas__recuadro-precios {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}
.gengas__recuadro-precio {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 2px;
    border-radius: 4px;
    color: #fff;
}
.gengas__recuadro-precio span { font-size: .68rem; opacity: .9; }
.gengas__recuadro-precio b { font-size: .92rem; }
.gengas__recuadro-precio.is-sin { opacity: .45; }
.gengas__recuadro-precio.is-sin b { font-size: .7rem; font-weight: 500; }
.gengas__recuadro-pie {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    font-size: .75rem;
}
.gengas__recuadro-pie a { margin-left: auto; font-weight: 600; }

/* GenGas por precio, incrustado (embed/gengas_precios.php). Los botones
   llevan los colores de la bomba: verde, roja y diesel en negro. */
.gp-cuerpo { background: var(--bg); margin: 0; padding: 12px; }
.gp { max-width: 720px; margin: 0 auto; }
.gp [hidden] { display: none !important; } /* el display:flex de las pestanas le ganaba a hidden */
.gp__inicio { display: flex; flex-direction: column; gap: 16px; }
.gp__boton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 150px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    transition: transform .1s ease, filter .1s ease;
}
.gp__boton:hover { filter: brightness(1.08); }
.gp__boton:active { transform: scale(.98); }
.gp__boton--regular { background: #1a7f00; }
.gp__boton--premium { background: #e10600; }
.gp__boton--diesel  { background: #000; }
.gp__boton-nombre { font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 500; line-height: 1.1; }
.gp__boton-rango  { font-size: 1rem; opacity: .9; }
.gp__volver {
    border: 0;
    background: none;
    color: var(--brand);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
}
.gp__titulo { font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.2; margin: 10px 0 14px; }
.gp__estado { text-align: center; font-weight: 600; margin: 0 0 14px; }
.gp__estado--error { color: #e10600; font-size: 1.05rem; }
.gp__lista { display: flex; flex-direction: column; gap: 12px; }
.gp__tarjeta {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.gp__nombre { font-size: 1.05rem; margin: 0 0 6px; }
.gp__precio {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.gp__precio--regular { background: #1a7f00; }
.gp__precio--premium { background: #e10600; }
.gp__precio--diesel  { background: #000; }
.gp__dato { margin: 2px 0; font-size: .92rem; }
.gp__mapa { display: inline-block; margin-top: 6px; font-weight: 600; }
.gp__subtitulo { color: #1e4d7b; font-size: 1.4rem; margin: 24px 0 8px; }
.gp__texto { margin: 0; }
.gp__fuente { text-align: center; color: var(--text-muted); font-size: .75rem; margin: 18px 0 0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .gp__subtitulo { color: #7fb3e6; }
}
:root[data-theme="dark"] .gp__subtitulo { color: #7fb3e6; }

@media (max-width: 640px) {
    .gengas__mapa { height: 300px; }
    .gengas__precios { grid-template-columns: 1fr; gap: 6px; }
}