/* ============================================================
   15 de Sofi — Componentes (seccion 3.2, 3.7)
   ============================================================ */

/* ---------- Tarjeta ---------- */
.tarjeta{
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px;
}

/* ---------- KPI ---------- */
.kpi{
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px; position: relative; overflow: hidden;
}
.kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--primario); }
.kpi.kpi-oro::before{ background: var(--oro-linea); }
.kpi .kpi-rotulo{ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--texto-dim); }
.kpi .kpi-num{ font-family: var(--fuente-titulos); font-weight: 700; font-size: 30px; line-height: 1.1; margin-top: 4px; }
.kpi .kpi-nota{ font-size: 12.5px; color: var(--texto-dim); margin-top: 2px; }
@media (min-width: 821px){ .kpi .kpi-num{ font-size: 34px; } }
.grid-kpi{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--radio);
  font: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent;
}
.btn-primario{ background: var(--primario); color: var(--sobre-primario); }
.btn-primario:hover{ filter: brightness(1.05); }
.btn-secundario{ background: transparent; color: var(--texto); border-color: var(--borde-control); font-weight: 600; }
.btn-bloque{ width: 100%; }
.btn:disabled{ opacity: .5; cursor: not-allowed; }

/* ---------- Campos de formulario ---------- */
.campo{ display: block; margin-bottom: 14px; }
.campo > label{ display: block; font-size: 13px; font-weight: 600; color: var(--texto-dim); margin-bottom: 6px; }
.campo input, .campo textarea, .campo select{
  width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde-control); border-radius: var(--radio-chico);
  font: inherit;
}
.campo input:focus, .campo textarea:focus{ outline: 2px solid var(--primario); outline-offset: 1px; }

/* ---------- Chips de estado (seccion 3.2) ---------- */
.chip{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.chip-listo{ background: rgba(111,214,160,.14); color: #6fd6a0; }
.chip-proceso{ background: rgba(185,154,240,.16); color: #cdb8f7; }
.chip-pendiente{ background: rgba(240,163,94,.16); color: #f0a35e; }
.chip-vencido{ background: rgba(255,107,129,.16); color: #ff6b81; }
.chip-adulto{ background: rgba(163,156,184,.16); color: #c9c3d9; }
.chip-adolescente{ background: rgba(185,154,240,.16); color: #cdb8f7; }
.chip-nino{ background: rgba(245,201,58,.14); color: #f5c93a; }
/* area tactil minima aunque el chip se vea chico */
.chip-tap{ position: relative; }
.chip-tap::after{ content:""; position:absolute; inset:-11px; }

/* ---------- Hoja inferior (bottom sheet) ---------- */
.hoja{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  background: var(--superficie-2); border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(100%); transition: transform .2s ease;
  max-height: 88vh; overflow-y: auto;
}
.hoja.abierta{ transform: translateY(0); }
.hoja .manija{ width: 40px; height: 4px; border-radius: 999px; background: var(--borde-control); margin: 8px auto 12px; }
.hoja .hoja-cabecera{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hoja .hoja-titulo{ font-size: 18px; font-weight: 600; }
.hoja .btn-cerrar{
  width: 44px; height: 44px; border: 0; background: transparent; color: var(--texto-dim);
  font-size: 22px; cursor: pointer; border-radius: 999px;
}
.hoja-lista a{
  display: flex; align-items: center; gap: 12px; padding: 14px 8px;
  text-decoration: none; color: var(--texto); font-weight: 600; border-bottom: 1px solid var(--borde);
}
.hoja-lista a:last-child{ border-bottom: 0; }
.hoja-lista a svg{ width: 22px; height: 22px; color: var(--primario); }

/* ---------- Toast ---------- */
.toast-cont{
  position: fixed; left: 0; right: 0; z-index: 70;
  bottom: calc(72px + env(safe-area-inset-bottom) + 16px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
@media (min-width: 821px){ .toast-cont{ bottom: 24px; } }
.toast{
  pointer-events: auto; display: inline-flex; align-items: center; gap: 14px;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  font-size: 14px; max-width: 92vw;
}
.toast button{ background: transparent; border: 0; color: var(--primario-texto); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- Estado vacio ---------- */
.vacio{ text-align: center; padding: 40px 20px; color: var(--texto-dim); }
.vacio h3{ color: var(--texto); font-weight: 600; margin-bottom: 6px; }
.vacio p{ margin-bottom: 16px; }

/* ---------- Skeleton (carga) ---------- */
.skeleton{ background: linear-gradient(90deg, #1a1726 25%, #241f33 37%, #1a1726 63%); background-size: 400% 100%; border-radius: 8px; animation: brillar 1.2s ease infinite; }
@keyframes brillar{ 0%{ background-position: 100% 0; } 100%{ background-position: 0 0; } }

/* ---------- Login ---------- */
.login-envoltura{
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-tarjeta{
  width: 100%; max-width: 360px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 16px; padding: 28px 22px;
  text-align: center;
}
.login-tarjeta .login-logo{
  width: 148px; height: 148px; object-fit: contain; display: block; margin: 0 auto 10px;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.login-tarjeta h1{
  font-family: var(--fuente-titulos); font-weight: 800; font-size: 24px;
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 4px;
  background: var(--oro-degradado); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-tarjeta .subtitulo{ color: var(--texto-dim); font-size: 13px; margin-bottom: 20px; }
.login-tarjeta .campo{ text-align: left; }
.login-error{ color: var(--negativo); font-size: 13px; min-height: 18px; margin: 2px 0 10px; }

/* ---------- Titulo de pantalla + encabezado de modulo ---------- */
.encabezado{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.encabezado .sub{ color: var(--texto-dim); font-size: 13px; margin-top: 2px; }

/* ============================================================
   Modulo Invitados y Mesas
   ============================================================ */
/* Segmentado superior (Por mesa | Lista) */
.segmento{ display:flex; background:var(--superficie); border:1px solid var(--borde-control); border-radius:12px; padding:3px; gap:3px; }
.segmento .seg-btn{ flex:1; min-height:40px; border:0; background:transparent; color:var(--texto-dim); font:inherit; font-weight:600; border-radius:9px; cursor:pointer; }
.segmento .seg-btn.sel{ background:var(--primario); color:var(--sobre-primario); font-weight:700; }

/* Franja SIN MESA */
.sinmesa{ background:var(--oro-suave); border:1px solid rgba(240,163,94,.35); border-radius:12px; padding:10px 12px; margin-bottom:14px; }
.sinmesa-tit{ font-size:11px; font-weight:700; letter-spacing:1px; color:var(--pendiente); margin-bottom:8px; }
.sinmesa-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.chip-inv{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--superficie-2); border:1px solid var(--borde-control); color:var(--texto); border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; min-height:40px; }

/* Tarjeta de mesa */
.mesa{ background:var(--superficie); border:1px solid var(--borde); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.mesa.abierta{ border-color:var(--primario-activo); }
.mesa.excedida{ border-color:var(--negativo); }
.mesa-cab{ width:100%; min-height:56px; display:flex; align-items:center; gap:12px; padding:10px 14px; background:transparent; border:0; color:var(--texto); cursor:pointer; text-align:left; }
.mesa-nombre{ flex:1; font-family:var(--fuente-titulos); font-weight:700; font-size:19px; }
.mesa-cont{ font-family:var(--fuente-titulos); font-weight:700; font-size:17px; }
.mesa-cab .flecha{ color:var(--texto-dim); }
.mesa-cuerpo{ padding:4px 14px 14px; border-top:1px solid var(--borde); }
.fila-inv{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--borde); }
.fila-inv > span:first-child{ flex:1; }
.mini{ background:transparent; border:1px solid var(--borde-control); color:var(--texto); border-radius:8px; min-height:36px; padding:0 10px; font:inherit; cursor:pointer; }
.mesa-acciones{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

.btn-punteado{ width:100%; border:1px dashed var(--borde-control); background:transparent; color:var(--primario-texto); border-radius:12px; min-height:48px; font:inherit; font-weight:600; cursor:pointer; }
.btn-punteado.chico{ min-height:44px; flex:1; }

/* Vista lista */
.buscador input{ width:100%; min-height:46px; padding:10px 12px; background:var(--fondo); color:var(--texto); border:1px solid var(--borde-control); border-radius:10px; font:inherit; margin-bottom:10px; }
.filtros{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filtro-chip{ background:var(--superficie); border:1px solid var(--borde-control); color:var(--texto-dim); border-radius:999px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; min-height:36px; }
.filtro-chip.sel{ background:var(--primario-suave); border-color:var(--primario); color:var(--primario-texto); font-weight:600; }
.filtro-sep{ width:1px; height:22px; background:var(--borde); }
.lista-inv{ display:flex; flex-direction:column; gap:1px; }
.fila-lista{ display:flex; align-items:center; gap:10px; padding:12px 10px; background:var(--superficie); border:1px solid var(--borde); border-radius:10px; color:var(--texto); font:inherit; cursor:pointer; text-align:left; }
.fila-lista .nom{ flex:1; font-weight:600; }
.mesa-tag{ font-size:12px; color:var(--texto-dim); }
.mesa-tag.sin{ color:var(--pendiente); }

/* Segmentos en formularios (grilla de botones) */
.segmentos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px; }
.seg-opt{ min-height:44px; border:1px solid var(--borde-control); background:transparent; color:var(--texto); border-radius:10px; font:inherit; font-weight:600; cursor:pointer; }
.seg-opt.sel{ background:var(--primario); color:var(--sobre-primario); border-color:var(--primario); font-weight:700; }

.hoja-botones{ display:flex; gap:10px; margin-top:18px; }
.hoja-botones .btn{ flex:1; }

/* Hoja de asignar / lista de mesas */
.lista-mesas, .lista-inv{ margin-top:4px; }
.fila-mesa{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:10px 12px; background:var(--superficie); border:1px solid var(--borde); border-radius:10px; color:var(--texto); font:inherit; cursor:pointer; margin-bottom:8px; text-align:left; }
.fila-mesa:disabled{ opacity:.5; cursor:not-allowed; }

/* Modal a pantalla completa (importar) */
.modal-full{ position:fixed; inset:0; z-index:65; background:var(--fondo); display:flex; flex-direction:column; }
.modal-cab{ display:flex; align-items:center; gap:12px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px; border-bottom:1px solid var(--borde); }
.modal-cab .hoja-titulo{ flex:1; }
.modal-cuerpo{ flex:1; overflow-y:auto; padding:16px; max-width:760px; margin:0 auto; width:100%; }
.modal-cuerpo textarea{ width:100%; background:var(--fondo); color:var(--texto); border:1px solid var(--borde-control); border-radius:10px; padding:10px; font:inherit; margin-bottom:10px; }
.cols{ font-size:12px; color:var(--primario-texto); background:var(--primario-suave); padding:8px 10px; border-radius:8px; margin-bottom:10px; }
.resumen-imp{ font-weight:700; margin:14px 0 8px; }
.dup-todos{ font-size:13px; color:var(--texto-dim); margin-bottom:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tabla-prev{ overflow-x:auto; border:1px solid var(--borde); border-radius:10px; margin-bottom:14px; }
.tabla-prev table{ width:100%; border-collapse:collapse; font-size:13px; }
.tabla-prev th, .tabla-prev td{ padding:8px 10px; text-align:left; border-bottom:1px solid var(--borde); vertical-align:top; }
.tabla-prev tr.prev-error{ background:rgba(255,107,129,.06); }
.tabla-prev select{ background:var(--fondo); color:var(--texto); border:1px solid var(--borde-control); border-radius:8px; padding:6px; }

/* ============================================================
   Modulo Detalles Sofi
   ============================================================ */
.anillo{ flex:0 0 auto; }
.grupo-tarjeta{ background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:14px; margin-bottom:12px; }
.grupo-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.grupo-nom{ font-weight:700; font-size:16px; }
.barra{ height:6px; background:var(--borde); border-radius:999px; overflow:hidden; margin-bottom:10px; }
.barra-fill{ height:100%; background:var(--primario); border-radius:999px; transition:width .3s ease; }
.grupo-items{ display:flex; flex-direction:column; }
.item-sofi{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--borde); }
.item-sofi:last-child{ border-bottom:0; }
.item-sofi .chip-tap{ border:0; cursor:pointer; font:inherit; }
.item-nom{ flex:1; text-align:left; background:transparent; border:0; color:var(--texto); font:inherit; font-size:15px; cursor:pointer; padding:4px 0; }
.item-fecha{ font-size:12.5px; color:var(--oro); font-weight:600; white-space:nowrap; }

/* ============================================================
   Modulos: Catalogo, Noche, Consumo, Totales
   ============================================================ */
.lista-cat{ display:flex; flex-direction:column; gap:8px; }
.check{ display:flex; align-items:center; gap:10px; padding:8px 0 14px; color:var(--texto); font-weight:600; cursor:pointer; }
.check input, .check-item input{ width:20px; height:20px; accent-color:var(--primario); }
.campo.dos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.campo.dos > div{ min-width:0; }
.items-check{ display:flex; flex-direction:column; gap:6px; max-height:44vh; overflow-y:auto; }
.check-item{ display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--borde); border-radius:8px; cursor:pointer; }

/* Timeline (La noche) */
.timeline{ position:relative; }
.tl-item{ display:grid; grid-template-columns:52px 1fr; gap:10px; margin-bottom:10px; }
.tl-hora{ font-family:var(--fuente-titulos); font-weight:700; color:var(--oro); text-align:right; padding-top:12px; }
.tl-card{ background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:12px; text-align:left; color:var(--texto); font:inherit; cursor:pointer; width:100%; }
.tl-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tl-nom{ font-weight:700; font-size:16px; }
.tl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

/* Consumo (stepper) */
.fila-consumo{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--borde); }
.fila-consumo:last-child{ border-bottom:0; }
.fc-nom{ flex:1; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stepper{ display:flex; align-items:center; gap:8px; }
.st-btn{ width:44px; height:44px; border-radius:10px; border:1px solid var(--borde-control); background:transparent; color:var(--texto); font-size:22px; line-height:1; cursor:pointer; }
.st-btn:disabled{ opacity:.4; cursor:not-allowed; }
.st-val{ min-width:42px; text-align:center; font-family:var(--fuente-titulos); font-weight:700; font-size:18px; }
.st-un{ color:var(--texto-dim); font-size:12px; min-width:28px; }

/* Totales */
.controles-tot{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.controles-tot .check{ padding:0; }
.margen{ color:var(--texto-dim); font-size:13px; display:flex; align-items:center; gap:6px; }
.margen input{ min-height:40px; padding:6px 8px; background:var(--fondo); color:var(--texto); border:1px solid var(--borde-control); border-radius:8px; font:inherit; }
.aviso-restr{ background:rgba(240,163,94,.12); border:1px solid rgba(240,163,94,.35); color:var(--pendiente); border-radius:10px; padding:10px 12px; margin-bottom:14px; font-size:13px; }
.tabla-tot{ display:flex; flex-direction:column; }
.fila-tot{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr auto; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--borde); font-size:13px; }
.fila-tot:last-child{ border-bottom:0; }
.ft-nom{ font-weight:600; }
.ft-tot, .ft-env, .ft-costo{ color:var(--texto-dim); }
.fila-tot .chip-tap{ border:0; cursor:pointer; font:inherit; }
@media (max-width:520px){ .fila-tot{ grid-template-columns:1.4fr 1fr auto; } .fila-tot .ft-env{ display:none; } }

/* ============================================================
   Modulo Presupuesto y Proveedores
   ============================================================ */
.prov{ margin-bottom:12px; padding:12px 14px; }
.prov-cab{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.prov-tog{ flex:1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:transparent; border:0; color:var(--texto); font:inherit; cursor:pointer; text-align:left; }
.prov-nom{ font-weight:700; font-size:16px; }
.prov-monto{ color:var(--texto-dim); font-size:13px; margin-top:6px; }
.tel{ color:var(--primario-texto); text-decoration:none; font-weight:600; }
.pagos{ margin-top:12px; border-top:1px solid var(--borde); padding-top:8px; }
.fila-pago{ display:grid; grid-template-columns:auto 1.4fr 1fr auto auto; gap:8px; align-items:center; padding:8px 0; border-bottom:1px solid var(--borde); font-size:13px; }
.fila-pago:last-of-type{ border-bottom:0; }
.chk{ width:26px; height:26px; border-radius:7px; border:1px solid var(--borde-control); background:transparent; color:var(--positivo); cursor:pointer; font-size:15px; line-height:1; }
.chk.on{ background:rgba(111,214,160,.16); border-color:var(--positivo); }
.pago-con{ font-weight:600; }
.pago-monto{ color:var(--texto-dim); }
.pago-venc{ color:var(--texto-dim); font-size:12px; }
.pago-venc.venc{ color:var(--negativo); font-weight:700; }

/* ============================================================
   Modulo Inicio (tablero)
   ============================================================ */
.prog-card{ display:flex; flex-direction:column; align-items:center; gap:16px; }
@media (min-width:560px){ .prog-card{ flex-direction:row; align-items:center; } }
.prog-anillo{ flex:0 0 auto; }
.prog-info{ flex:1; width:100%; }
.barras-mod{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-top:12px; }
.barra-mod{ text-decoration:none; color:var(--texto); }
.bm-top{ display:flex; justify-content:space-between; font-size:12px; margin-bottom:4px; color:var(--texto-dim); font-weight:600; }
.franja-alertas{ width:100%; display:flex; align-items:center; gap:10px; background:rgba(255,107,129,.1); border:1px solid rgba(255,107,129,.4); color:var(--texto); border-radius:12px; padding:12px 14px; cursor:pointer; text-align:left; margin-top:14px; font-size:14px; }
.franja-alertas .fa-ico{ color:var(--negativo); font-size:18px; }
.franja-alertas .sub{ margin-left:auto; text-align:right; }
.lista-pend{ display:flex; flex-direction:column; gap:8px; }
.fila-pend{ display:flex; align-items:center; gap:10px; padding:12px; background:var(--superficie); border:1px solid var(--borde); border-radius:10px; text-decoration:none; color:var(--texto); }
.pend-fecha{ color:var(--oro); font-weight:700; font-size:13px; min-width:46px; }
.pend-tit{ flex:1; font-weight:600; font-size:14px; }