:root { --o:#ff6600; --os:#fff3ec; --ink:#14223b; --mut:#7d8798; --bd:#c9d1de; --bg:#eceff5; --bd-suave:#e1e6ee; --sombra:0 1px 2px rgba(20,34,59,.08), 0 4px 12px rgba(20,34,59,.06); --ok:#14a05a; --bad:#d33a3a; }

* { box-sizing: border-box; }
html, body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
h1 { font-size: 1.6rem; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 0 0 .5rem; }

.app { display: flex; flex-direction: column; min-height: 100vh; }
.top { display: flex; align-items: center; gap: .9rem; padding: .55rem 1.2rem; background: #fff; border-bottom: 1px solid var(--bd); }
.top .logo { height: 40px; }
.top .producto { font-weight: 700; color: var(--o); }
.top .espacio { flex: 1; }
.top .sede, .top .sede-fija { padding: .3rem .6rem; border: 1px solid var(--bd); border-radius: 8px; background: var(--os); font-size: .9rem; }
.top .usuario small { color: var(--mut); }
.top .salir { color: var(--o); text-decoration: none; font-weight: 600; }

.cuerpo { display: flex; flex: 1; }
.menu { width: 210px; padding: 1rem .7rem; background: #fff; border-right: 1px solid var(--bd); display: flex; flex-direction: column; gap: .2rem; }
.menu a, .menu .pronto { padding: .55rem .8rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .95rem; }
.menu a.active { background: var(--os); color: var(--o); font-weight: 700; }
.menu .pronto { color: var(--mut); cursor: default; }
.contenido { flex: 1; padding: 1.4rem 1.8rem; }

.tarjeta { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 1rem 1.2rem; max-width: 520px; }
.ok { color: var(--ok); }
.error { color: var(--bad); }

.barra { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.barra h1 { margin: 0 1rem 0 0; }
.barra .espacio { flex: 1; }
.fecha { min-width: 11rem; text-align: center; }
.btn { padding: .4rem .8rem; border: 0; border-radius: 8px; background: var(--o); color: #fff; font-weight: 600; cursor: pointer; }
.btn.sec { background: #fff; color: var(--ink); border: 1px solid var(--bd); }
.etq { padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.origen-app { background: var(--os); color: var(--o); }
.origen-mostrador { background: #e6f6ee; color: #0f6b5c; }
.origen-abono { background: #eef0fb; color: #34409a; }

.tarjeta.ancha { max-width: none; overflow-x: auto; padding: .6rem; }
.tarjeta.ancha.arrastrando, .tarjeta.ancha.arrastrando * { cursor: grabbing !important; user-select: none; }
.celda.libre, .celda.ocupada, .bloque { cursor: pointer; }
.ag { display: grid; gap: 4px; align-items: stretch; }
.ag .cab { font-weight: 700; padding: .4rem .5rem; background: var(--bg); border-radius: 8px; }
.ag .cab small { display: block; font-weight: 400; color: var(--mut); }
.ag .hora { padding: .6rem .3rem; color: var(--mut); font-size: .9rem; }
.celda { padding: .4rem .55rem; border-radius: 8px; font-size: .9rem; min-height: 2.8rem; }
.celda small { display: block; opacity: .8; }
.celda.libre { background: #fff; border: 1px dashed var(--bd); color: var(--mut); }
.celda.vacia { background: transparent; }
.celda.ocupada.origen-app { background: var(--os); border: 1px solid #ffd2b3; }
.celda.ocupada.origen-mostrador { background: #e6f6ee; border: 1px solid #bfe5d0; }
.celda.ocupada.origen-abono { background: #eef0fb; border: 1px solid #d3d8f3; }

.seg { display: inline-flex; border: 1px solid var(--bd); border-radius: 8px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: #fff; padding: .4rem .8rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.seg button.on { background: var(--ink); color: #fff; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { padding: .3rem .8rem; border-radius: 999px; border: 1px solid var(--bd); background: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }

.tl { min-width: max-content; }
.tl-fila { display: flex; align-items: center; border-top: 1px solid var(--bd); }
.tl-cab { border-top: 0; }
.tl-nom { width: 130px; flex: none; padding: 0 .5rem; font-weight: 700; position: sticky; left: 0; background: #fff; z-index: 2; }
.tl-nom small { display: block; font-weight: 400; color: var(--mut); }
.tl-pista { position: relative; height: 52px; flex: none; }
.tl-cab .tl-pista { height: 26px; }
.tl-hora { position: absolute; top: 4px; font-size: .75rem; color: var(--mut); padding-left: 4px; border-left: 1px solid var(--bd); }
.bloque { position: absolute; top: 4px; bottom: 4px; border-radius: 8px; padding: .2rem .45rem; font-size: .8rem; overflow: hidden; white-space: nowrap; box-sizing: border-box; }
.bloque small { display: block; opacity: .8; font-size: .72rem; }
.bloque.libre { background: #fff; border: 1px dashed #cfd5df; color: var(--mut); }
.bloque.ocupada.origen-app { background: var(--os); border: 1px solid #ffd2b3; }
.bloque.ocupada.origen-mostrador { background: #e6f6ee; border: 1px solid #bfe5d0; }
.bloque.ocupada.origen-abono { background: #eef0fb; border: 1px solid #d3d8f3; }
.celda.libre, .bloque.libre { cursor: pointer; }
.celda.libre.pasado, .bloque.libre.pasado { opacity: .45; cursor: default; }
.celda.libre:not(.pasado):hover, .bloque.libre:not(.pasado):hover { border-color: var(--o); color: var(--o); background: #fff7f1; }
.celda, .bloque { user-select: none; }

.modal-fondo { position: fixed; inset: 0; background: rgba(20, 34, 59, .45); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modal { width: min(480px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px; padding: 1.3rem 1.4rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.modal h2 { margin: 0 0 .2rem; font-size: 1.2rem; }
.modal-sub { color: var(--mut); margin: 0 0 .9rem; }
.modal-nota { color: var(--mut); font-size: .85rem; }
.modal label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--mut); margin-bottom: .7rem; flex: 1; }
.modal input, .modal select { padding: .5rem .6rem; border: 1px solid var(--bd); border-radius: 8px; font-size: 1rem; color: var(--ink); background: #fff; }
.modal .seg { margin: .2rem 0 .8rem; }
.fila-campos { display: flex; gap: .7rem; }
.modal-acciones { display: flex; gap: .5rem; align-items: center; margin-top: .8rem; }
.modal-acciones .espacio { flex: 1; }
.btn.peligro { background: var(--bad); }
.btn:disabled { opacity: .6; cursor: default; }
table.cuenta { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .92rem; }
table.cuenta td { padding: .3rem 0; border-bottom: 1px solid var(--bd); }
table.cuenta .monto { text-align: right; white-space: nowrap; }
table.cuenta tr.total td { font-weight: 700; }
table.cuenta tr.pago td { color: var(--ok); }
.estado-pagada { background: #e6f6ee; color: #0f6b5c; }
.estado-parcial { background: #fff3d6; color: #a06a00; }
.estado-pendiente { background: #fdeaea; color: var(--bad); }
.tarjeta h3 { margin: 1rem 0 .3rem; font-size: 1rem; }
table.tk { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.tk td { padding: .3rem 0; border-bottom: 1px solid var(--bd); }
table.tk .der, table.lista .der { text-align: right; white-space: nowrap; }
table.tk tr.tot td { font-weight: 700; }
.dif { color: var(--bad); font-weight: 700; }
.etq.pend { background: #fdeaea; color: var(--bad); }
table.lista { width: 100%; max-width: 760px; border-collapse: collapse; background: #fff; border: 1px solid var(--bd); border-radius: 8px; }
table.lista th, table.lista td { padding: .5rem .7rem; border-bottom: 1px solid var(--bd); text-align: left; }
table.lista th.der { text-align: right; }
table.lista tr.clic { cursor: pointer; }
table.lista tr.clic:hover { background: #f4f6fa; }
.form-linea { display: flex; gap: .7rem; flex-wrap: wrap; }
.tarjeta label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--mut); margin-bottom: .7rem; }
.tarjeta input, .tarjeta select { padding: .5rem .6rem; border: 1px solid var(--bd); border-radius: 8px; font-size: 1rem; color: var(--ink); background: #fff; }
.form-desc { width: 100%; }
.panel-form { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--bd); }
.ticket-fila { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
.acciones-ticket { display: flex; flex-direction: column; gap: .6rem; width: 200px; position: sticky; top: 1rem; }
.acc { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border: 0; border-radius: 10px; font-size: .92rem; font-weight: 600; color: #fff; text-decoration: none; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.acc:hover { filter: brightness(1.08); }
.acc-imp { background: #475569; }
.acc-wa { background: #25d366; }
.acc-mail { background: #2563eb; }
.acc-copia { background: #7c3aed; }
@media print {
    .menu, .top, .no-print, #blazor-error-ui { display: none !important; }
    .cuerpo, .contenido { display: block; padding: 0; }
    .ticket-caja { border: 0; max-width: none; }
}
.estado-cancelada { background: #eceff3; color: var(--mut); }

.login-fondo { min-height: 100vh; display: grid; place-items: center; background: var(--os); }
.login-caja { width: 340px; background: #fff; border: 1px solid var(--bd); border-radius: 14px; padding: 1.6rem; }
.login-caja img { width: 320px; max-width: 90%; height: auto; margin-bottom: .6rem; }
.login-caja form { display: flex; flex-direction: column; gap: .8rem; }
.login-caja label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--mut); }
.login-caja input { padding: .55rem .7rem; border: 1px solid var(--bd); border-radius: 8px; font-size: 1rem; }
.login-caja button { padding: .65rem; border: 0; border-radius: 8px; background: var(--o); color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.login-caja .login-chk { flex-direction: row; align-items: center; gap: .4rem; }
.login-caja .login-chk input { padding: 0; }
.login-info summary { cursor: pointer; color: var(--mut); width: 1.4rem; list-style: none; }
.login-info p { font-size: .8rem; color: var(--mut); margin: .3rem 0 0; }
.login-volver { text-align: center; font-size: .85rem; margin: .8rem 0 0; }
#blazor-error-ui { color-scheme: light only; background: #ffffe0; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.buscar { padding: .4rem .6rem; border: 1px solid var(--bd); border-radius: 8px; min-width: 220px; }
.chk { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
.btn.chico { padding: .2rem .55rem; font-size: .85rem; }
.exito { color: var(--ok); font-weight: 600; }
.aviso { background: #fff7e0; border: 1px solid #f0d58a; padding: .5rem .8rem; border-radius: 8px; }
.vacio { color: var(--mut); text-align: center; padding: 1rem; }
tr.inactivo { opacity: .55; }
.acciones-fila { white-space: nowrap; }
.pos { display: flex; gap: 1rem; align-items: flex-start; }
.pos-productos { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.pos-prod { display: flex; flex-direction: column; gap: .2rem; text-align: left; padding: .7rem; background: #fff; border: 1px solid var(--bd); border-radius: 10px; cursor: pointer; }
.pos-prod:hover:not(:disabled) { border-color: var(--o); background: var(--os); }
.pos-prod:disabled { opacity: .45; cursor: default; }
.pos-prod .n { font-weight: 600; }
.pos-prod .p { color: var(--o); font-weight: 700; }
.pos-prod .s { font-size: .8rem; color: var(--mut); }
.pos-prod .s.bajo { color: var(--bad); }
.pos-carrito { width: 360px; position: sticky; top: 1rem; }
.pos-carrito .cant { white-space: nowrap; text-align: center; }
.pos-carrito .cant span { display: inline-block; min-width: 1.5rem; text-align: center; }
.agregar-consumo { border-top: 1px solid var(--bd); margin-top: .6rem; padding-top: .5rem; }


.modal.ancho { width: min(760px, 100%); }
.modal h3 { margin: .8rem 0 .3rem; font-size: 1rem; }
.panel { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.panel h2 { margin: 0 0 .6rem; font-size: 1.1rem; }
.panel label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--mut); flex: 1; }
.panel input, .panel select { padding: .5rem .6rem; border: 1px solid var(--bd); border-radius: 8px; font-size: 1rem; color: var(--ink); background: #fff; }
.aviso-ok { color: var(--ok); font-weight: 600; }
.sugerido { display: block; color: var(--mut); font-size: .75rem; }
.modal label.chk { flex-direction: row; align-items: center; gap: .5rem; }

.selector { position: relative; flex: 1; }
.selector-input { width: 100%; box-sizing: border-box; }
.selector-lista { position: absolute; z-index: 60; left: 0; top: 100%; min-width: 100%; width: max-content; max-width: 420px; margin-top: 2px; background: #fff; border: 1px solid var(--bd); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); overflow: hidden; }
.selector-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem .7rem; cursor: pointer; font-size: .95rem; color: var(--ink); }
.selector-item small { color: var(--mut); }
.selector-item.activo, .selector-item:hover { background: var(--os); }
.selector-vacio { padding: .5rem .7rem; color: var(--mut); font-size: .85rem; }
.selector-nuevo { padding: .55rem .7rem; border-top: 1px solid var(--bd); color: var(--o); font-weight: 600; cursor: pointer; font-size: .9rem; }
.selector-nuevo:hover { background: var(--os); }
.modal .campo { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; color: var(--mut); margin-bottom: .7rem; flex: 1; }
.modal .campo-tabla { min-width: 230px; margin: 0; }
.modal-fondo.apilado { z-index: 200; }

.modal.ancho { overflow-x: hidden; }
.lineas { display: grid; gap: .6rem; margin: .6rem 0; }
.linea { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .5rem .6rem; align-items: end; border: 1px solid var(--bd); border-radius: 10px; padding: .6rem; }
.linea .l-prod { grid-column: span 2; min-width: 0; }
.linea label { margin: 0; min-width: 0; }
.linea input { width: 100%; min-width: 0; box-sizing: border-box; }
.linea .campo-tabla { min-width: 0; }
.linea .l-sub { display: flex; flex-direction: column; font-size: .85rem; color: var(--mut); }
.linea .l-sub strong { font-size: 1.05rem; color: var(--ink); padding: .5rem 0; }
.linea .l-del { justify-self: end; }.linea { position: relative; }
.linea .l-prod { padding-right: 2.4rem; }
.linea .l-del { position: absolute; top: .5rem; right: .5rem; }

/* Compras: cabecera, l�neas compactas y modal ampliable */
.modal.ancho { position: relative; transition: width .15s; }
.modal.ancho.grande { width: min(1400px, 98vw); max-height: 96vh; }
.modal-expandir { position: absolute; top: .8rem; right: .8rem; }
.cab-compra { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
.cab-compra > * { min-width: 0; }
.cab-compra input[type=date] { width: 100%; box-sizing: border-box; }
.lineas { container-type: inline-size; }
.linea { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.linea input[type=number] { max-width: 9rem; }
.linea input[type=date] { max-width: 11rem; }
@container (min-width: 640px) {
  .linea { grid-template-columns: minmax(0, 1fr) 5.5rem 8rem 10.5rem 7rem 2rem; }
  .linea .l-prod { grid-column: auto; padding-right: 0; }
  .linea .l-del { position: static; }
}
@media (max-width: 560px) { .cab-compra { grid-template-columns: 1fr; } }

/* Ayuda contextual: �cono "i" que despliega el texto explicativo (regla global: no dejar textos de ayuda fijos) */
.ayuda { position: relative; display: inline-block; vertical-align: middle; margin-left: .3rem; font-weight: 400; }
.ayuda-btn { width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 50%; border: 1px solid var(--bd); background: #fff; color: var(--mut); font: italic 700 .8rem/1 Georgia, serif; cursor: pointer; }
.ayuda-btn:hover, .ayuda-btn[aria-expanded="true"] { color: var(--o); border-color: var(--o); }
.ayuda-txt { position: absolute; z-index: 60; top: calc(100% + .4rem); left: 0; width: max-content; max-width: min(320px, 80vw); padding: .6rem .8rem; background: var(--ink); color: #fff; border-radius: 8px; font-size: .85rem; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }

/* ===== Tema visual global (tarjetas con relieve, tablas con cabecera y cebra, campos con borde visible) ===== */
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; padding-bottom: .5rem; margin-bottom: .8rem; border-bottom: 2px solid var(--os); }
.modal h2 { border-bottom: 0; padding-bottom: 0; }
.top { box-shadow: 0 1px 4px rgba(20,34,59,.08); border-bottom-color: var(--bd); }
.menu { border-right-color: var(--bd); }
.panel, .tarjeta { background: #fff; border: 1px solid var(--bd); border-radius: 12px; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; box-shadow: var(--sombra); }
.tarjeta { max-width: 560px; }
.tarjeta.ancha { max-width: none; }

table.lista { max-width: none; border-collapse: separate; border-spacing: 0; border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; background: #fff; }
table.lista thead th { background: #e4e9f1; color: var(--ink); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .65rem .8rem; border-bottom: 2px solid var(--bd); white-space: nowrap; }
table.lista td { padding: .7rem .8rem; border-bottom: 1px solid var(--bd-suave); vertical-align: middle; }
table.lista tbody tr:nth-child(even) td { background: #f6f8fb; }
table.lista tbody tr:hover td { background: var(--os); }
table.lista tbody tr:last-child td { border-bottom: 0; }
table.lista td + td, table.lista th + th { border-left: 1px solid var(--bd-suave); }
table.lista td .btn + .btn { margin-left: .4rem; }
table.lista td.vacio, .vacio { text-align: center; color: var(--mut); padding: 1.4rem; }
table.tk td, table.cuenta td { border-bottom-color: var(--bd-suave); }

input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--bd); border-radius: 8px; padding: .55rem .7rem; }
input:hover, select:hover { border-color: #a9b4c6; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--o); box-shadow: 0 0 0 3px rgba(255,102,0,.18); }
input[type=checkbox] { padding: 0; accent-color: var(--o); }
.modal input, .modal select, .tarjeta input, .tarjeta select { border: 1.5px solid var(--bd); }
label { font-weight: 600; }
.modal label, .tarjeta label { color: #4a566b; }
.fila-campos { align-items: flex-end; flex-wrap: wrap; gap: .8rem; }
.fila-campos > label, .fila-campos > .campo { min-width: 160px; }

.btn { padding: .55rem 1rem; box-shadow: 0 1px 2px rgba(20,34,59,.2); transition: filter .1s, box-shadow .1s; }
.btn:hover { filter: brightness(1.06); }
.btn.sec { border: 1.5px solid var(--bd); box-shadow: none; background: #fff; }
.btn.sec:hover { border-color: var(--o); color: var(--o); filter: none; }
.btn.chico { padding: .35rem .7rem; font-size: .85rem; }

.modal { border: 1px solid var(--bd); box-shadow: 0 24px 60px rgba(20,34,59,.35); }
.linea { background: #f6f8fb; border: 1.5px solid var(--bd); }
.celda.libre, .bloque.libre { border-color: #b5bfcf; }
.ag .cab { background: #e4e9f1; }
.tl-fila { border-top-color: var(--bd); }
.etq { border: 1px solid rgba(20,34,59,.08); }
.aviso-ok { background: #e6f6ee; border: 1px solid #bfe5d0; border-radius: 8px; padding: .6rem .9rem; }
.error { background: #fdeaea; border: 1px solid #f3c4c4; border-radius: 8px; padding: .6rem .9rem; }
.l-aviso{grid-column:1/-1;background:#fff4d6;border:1.5px solid #e0b341;color:#7a5400;border-radius:8px;padding:.4rem .7rem;font-size:.85rem}
.alertas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
.alerta-card{text-align:left;background:#fff;border:1.5px solid var(--bd);border-left:6px solid #e0b341;border-radius:10px;padding:.8rem 1rem;box-shadow:var(--sombra);cursor:pointer;display:flex;flex-direction:column;gap:.3rem;font:inherit;color:inherit;min-height:44px}
.alerta-card:hover{border-color:#999}
.alerta-card.alta{border-left-color:#d33}
.alerta-card.baja{border-left-color:#4a8}
.alerta-card.nueva strong::before{content:'? ';color:#d33}
.alerta-card small{color:#667}
.menu-badge{background:#d33;color:#fff;border-radius:999px;padding:0 .45rem;font-size:.75rem;margin-left:.4rem}

.menu .grupo{background:none;border:0;text-align:left;padding:.55rem .8rem;border-radius:8px;font:inherit;font-size:.95rem;font-weight:700;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;min-height:40px}
.menu .grupo::after{content:'\25B8';color:var(--mut)}
.menu .grupo.abierto::after{content:'\25BE'}
.menu .grupo:hover{background:var(--bg)}
.menu .sub{display:flex;flex-direction:column;gap:.15rem;margin:0 0 .3rem .6rem;padding-left:.4rem;border-left:2px solid var(--bd)}

/* Ventas abiertas */
.cuentas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:12px 0}
.cuenta-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;background:#fff;border:2px solid #9aa7b4;border-radius:10px;cursor:pointer;font:inherit;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.cuenta-card:hover{border-color:#1f7a4d}
.cuenta-card.cancha{border-left:6px solid #1f7a4d}
.cuenta-card .c-tit{font-weight:700;font-size:1.05rem}
.cuenta-card .c-nom{color:#4a5560}
.cuenta-card .c-tot{font-size:1.3rem}
.puestos-sel{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.puesto-btn{padding:8px 14px;border:2px solid #9aa7b4;border-radius:8px;background:#fff;cursor:pointer;font:inherit}
.puesto-btn.sel{border-color:#1f7a4d;background:#e3f4ea;font-weight:700}

.cant-input { width: 64px; text-align: center; padding: 6px; border: 1.5px solid var(--borde-fuerte, #9aa3b5); border-radius: 8px; font-size: 1rem; }

.cant-rapida { display: flex; align-items: center; gap: 6px; font-weight: 600; }

/* Canchas ahora / plano del predio */
.plano { position: relative; width: 100%; max-width: 980px; border: 4px solid #7d8798; border-radius: 14px; background: repeating-linear-gradient(45deg,#eef2ea,#eef2ea 14px,#e6ece1 14px,#e6ece1 28px); overflow: hidden; margin-bottom: .8rem; }
.fg { container-type: size; position: absolute; box-sizing: border-box; border-radius: 10px; border: 3px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 4px; cursor: pointer; user-select: none; touch-action: none; font-size: .85rem; }
.fg small { font-size: .7rem; opacity: .85; }
.fg .lb { font-size: .7rem; font-weight: 800; letter-spacing: .5px; }
@container (max-height: 70px) { .fg small, .fg .lb { display: none; } }
.fg.libre, .tarj-cancha.libre { background: #bfeccf; border-color: #14a05a; color: #0b5a32; }
.fg.porliberarse, .tarj-cancha.porliberarse { background: #ffe7a8; border-color: #e0a100; color: #7a5200; }
.fg.enjuego, .tarj-cancha.enjuego { background: #ffc9c9; border-color: #d33a3a; color: #8a1f1f; }
.fg.bloqueada, .tarj-cancha.bloqueada { background: #e3e3e3; border-color: #999; color: #666; border-style: dashed; }
.fg.area { background: #dde3ee; border-color: #7d8798; color: #2b3445; cursor: default; }
.fg.edit { cursor: move; outline: 2px dashed var(--ink); outline-offset: -6px; }
.fg.edit.sel { box-shadow: 0 0 0 3px var(--o); }
.fg .rz { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: var(--ink); cursor: nwse-resize; border-radius: 8px 0 0 0; }
.grilla-canchas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.tarj-cancha { border: 3px solid; border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .2rem; cursor: pointer; }
.tarj-cancha .lb { font-size: .75rem; font-weight: 800; letter-spacing: .5px; }
.tarj-cancha small { opacity: .85; }
.chip.nuevo { border-style: dashed; color: var(--mut); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sel-fig { align-items: center; }
.acciones-plano { display: flex; gap: .5rem; flex-wrap: wrap; }
.fg.ct { border-color: var(--c); box-shadow: inset 0 9px 0 var(--c); padding-top: 12px; }
.fg.ct.area { background: color-mix(in srgb, var(--c) 28%, #fff); box-shadow: none; padding-top: 4px; color: #1f2937; }
.fg.ct.edit.sel { box-shadow: inset 0 9px 0 var(--c), 0 0 0 3px var(--o); }
.fg.ct.area.edit.sel { box-shadow: 0 0 0 3px var(--o); }
.fg.ct.bloqueada { border-style: dashed; }
.fila-campos input[type=color] { width: 52px; height: 42px; padding: 2px; cursor: pointer; }

/* Inicio */
.ini-fecha { background: var(--ink); color: #fff; border-radius: 999px; padding: .3rem .9rem; font-size: .85rem; font-weight: 600; }
.ini-acc { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.ini-acc a { background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: .7rem .5rem; text-align: center; font-weight: 700; color: var(--ink); text-decoration: none; font-size: .9rem; }
.ini-acc a span { display: block; font-size: 1.5rem; }
.ini-acc a.p { background: var(--o); border-color: var(--o); color: #fff; }
.ini-acc a.aviso { border-color: var(--o); }
.ini-acc a:hover { box-shadow: var(--sombra); }
.ini-ocultas { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.ini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; align-items: stretch; }
.ini-card { position: relative; display: flex; flex-direction: column; gap: .45rem; background: #fff; border: 2px solid var(--bd); border-radius: 14px; padding: 1rem; min-width: 0; }
.ini-card#bandeja { border-color: var(--o); }
.ini-card.t2 { grid-column: span 2; }
.ini-card.t3 { grid-column: 1 / -1; }
@media (max-width: 700px) { .ini-card.t2, .ini-card.t3 { grid-column: 1 / -1; } }
.ini-card h2 { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: 0; font-size: .85rem; letter-spacing: .4px; text-transform: uppercase; color: #4b5565; }
.ini-card h2 .der { margin-left: auto; }
.ini-grid.edicion .ini-card { cursor: grab; outline: 2px dashed var(--ink); outline-offset: -6px; }
.ini-card.arrastrando { opacity: .4; }
.ini-card.sobre { box-shadow: 0 0 0 3px var(--o); }
.ini-ctl { position: absolute; right: .5rem; top: .5rem; display: flex; gap: .25rem; z-index: 5; }
.ini-ctl button { min-width: 1.7rem; height: 1.7rem; border-radius: 999px; border: 1.5px solid #999; background: #fff; cursor: pointer; font-weight: 800; font-size: .75rem; padding: 0 .4rem; }
.ini-grid.edicion .ini-card h2 { padding-right: 8rem; }
.ini-kv, .ini-fila { display: flex; justify-content: space-between; align-items: center; gap: .6rem; font-size: .9rem; padding: .35rem 0; border-top: 1px solid var(--bd-suave); flex-wrap: wrap; }
.ini-fila small { color: var(--mut); }
.ini-acciones { display: flex; gap: .4rem; }
.ini-lk { color: var(--o); font-weight: 700; font-size: .85rem; text-decoration: none; margin-top: auto; }
.ini-num { font-size: 1.9rem; font-weight: 800; }
.ini-hora { font-size: 2.8rem; font-weight: 800; line-height: 1.1; }
.ini-sub { color: var(--mut); font-size: .9rem; text-transform: capitalize; }
.ini-barra { height: 10px; border-radius: 5px; background: #e1e6ee; overflow: hidden; }
.ini-barra i { display: block; height: 100%; background: var(--o); }
.ini-est { display: flex; gap: .5rem; flex-wrap: wrap; }
.ini-est div { flex: 1; min-width: 70px; border: 2px solid; border-radius: 10px; text-align: center; padding: .5rem .2rem; font-size: .75rem; }
.ini-est b { display: block; font-size: 1.4rem; }
.ini-est .l { background: #bfeccf; border-color: #14a05a; color: #0b5a32; }
.ini-est .j { background: #ffc9c9; border-color: #d33a3a; color: #8a1f1f; }
.ini-est .p { background: #ffe7a8; border-color: #e0a100; color: #7a5200; }
.ini-est .b { background: #e8ebf1; border-color: var(--mut); color: #4b5565; }
.ini-tag { font-size: .7rem; font-weight: 800; border: 1.5px solid; border-radius: 10px; padding: .05rem .5rem; white-space: nowrap; }
.ini-tag.ok { color: #0b5a32; border-color: #14a05a; background: #e4f7ec; }
.ini-tag.warn { color: #7a5200; border-color: #e0a100; background: #fff3d1; }
.ini-tag.bad { color: #8a1f1f; border-color: #d33a3a; background: #ffe9e9; }
.ini-estado { font-weight: 800; font-size: 1.1rem; }
.ini-estado.ok { color: #0f8a4b; }
.ini-estado.mal { color: var(--bad); }
.ini-alerta { font-size: .85rem; padding: .4rem .6rem; border: 1px solid #f0c36d; background: #fff6e0; border-radius: 8px; }
.ini-alerta.alta, .ini-alerta.critica { border-color: #e08a8a; background: #ffe9e9; }
.ini-chat { display: flex; flex-direction: column; gap: .4rem; max-height: 40vh; overflow: auto; margin: .6rem 0; }
.ini-msg { max-width: 85%; padding: .4rem .7rem; border-radius: 10px; background: #eceff5; display: flex; flex-direction: column; }
.ini-msg.negocio { align-self: flex-end; background: var(--os); }
.ini-msg small { color: var(--mut); font-size: .7rem; }
.modal textarea { padding: .5rem .6rem; border: 1.5px solid var(--bd); border-radius: 8px; font: inherit; color: var(--ink); resize: vertical; }

/* Menú contraíble */
.contenido { min-width: 0; }
.menu-caja { position: sticky; top: 0; z-index: 40; align-self: flex-start; height: calc(100vh - 58px); flex: none; width: 230px; }
.menu-caja .menu { height: 100%; width: 100%; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; }
.menu .ic { width: 1.4rem; text-align: center; flex: none; }
.menu a, .menu .pronto, .menu .grupo, .menu .pin { display: flex; align-items: center; gap: .6rem; }
.menu .t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu .pin { background: none; border: 1.5px solid var(--bd); border-radius: 8px; padding: .45rem .8rem; font: inherit; font-size: .85rem; color: var(--mut); cursor: pointer; margin-bottom: .4rem; }
.menu .pin.on { border-color: var(--o); color: var(--o); background: var(--os); font-weight: 700; }
.menu .pin:not(.on) .ic { opacity: .6; transform: rotate(35deg); }
.menu-caja:not(.fija) { width: 58px; }
.menu-caja:not(.fija) .menu { position: absolute; inset: 0 auto 0 0; width: 58px; overflow: hidden; z-index: 40; transition: width .15s; padding-left: .5rem; padding-right: .5rem; }
.menu-caja:not(.fija) .menu:hover, .menu-caja:not(.fija) .menu:focus-within { width: 230px; box-shadow: 4px 0 14px rgba(0,0,0,.15); overflow-y: auto; }
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .grupo::after,
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .sub,
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .menu-badge { display: none; }
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .t { display: none; }
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) a,
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .grupo,
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .pronto,
.menu-caja:not(.fija) .menu:not(:hover):not(:focus-within) .pin { justify-content: center; padding-left: 0; padding-right: 0; }

/* Horarios y franjas */
.fr-paleta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.fr-sep { width: 1px; height: 1.5rem; background: var(--bd, #ccc); }
.fr-pin { border: 2px solid var(--bd, #ccc); border-radius: 999px; padding: .25rem .8rem; background: #fff; cursor: pointer; font: inherit; user-select: none; }
.fr-pin.sel { outline: 2px solid var(--ink, #222); }
.fr-valle { background: #e0f2fe; } .fr-normal { background: #fde68a; } .fr-pico { background: #f97316; color: #fff; }
.fr-scroll { overflow-x: auto; }
.fr-grid { border-collapse: collapse; width: 100%; max-width: 640px; user-select: none; }
.fr-grid th { font-size: .75rem; color: var(--mut, #666); padding: 2px 4px; text-align: center; }
.fr-c { border: 1px solid var(--bd, #ccc); height: 24px; min-width: 36px; cursor: pointer; }
.fr-cerrada { background: repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 4px, #f3f4f6 4px, #f3f4f6 8px); cursor: not-allowed; }
.fr-resumen { display: flex; gap: .5rem; flex-wrap: wrap; }
.ap-dia { display: grid; grid-template-columns: 90px 1fr; gap: .4rem .75rem; align-items: center; border-top: 1px solid var(--bd, #ccc); padding: .5rem 0; }
.ap-dia:first-of-type { border-top: 0; }
.ap-ctl { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ap-tag { font-size: .75rem; font-weight: 800; border-radius: 999px; padding: 2px 10px; background: #e5e7eb; color: var(--mut, #666); }
.ap-noche { background: #1e2a5a; color: #fff; }
.ap-barra { grid-column: 2; position: relative; height: 10px; border-radius: 5px; background: #e5e7eb; overflow: hidden; }
.ap-barra i { position: absolute; top: 0; height: 100%; background: #ffb27a; }

/* Temporadas y calendario de feriados */
.tp-grid { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
@media (max-width: 800px) { .tp-grid { grid-template-columns: 1fr; } }
.tp-item { display: flex; flex-direction: column; gap: .15rem; border: 1.5px solid var(--bd); border-radius: 10px; padding: .55rem .75rem; margin-bottom: .5rem; cursor: pointer; background: #fff; position: relative; }
.tp-item.on { border-color: var(--ink); background: #f4f6fa; }
.tp-item small { color: var(--mut); }
.tp-item .ap-tag { position: absolute; right: .5rem; top: .5rem; }
.tp-datos label { min-width: 150px; }
.cl-leyenda { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .8rem; margin: .6rem 0; }
.cl-leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.cl-meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.cl-mes { border: 1.5px solid var(--bd); border-radius: 10px; padding: .5rem; }
.cl-mes h3 { margin: 0 0 .35rem; font-size: .9rem; }
.cl-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .75rem; }
.cl-dias span { padding: 3px 0; border-radius: 6px; }
.cl-dias .cl-h { color: var(--mut); font-weight: 700; }
.cl-d { cursor: pointer; }
.cl-d:hover { outline: 1.5px solid var(--o); }
.cl-nac { background: #dc2626; color: #fff; font-weight: 800; }
.cl-prv { background: #2563eb; color: #fff; font-weight: 800; }
.cl-loc { background: #16a34a; color: #fff; font-weight: 800; }
.cl-pue { background: #fecaca; color: #7f1d1d; }
.cl-tmp { background: #bae6fd; }
.cl-esp { outline: 2px solid #7c3aed; }
.cl-hoy { text-decoration: underline; font-weight: 800; }
.cl-leyenda i.cl-esp { background: #fff; }
.cl-fila { margin: .35rem 0; }

.im-tablas { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.im-tabla { text-align: left; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: .6rem .8rem; cursor: pointer; display: flex; flex-direction: column; gap: .15rem; font: inherit; }
.im-tabla small { color: #64748b; }
.im-tabla.on { border-color: #16a34a; box-shadow: 0 0 0 2px #bbf7d0; }
.im-tabla.pronto { opacity: .55; cursor: default; }
.im-paso { background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
.im-paso h2 { margin-top: 0; }
.im-cols { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.im-col { border: 1px solid #cbd5e1; border-radius: 6px; padding: .15rem .5rem; font-family: monospace; font-size: .85rem; }
.im-col.ob { border-color: #16a34a; font-weight: 700; }
.im-opts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .6rem; }
.im-nombre { color: #64748b; margin: .4rem 0; }
.im-kpis { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .7rem; }
.im-kpi { border: 1px solid #cbd5e1; border-radius: 8px; padding: .3rem .7rem; }
.im-kpi.nueva { background: #dcfce7; }
.im-kpi.existe { background: #fef9c3; }
.im-kpi.mal { background: #fee2e2; }
.im-scroll { overflow-x: auto; max-width: 100%; }
.im-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

.ubbi-burbuja { position: fixed; right: var(--ub-r, 1.2rem); bottom: var(--ub-b, 1.2rem); touch-action: none; user-select: none; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--o); background: #fff url(brand/ubbi.svg) no-repeat 50% 4% / 150% auto; box-shadow: 0 4px 14px rgba(20,34,59,.3); cursor: pointer; z-index: 900; }
.ubbi-burbuja:hover { transform: scale(1.06); }
.ubbi-burbuja.arrastrando { cursor: grabbing; transform: scale(1.1); }
.ubbi-panel { max-height: calc(100vh - var(--ub-b, 1.2rem) - 5rem); position: fixed; right: var(--ub-r, 1.2rem); bottom: calc(var(--ub-b, 1.2rem) + 4.2rem); width: min(380px, calc(100vw - 2rem)); height: min(520px, calc(100vh - 7rem)); background: #fff; border: 1px solid var(--bd); border-radius: 14px; box-shadow: 0 8px 28px rgba(20,34,59,.3); display: flex; flex-direction: column; overflow: hidden; z-index: 900; }
.ubbi-panel header { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: var(--ink); color: #fff; }
.ubbi-tit { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ubbi-tit small { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ubbi-avatar { width: 36px; height: 36px; border-radius: 50%; background: #fff url(brand/ubbi.svg) no-repeat 50% 4% / 150% auto; flex: none; }
.ubbi-x { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 1rem; }
.ubbi-msgs { flex: 1; overflow-y: auto; padding: .7rem; background: var(--bg); display: flex; flex-direction: column; gap: .45rem; }
.ubbi-m, .ubbi-b { max-width: 85%; padding: .45rem .7rem; border-radius: 12px; white-space: pre-wrap; word-break: break-word; border: 1px solid var(--bd); }
.ubbi-m.yo { align-self: flex-end; background: var(--os); border-color: var(--o); }
.ubbi-m.bot, .ubbi-b { align-self: flex-start; background: #fff; }
.ubbi-ops { display: flex; flex-wrap: wrap; gap: .35rem; }
.ubbi-ops button { background: #fff; border: 1px solid var(--o); color: var(--o); border-radius: 999px; padding: .25rem .65rem; cursor: pointer; font: inherit; font-size: .85rem; }
.ubbi-ops button:hover { background: var(--os); }
.ubbi-in { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--bd); background: #fff; }
.ubbi-in input { flex: 1; min-width: 0; padding: .45rem .6rem; border: 1px solid var(--bd); border-radius: 8px; font: inherit; }
.ubbi-err { margin: 0; border-radius: 0; }

.as-modos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .6rem; }
.as-modo { text-align: left; background: #fff; border: 1.5px solid var(--bd); border-radius: 10px; padding: .7rem .9rem; cursor: pointer; display: flex; flex-direction: column; gap: .2rem; font: inherit; }
.as-modo small { color: var(--mut); }
.as-modo.on { border-color: var(--ok); box-shadow: 0 0 0 2px #bbf7d0; }
.as-modo.pronto { opacity: .55; cursor: default; }
.as-tabla td, .as-tabla th { vertical-align: top; }
.as-acc { white-space: nowrap; }
.as-tag { margin-left: .4rem; border: 1px solid var(--bd); border-radius: 6px; padding: 0 .35rem; font-size: .8rem; }
.as-form { display: grid; gap: .5rem; margin-top: .8rem; max-width: 640px; }
.as-form input, .as-form textarea { padding: .45rem .6rem; border: 1px solid var(--bd); border-radius: 8px; font: inherit; width: 100%; }

tr.im-nueva td { background: #f0fdf4; }
tr.im-existe td { background: #fefce8; }
tr.im-actualizada td { background: #eff6ff; }
tr.im-error td { background: #fef2f2; }.ini-feriado { background: #fff7d6; border: 1px solid #e6c84f; border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; font-weight: 600; }

/* Equipo y permisos */
.eq-tabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.eq-tabs button{border:1px solid var(--bd);background:#fff;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--mut)}
.eq-tabs button.on{background:var(--o);border-color:var(--o);color:#fff}
.eq-form{display:flex;flex-direction:column;gap:10px;max-width:560px}
.eq-form label{display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.9rem}
.eq-form input:not([type=checkbox]),.eq-form select,.eq-nuevo input{border:1px solid var(--bd);border-radius:8px;padding:8px;font:inherit}
.eq-chk{flex-direction:row!important;align-items:center;gap:8px!important;font-weight:500!important}
.eq-sedes{display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px;border:1px solid var(--bd);border-radius:8px}
.eq-acc{display:flex;gap:6px;flex-wrap:wrap}
.eq-nuevo{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.eq-nuevo input{flex:1;min-width:200px}
.eq-aviso{background:var(--os);border:1px solid var(--o);border-radius:8px;padding:8px 12px}
.eq-clave{border:2px solid var(--o)}
.eq-clave-valor{font-family:Consolas,monospace;font-size:1.6rem;letter-spacing:2px;background:var(--bg);border:1px dashed var(--o);border-radius:8px;padding:10px;text-align:center;user-select:all}
.eq-matriz-caja{overflow-x:auto;margin:10px 0}
.eq-matriz th,.eq-matriz td{border:1px solid var(--bd)}
.eq-matriz .eq-celda{text-align:center;width:80px}
.eq-grupo td{background:var(--os);font-weight:700}
.eq-tag{font-size:.75rem}

/* Socios */
.so-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:10px 0}
.so-panel{background:#fff;border:1px solid #b8c2d0;border-radius:12px;padding:14px;margin-top:10px}
.so-panel .modal-acciones{display:flex;gap:8px;margin-top:12px}
.so-panel .fila-campos{gap:1rem}
.so-panel .fila-campos>label:not(.chk){display:flex;flex:1 1 190px;flex-direction:column;gap:.4rem}
.so-panel .fila-campos>label:not(.chk)>input,.so-panel .fila-campos>label:not(.chk)>select{width:100%}
.so-kpi{border:1px solid var(--bd);background:#fff;border-radius:8px;padding:8px;text-align:left;cursor:pointer}
.so-kpi b{display:block;font-size:22px}.so-kpi small{color:var(--mut)}
.so-kpi.on{border-color:var(--o);background:var(--os)}
.so-filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.so-filtros input{flex:1;min-width:200px}
.so-est{font-size:12px;padding:2px 8px;border-radius:10px;border:1px solid var(--bd);white-space:nowrap}
.so-est.al_dia{color:var(--ok);border-color:var(--ok)}.so-est.vencido{color:var(--bad);border-color:var(--bad)}
.so-est.por_vencer{color:#b26a00;border-color:#b26a00}
.so-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-bottom:10px}
.so-datos small{display:block;color:var(--mut)}
.vt{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:1rem;align-items:start}
.vt-card{background:#fff;border:1.5px solid #b8c2d0;border-radius:12px;padding:14px;margin-bottom:12px}
.vt-card h2{margin:0 0 .7rem;font-size:1.05rem}
.vt-card label{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:#4a566b}
.vt-card input,.vt-card select{padding:.5rem .6rem;border:1.5px solid var(--bd);border-radius:8px;font-size:1rem;color:var(--ink);background:#fff;width:100%}
.vt-card label.chk{flex-direction:row;align-items:center}.vt-card label.chk input{width:auto}
.vt-buscar{display:flex;gap:.6rem;align-items:stretch}.vt-buscar input{flex:1;min-width:0}
.vt-sug{border:1.5px solid var(--bd);border-radius:8px;margin-top:.4rem;overflow:hidden}
.vt-sug button{display:flex;justify-content:space-between;gap:1rem;width:100%;padding:.5rem .7rem;border:0;border-bottom:1px solid #e3e7ee;background:#fff;text-align:left;cursor:pointer;font-size:.95rem}
.vt-sug button:hover:not(:disabled),.vt-sug button.sel{background:#dbeafe}.vt-sug button:disabled{opacity:.45}
.vt-der{color:var(--mut);white-space:nowrap}
.vt-tabla{overflow-x:auto;margin-top:.8rem}
.vt-t{width:100%;border-collapse:collapse}
.vt-t th,.vt-t td{border:1px solid var(--bd);padding:.45rem .6rem;text-align:left}
.vt-t th{background:#f4f6fa;font-size:.75rem;text-transform:uppercase;color:#46536a}
.vt-t .der{text-align:right}.vt-t input.cant-input{width:5rem;text-align:right;padding:.25rem .4rem}
.vt-t tr.vt-desc td{color:var(--ok);font-weight:600}
.vt-vacio{text-align:center;color:var(--mut);padding:1.2rem!important}
.vt-acciones{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}
.vt-acciones .espacio{flex:1}
.vt-prods{width:100%}.vt-prods summary{cursor:pointer;font-weight:600;color:var(--ink)}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:.6rem}
.vt-cliente{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.vt-cliente .espacio{flex:1}
.vt-ref{color:var(--mut);margin:.5rem 0 0}
.vt-benef{margin-top:.8rem;border:1.5px solid #9ed5b0;border-radius:10px;background:#f5fff8;padding:.6rem .8rem}
.vt-benef summary{cursor:pointer;font-weight:700;display:flex;gap:.5rem;align-items:center}
.vt-b{margin:.4rem 0;font-weight:600}
.vt-lin{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid #d8dee8}
.vt-dsc{color:var(--ok);font-weight:600}
.vt-tot{border-bottom:0;border-top:2px solid var(--ink);margin-top:.3rem;padding-top:.7rem;font-size:1.25rem;font-weight:800}
.vt-pago{margin-bottom:.4rem}.vt-pago>label{flex:1 1 140px}
.vt{align-items:stretch}.vt>main,.vt>aside{min-width:0}
.vt>main>.vt-card{height:100%;margin-bottom:0}
.vt>aside{display:grid;grid-template-rows:auto 1fr;gap:12px}.vt>aside .vt-card{margin-bottom:0}
.vt-paybox{display:flex;flex-direction:column}.vt-paybox .vt-fin{margin-top:auto}
.vt-cli{grid-column:1/-1;order:-1;margin-bottom:0}
.vt-seg{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.8rem}
.vt-seg button{padding:.5rem .9rem;border:1.5px solid var(--bd);border-radius:999px;background:#fff;cursor:pointer;font:inherit;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.vt-seg button.on{background:var(--o);border-color:var(--o);color:#fff;font-weight:700}
@media(max-width:900px){.vt{grid-template-columns:1fr}}

/* ===== Tema minimalista (volumen suave, colores Ubbica) ===== */
:root { --bg:#e6eaf1; --bd:#c3ccda; --bd-suave:#d5dbe6; --mut:#6b7689; --os:#fff1e6;
        --sombra:0 1px 2px rgba(20,34,59,.10), 0 6px 16px rgba(20,34,59,.10); }
.top { box-shadow: 0 2px 10px rgba(20,34,59,.08); border-bottom-color: var(--bd); position: relative; z-index: 45; }
.menu { box-shadow: 2px 0 10px rgba(20,34,59,.07); border-right-color: var(--bd); }
.menu a, .menu .grupo { border-radius: 9px; }
.menu a:hover { background: var(--bg); }
.menu a.active { background: var(--os); color: var(--o); font-weight: 700; }
.tarjeta, .vt-card, .ini-card, .modal { border: 1px solid var(--bd); border-radius: 14px; box-shadow: var(--sombra); }
.modal { box-shadow: 0 20px 50px rgba(20,34,59,.30); }
.btn { border-radius: 9px; box-shadow: 0 2px 6px rgba(255,102,0,.30); }
.btn.sec { background: #fff; color: var(--ink); border: 1px solid var(--bd); box-shadow: 0 1px 2px rgba(20,34,59,.08); font-weight: 600; }
.btn.sec:hover { background: var(--bg); }
.btn.peligro { box-shadow: 0 2px 6px rgba(211,58,58,.30); }
.btn:disabled { box-shadow: none; }
.seg, .chip { border-color: var(--bd); box-shadow: 0 1px 2px rgba(20,34,59,.06); }
table.lista { border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; box-shadow: var(--sombra); }
table.lista th { background: #f3f5f9; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
table.lista tr:last-child td { border-bottom: 0; }
.tarjeta.ancha { border-radius: 14px; }
.celda.libre, .bloque.libre { border-color: var(--bd); }
input:focus, select:focus { outline: 2px solid #ffd2b3; border-color: var(--o); }
.contenido { padding: 1.6rem 2rem; }
h1 { letter-spacing: -.3px; }

/* Inicio y componentes de estado: menos peso visual */
.ini-acc a { border: 1px solid var(--bd); box-shadow: var(--sombra); font-weight: 600; transition: transform .1s, box-shadow .1s; }
.ini-acc a:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,34,59,.16); }
.ini-acc a.p { border-color: var(--o); box-shadow: 0 4px 12px rgba(255,102,0,.35); }
.ini-acc a.aviso { border-color: var(--o); }
.ini-card { border: 1px solid var(--bd); box-shadow: var(--sombra); }
.ini-card#bandeja { border-color: #ffb98a; }
.ini-card h2 { font-weight: 600; color: var(--mut); letter-spacing: .06em; font-size: .78rem; }
.ini-est div { border-width: 1px; border-radius: 12px; }
.ini-est .l { background: #e8f7ee; border-color: #b7e3c8; }
.ini-est .j { background: #fdeaea; border-color: #f0bcbc; }
.ini-est .p { background: #fff4e0; border-color: #f1d9a6; }
.ini-est .b { background: #eef1f6; border-color: var(--bd); }
.ini-tag { border-width: 1px; border-radius: 999px; font-weight: 700; }
.ini-fecha { font-weight: 600; }
.etq { font-weight: 600; }
.ini-barra { height: 8px; background: #d5dbe6; }

/* Inicio: grilla de 12 columnas con ancho/alto por tarjeta */
.ini-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 84px; grid-auto-flow: row dense; }
.ini-card, .ini-card.t2, .ini-card.t3 { grid-column: span var(--w, 4); grid-row: span var(--h, 3); overflow: hidden; }
.ini-grid.edicion .ini-card { cursor: grab; user-select: none; }
.ini-tam { position: absolute; right: .5rem; bottom: .35rem; background: var(--ink); color: #fff; border-radius: 8px; padding: 0 .45rem; font-size: .72rem; font-weight: 700; }
.ini-x { position: absolute; right: .5rem; top: .4rem; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--bd); background: #fff; cursor: pointer; font-weight: 800; z-index: 6; }
.ini-card.arrastrando { opacity: .5; box-shadow: 0 0 0 3px var(--o); }
.ini-kpi { justify-content: center; }
.ini-kpi-lk { display: block; color: inherit; text-decoration: none; }
.ini-num { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.ini-kpi-t { color: var(--mut); font-size: .85rem; margin-top: .2rem; }
.ini-turno { display: grid; grid-template-columns: 4rem 1fr 1.4fr auto; gap: .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--bd-suave); font-size: .9rem; }
.ini-turno span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-atajos { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.ini-atajos .btn { text-align: left; }
.ini-avisos, .ini-fer { display: flex; flex-direction: column; gap: .4rem; }
.menu .menu-fin { margin-top: .8rem; border-top: 1px solid var(--bd); padding-top: .6rem; }
.ini-fer { flex-direction: row; flex-wrap: wrap; gap: .4rem 1.4rem; }
.ini-aviso { font-size: .88rem; color: inherit; text-decoration: none; }
@media (max-width: 900px) { .ini-card.pq { grid-column: span 6; } }
.ini-res { position: absolute; width: 16px; height: 16px; background: var(--o); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.35); z-index: 6; touch-action: none; }
.ini-res.tl { left: -1px; top: -1px; cursor: nwse-resize; }
.ini-res.tr { right: -1px; top: -1px; cursor: nesw-resize; }
.ini-res.bl { left: -1px; bottom: -1px; cursor: nesw-resize; }
.ini-res.br { right: -1px; bottom: -1px; cursor: nwse-resize; }
.ini-card.redimensionando { box-shadow: 0 0 0 3px var(--o); user-select: none; }
@media (max-width: 900px) { .ini-card.pq { grid-column: span 6; } }
@media (max-width: 600px) { .ini-card, .ini-card.pq { grid-column: 1 / -1; } .ini-turno { grid-template-columns: 3.5rem 1fr auto; } .ini-turno span:nth-child(3) { display: none; } }
.top .producto { font-weight: 600; }
.menu .grupo { font-weight: 600; }
.menu a.active { box-shadow: inset 3px 0 0 var(--o); }
.menu .pin { border-width: 1px; box-shadow: 0 1px 2px rgba(20,34,59,.08); }
.lista, table.lista, table.tk td, table.cuenta td { border-color: var(--bd); }
.tarjeta { border-width: 1px; }
.ag .cab { background: #f3f5f9; border: 1px solid var(--bd-suave); }
.celda.libre { border: 1px dashed var(--bd); background: #fafbfd; }