/* ===========================================================================
   iGEA HOTEL  ::  css/app.css
   ---------------------------------------------------------------------------
   Pensado para la TABLET del mostrador: nada mide menos de 44px de alto, el
   texto del cuarto se lee de pie y a un brazo de distancia, y no hay hover
   como unica pista de nada (en una tablet no existe el hover).
   =========================================================================== */

:root {
    --verde:   #1B4332;
    --verde2:  #2D6A4F;
    --libre:   #2D9E5F;
    --ocupa:   #C0392B;
    --limpia:  #D4A017;
    --mante:   #7A7A7A;
    --reserv:  #2471A3;
    --tinta:   #1C1C1C;
    --tinta2:  #5A5A5A;
    --linea:   #E2E6E3;
    --fondo:   #F4F6F5;
    --panel:   #FFFFFF;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0; padding: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

button, select, input { font-family: inherit; font-size: 15px; }


/* --------------------------------------------------------------- CABECERA */

.top {
    display: flex; align-items: center; gap: 10px;
    background: var(--verde); color: #fff;
    padding: 10px 12px;
    position: sticky; top: 0; z-index: 20;
}
.top-tit { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; }
.top-tit small { display: block; font-size: 11px; font-weight: 400; opacity: .75; }
.top-der { display: flex; align-items: center; gap: 6px; }

.ico {
    width: 42px; height: 42px;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.14); color: #fff;
    font-size: 19px; cursor: pointer;
}
.ico:active { background: rgba(255,255,255,.3); }

#sel_sede {
    height: 42px; max-width: 42vw;
    border: 0; border-radius: 8px;
    background: rgba(255,255,255,.14); color: #fff;
    padding: 0 8px;
}
#sel_sede option { color: #000; }
.sede-fija { font-size: 12px; opacity: .85; max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cuerpo { padding: 12px; padding-bottom: 40px; }


/* ------------------------------------------------------------------ CHIPS */

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.chip {
    flex: 0 0 auto;
    min-height: 42px; padding: 0 14px;
    border: 1px solid var(--linea); border-radius: 21px;
    background: var(--panel); color: var(--tinta2);
    font-weight: 600; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
}
.chip b {
    background: var(--fondo); color: var(--tinta);
    border-radius: 11px; padding: 1px 8px; font-size: 13px;
}
.chip.on { background: var(--verde2); border-color: var(--verde2); color: #fff; }
.chip.on b { background: rgba(255,255,255,.22); color: #fff; }
.chip.alerta { border-color: var(--ocupa); color: var(--ocupa); }
.chip.alerta b { background: var(--ocupa); color: #fff; }


/* ------------------------------------------------- TABLERO DE HABITACIONES */

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

.cuarto {
    position: relative;
    text-align: left;
    min-height: 118px;
    padding: 10px 11px;
    border: 0; border-left: 6px solid var(--mante);
    border-radius: 10px;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(0,0,0,.09);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 2px;
}
.cuarto:active { transform: scale(.985); }

.cu-num   { font-size: 24px; font-weight: 800; line-height: 1.1; }
.cu-tipo  { font-size: 11px; color: var(--tinta2); text-transform: uppercase; letter-spacing: .4px; }
.cu-est   { font-size: 12px; font-weight: 700; margin-top: 2px; }
.cu-hue   { font-size: 13px; font-weight: 600; margin-top: 5px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-fec   { font-size: 11px; color: var(--tinta2); }
.cu-tot   { font-size: 14px; font-weight: 700; margin-top: 3px; }
.cu-tot .pag { font-size: 10px; font-weight: 700; color: var(--libre); text-transform: uppercase; }
.cu-precio { font-size: 13px; color: var(--tinta2); margin-top: 6px; }
.cu-avisa {
    margin-top: 5px; align-self: flex-start;
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px;
    background: var(--ocupa); color: #fff;
    border-radius: 4px; padding: 2px 6px;
}
.cu-avisa.ok { background: var(--reserv); }

.c-libre  { border-left-color: var(--libre); }
.c-libre  .cu-est { color: var(--libre); }
.c-ocupa  { border-left-color: var(--ocupa); }
.c-ocupa  .cu-est { color: var(--ocupa); }
.c-limpia { border-left-color: var(--limpia); background: #FFFDF4; }
.c-limpia .cu-est { color: #9A7500; }
.c-mante  { border-left-color: var(--mante); background: #FAFAFA; }
.c-mante  .cu-est { color: var(--mante); }
.c-reserv { border-left-color: var(--reserv); }
.c-reserv .cu-est { color: var(--reserv); }

/* La reserva pasada de fecha que sigue dentro: no es un error del sistema,
   es que nadie hizo el check-out. Tiene que saltar a la vista. */
.cuarto.pasada { box-shadow: 0 0 0 2px var(--ocupa), 0 1px 3px rgba(0,0,0,.09); }


/* ------------------------------------------------------------------ FOLIO */

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

.fo-cab {
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
    background: var(--panel); border-radius: 10px; padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.fo-hab {
    font-size: 30px; font-weight: 800; line-height: 1;
    padding-right: 14px; border-right: 1px solid var(--linea);
}
.fo-hab small { display: block; font-size: 11px; font-weight: 500; color: var(--tinta2); text-transform: uppercase; }
.fo-datos { flex: 1; min-width: 180px; }
.fo-hue { font-size: 17px; font-weight: 700; }
.fo-sub { font-size: 12px; color: var(--tinta2); }
.fo-fechas { display: flex; gap: 16px; flex-wrap: wrap; }
.fo-fechas div { font-size: 13px; font-weight: 600; }
.fo-fechas span { display: block; font-size: 10px; font-weight: 500; color: var(--tinta2); text-transform: uppercase; letter-spacing: .4px; }

.fo-lineas { background: var(--panel); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fo-li {
    display: grid;
    grid-template-columns: 84px 1fr auto 118px;
    gap: 10px; align-items: center;
    padding: 11px 13px;
    border-bottom: 1px solid var(--linea);
}
.fo-li:last-child { border-bottom: 0; }
.fo-li.pagada { background: #FBFCFB; }
.fo-li.anul   { background: #FFF6F5; }

.fo-tipo {
    font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
    text-align: center; padding: 3px 4px; border-radius: 4px;
    background: var(--fondo); color: var(--tinta2);
}
.fo-tipo.t-hosp { background: #E7F0FA; color: var(--reserv); }
.fo-tipo.t-dia  { background: #FDF3DC; color: #9A7500; }
.fo-tipo.t-cons { background: #E8F6EE; color: var(--verde2); }

.fo-desc b { display: block; font-size: 14px; }
.fo-desc small { display: block; font-size: 11px; color: var(--tinta2); }
.fo-monto { font-size: 15px; font-weight: 700; white-space: nowrap; }
.fo-estado { text-align: right; }

.et { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.et.ok   { background: #E8F6EE; color: var(--verde2); }
.et.pend { background: #FDF3DC; color: #9A7500; }
.et.mal  { background: #FDE8E6; color: var(--ocupa); }

.fo-tot { background: var(--panel); border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fo-tot .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.fo-tot .row.pend b { color: var(--ocupa); }
.fo-tot .row.total { border-top: 1px solid var(--linea); margin-top: 5px; padding-top: 9px; font-size: 18px; font-weight: 800; }

.fo-nota, .fo-obs {
    background: #FFFDF4; border: 1px solid #F0E3B8; border-radius: 10px;
    padding: 11px 13px; font-size: 12px; color: #6B5500;
}
.fo-obs pre { margin: 6px 0 0; white-space: pre-wrap; font: 11px/1.5 ui-monospace, Menlo, monospace; color: var(--tinta2); }


/* ------------------------------------------------------------------ LOGIN */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 18px; background: var(--verde); }
.login-card { width: 100%; max-width: 340px; background: var(--panel); border-radius: 14px; padding: 22px; }
.login-logo { font-size: 24px; font-weight: 300; color: var(--verde); margin-bottom: 18px; text-align: center; }
.login-logo span { font-weight: 800; }
.login-card label { display: block; font-size: 11px; font-weight: 700; color: var(--tinta2); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 4px; }
.login-card input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 8px; background: #FCFDFC; }
.login-card input:focus { outline: 2px solid var(--verde2); outline-offset: -2px; }
.login-pie { text-align: center; font-size: 11px; color: var(--tinta2); margin-top: 14px; }

.btn { min-height: 46px; padding: 0 18px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.btn-ok { background: var(--verde2); color: #fff; }
.btn-ok:disabled { opacity: .6; }
.btn-block { display: block; width: 100%; margin-top: 20px; }


/* ------------------------------------------------------- VACIO Y MENSAJES */

.vacio { background: var(--panel); border-radius: 10px; padding: 26px 18px; text-align: center; color: var(--tinta2); }
.vacio b { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 6px; }
.vacio p { margin: 0; font-size: 13px; }

.spin {
    width: 26px; height: 26px; margin: 0 auto 12px;
    border: 3px solid var(--linea); border-top-color: var(--verde2);
    border-radius: 50%; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.toast {
    position: fixed; left: 12px; right: 12px; bottom: -200px;
    z-index: 100;
    background: var(--tinta); color: #fff;
    padding: 13px 15px; border-radius: 10px;
    font-size: 14px; white-space: pre-wrap;
    transition: bottom .22s ease;
    max-height: 48vh; overflow: auto;
}
.toast.ver { bottom: 14px; }
.toast.error { background: var(--ocupa); }
.toast.info  { background: var(--verde); }

@media (min-width: 900px) {
    .cuerpo { max-width: 1180px; margin: 0 auto; }
    .grid-cuartos { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}