/* Estilos de Camping Arroyito: tipografía, paleta y componentes tomados del diseño de la web pública. */

:root {
  --rojo: #9E1B1B;        /* titulares */
  --rojo-texto: #5E1414;  /* texto de lectura */
  --rojo-accion: #B3201F; /* botones */
  --verde: #1F4D2B;       /* bloques y acentos */
  --verde-claro: #E9EFE9;
  --linea: #E6E2E2;
  --linea-campo: #CFC7C7;
  --blanco: #FFFFFF;
  --sans: 'Manrope', system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ancho: 1240px;
  --alto-barra: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  color: var(--rojo-texto); background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--rojo); line-height: 1.05; letter-spacing: -.01em; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }
h2 { font-size: 2rem; }
p { max-width: 62ch; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 32px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 30px; font: 600 15px/1 var(--sans);
  border-radius: 2px; border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s;
}
.btn-primario { background: var(--rojo-accion); color: #fff; }
.btn-primario:hover { background: var(--rojo); }
.btn-linea { border-color: var(--rojo); color: var(--rojo); background: transparent; }
.btn-linea:hover { background: var(--rojo); color: #fff; }
.btn-chico { padding: 10px 18px; font-size: 14px; }
.btn-bloque { width: 100%; }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 12px; }
.marca svg { width: 30px; height: 30px; flex-shrink: 0; }
.marca span { font-family: var(--serif); font-size: 1.6rem; color: var(--rojo); line-height: 1; white-space: nowrap; }
.marca-carpa { stroke: var(--verde); }
.marca-puerta { stroke: var(--rojo); }
.marca-clara span { color: #fff; }
.marca-clara .marca-carpa { stroke: #fff; }
.marca-clara .marca-puerta { stroke: rgba(255, 255, 255, .6); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; }
.campo label { font-size: 13px; font-weight: 600; color: var(--verde); margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--linea-campo); border-radius: 0;
  padding: 10px 0; font: 16px var(--sans); color: var(--rojo-texto); background: transparent;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--rojo); }
.alerta {
  padding: 12px 16px; border-left: 3px solid var(--rojo-accion);
  background: #FBF1F1; color: var(--rojo); font-size: 15px; font-weight: 500;
}
/* Aviso informativo (no es un error): ej.: sesión cerrada por inactividad. */
.aviso {
  padding: 12px 16px; border-left: 3px solid var(--verde);
  background: #EEF4EF; color: var(--verde); font-size: 15px; font-weight: 500;
}

/* ---------- Login ---------- */
.login { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; }
.login-panel {
  position: relative; overflow: hidden; background: var(--verde); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  padding: 48px 56px 160px;
}
.login-panel h1 { color: #fff; font-size: clamp(2.8rem, 5vw, 4.6rem); margin-bottom: 20px; }
.login-panel p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; max-width: 34ch; }
.login-bosque { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; fill: rgba(255, 255, 255, .08); }
.login-formulario { display: flex; align-items: center; justify-content: center; padding: 64px 32px; }
.formulario { width: 100%; max-width: 380px; display: grid; gap: 28px; }
.formulario h2 { font-size: clamp(2.4rem, 4vw, 3.2rem); }
.formulario-ayuda { margin-top: -18px; }
.formulario .btn { margin-top: 8px; }
.volver { justify-self: center; font-size: 14px; font-weight: 500; }
.volver:hover { color: var(--verde); }

/* ---------- Barra de navegación ---------- */
.barra { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linea); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--alto-barra); }
.menu { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.menu-enlaces { display: flex; gap: 28px; font-size: 15px; font-weight: 500; }
.menu-enlaces a { padding: 6px 0; border-bottom: 2px solid transparent; }
.menu-enlaces a:hover { color: var(--verde); }
.menu-enlaces a[aria-current="page"] { color: var(--verde); border-bottom-color: var(--verde); font-weight: 600; }
.menu-pronto { padding: 6px 0; opacity: .4; cursor: default; }
.menu-usuario { display: flex; align-items: center; gap: 20px; }
.usuario { display: flex; flex-direction: column; text-align: right; font-weight: 600; line-height: 1.25; color: var(--rojo); }
.usuario small { font-size: 12px; font-weight: 500; color: var(--verde); }
.hamburguesa { display: none; background: none; border: 0; cursor: pointer; width: 32px; height: 32px; }
.hamburguesa span { display: block; height: 2px; background: var(--rojo); margin: 6px 0; }

/* ---------- Contenido ---------- */
.contenido { padding-top: 64px; padding-bottom: 96px; }
.encabezado { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 48px; }
.antetitulo { font-size: 14px; font-weight: 600; color: var(--verde); margin-bottom: 10px; }

/* Etiqueta en la esquina de una tarjeta (ej.: "Inactiva" en el tablero de cabañas). */
.etiqueta {
  position: absolute; top: 20px; right: 20px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; color: var(--verde); background: var(--verde-claro); border-radius: 2px;
}

/* ---------- Formularios: ayudas y errores ---------- */
.campo-ayuda, .campo-error { margin-top: 6px; font-size: 13px; }
.campo-ayuda { color: var(--verde); opacity: .8; }
.campo-error { color: var(--rojo-accion); font-weight: 600; }
.campo-invalido input { border-bottom-color: var(--rojo-accion); }
.guardado { font-size: 14px; font-weight: 600; color: var(--verde); }
.interruptor { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; cursor: pointer; }
.interruptor input { width: 18px; height: 18px; accent-color: var(--verde); }

/* ---------- Tablero de cabañas ---------- */
.tablero-cabanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 24px; }
/* minmax(0, 1fr) en los grids de una columna: sin eso, una tabla o un texto largo adentro estira la columna (y la
   página) en vez de desplazarse dentro de su caja. */
.cabana { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px; border: 1px solid var(--linea); }
.cabana-inactiva { background: #FAF8F8; }
.cabana-inactiva .cabana-cabecera { opacity: .6; }
.cabana-cabecera { display: flex; align-items: center; gap: 16px; padding-right: 80px; }
.cabana-cabecera svg { width: 34px; height: 34px; stroke: var(--rojo); flex-shrink: 0; }
.cabana-cabecera h2 { font-size: 1.8rem; }
.cabana-cabecera p { font-size: 14px; color: var(--verde); margin-top: 4px; }
.cabana-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.cabana-campos .campo:first-child { grid-column: 1 / -1; }
.cabana-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabana-acciones { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.cabana button[disabled] { opacity: .6; cursor: wait; }
/* Tarifa de menores: tarjeta a lo ancho, arriba de las cabañas, con los campos en una fila. */
.menores { margin-bottom: 24px; background: var(--verde-claro); border-color: transparent;
  grid-template-columns: 1fr minmax(320px, auto) auto; align-items: end; }
.menores .cabana-cabecera { padding-right: 0; align-self: center; }
.menores .cabana-campos .campo:first-child { grid-column: auto; }

/* ---------- Calculadora ---------- */
.calculadora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.calculadora-datos .cabana-campos .campo:first-child { grid-column: auto; }
.presupuesto { display: grid; gap: 20px; padding: 32px; background: var(--verde-claro); min-height: 200px; }
.presupuesto .antetitulo { margin-bottom: 0; }
.presupuesto .btn { justify-self: start; }
.presupuesto-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.presupuesto .btn-icono { width: 18px; height: 18px; fill: currentColor; }
.desglose { display: grid; }
.desglose div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; }
.desglose dt { font-weight: 500; }
.desglose dt small { display: block; font-size: 13px; color: var(--verde); font-weight: 500; }
.desglose dd { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desglose-linea { border-top: 1px solid rgba(31, 77, 43, .2); }
.desglose-descuento dd { color: var(--verde); }
.desglose-total { margin-top: 6px; border-top: 2px solid var(--verde); }
.desglose-total dt { font-family: var(--serif); font-size: 1.8rem; color: var(--rojo); }
.desglose-total dd { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--rojo); }

/* ---------- Situaciones de reserva (calendario, detalle, listados) ---------- */
.sit-disponible { background: #ECEBEB; color: var(--rojo-texto); }
.sit-confirmada_con_sena { background: #2F6DB5; color: #fff; }
.sit-confirmada_sin_sena { background: #F2C94C; color: #4A3A00; }
.sit-en_curso { background: #E8822F; color: #3A1C00; }
.sit-finalizada { background: #3F8A55; color: #fff; }
.sit-cancelada { background: transparent; color: var(--rojo-texto); border: 1px dashed var(--linea-campo); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Calendario ---------- */
.cal-navegacion { display: flex; gap: 8px; }
.cal-leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 20px; font-size: 14px; font-weight: 500; }
.cal-leyenda li { display: flex; align-items: center; gap: 8px; }
.cal-leyenda span { width: 16px; height: 16px; border-radius: 3px; }
/* La grilla se desplaza de costado dentro de su contenedor; la columna de cabañas queda fija. */
/* position: relative en los contenedores con desplazamiento: los textos ocultos (.visualmente-oculto) de la tabla
   se ubican respecto de la caja y no de la página; si no, quedan fuera de ella y la página se desplaza de costado. */
.cal-contenedor { position: relative; overflow-x: auto; border: 1px solid var(--linea-campo); }
/* border-collapse: separate para que la columna fija conserve sus bordes al desplazar. Cada celda dibuja
   su borde derecho e inferior: así se forma la grilla sin líneas dobles. */
.cal { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; table-layout: fixed; }
.cal th, .cal td { border-right: 1px solid #DCD6D6; border-bottom: 1px solid #DCD6D6; }
.cal tr > :last-child { border-right: 0; }
.cal tbody tr:last-child > * { border-bottom: 0; }
.cal-cabana {
  position: sticky; left: 0; z-index: 1; width: 150px; padding: 10px 14px; text-align: left;
  background: #fff; font-weight: 600; color: var(--rojo); border-right: 2px solid var(--linea-campo) !important;
}
.cal-cabana small { display: block; font-size: 12px; font-weight: 500; color: var(--verde); }
.cal thead th { background: #F4F1F1; border-bottom: 2px solid var(--linea-campo); }
.cal thead .cal-cabana { background: #F4F1F1; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--verde); }
.cal-dia { width: 33px; padding: 6px 0; text-align: center; font-weight: 600; line-height: 1.2; }
.cal-dia small { display: block; font-size: 11px; font-weight: 500; opacity: .6; }
.cal thead .cal-finde { background: #EAE5E5; }
thead .cal-hoy, .cal thead .cal-hoy { background: var(--verde); color: #fff; }
/* Inicio de semana: línea más marcada antes de cada lunes. */
.cal .cal-lunes { border-left: 2px solid var(--linea-campo); }
.cal td { height: 46px; padding: 0; }
.cal tbody tr:hover .cal-cabana { background: var(--verde-claro); }
.cal-libre { background: #F1EFEF; }
.cal-libre.cal-finde { background: #E8E4E4; }
.cal-libre.cal-hoy { box-shadow: inset 0 0 0 2px rgba(31, 77, 43, .55); }
.cal-reserva { padding: 5px 3px !important; background: #F1EFEF; }
.cal-reserva button {
  display: block; width: 100%; height: 100%; padding: 0 8px; border: 0; border-radius: 4px; cursor: pointer;
  font: 600 12px var(--sans); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
  /* Una marca fina al final de cada noche, para contar los días dentro de la barra. */
  background-image: linear-gradient(to right, transparent calc(100% - 1px), rgba(0, 0, 0, .14) calc(100% - 1px));
  background-size: calc(100% / var(--dias, 1)) 100%;
}
.cal-reserva button:hover { filter: brightness(.92); }
.cal-inactiva .cal-cabana { opacity: .6; }
.cal-detalle { margin-top: 32px; }

/* Detalle de una reserva */
.reserva-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; border: 1px solid var(--linea); max-width: 760px; }
.reserva-detalle-cabecera { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.reserva-detalle-cabecera .antetitulo { margin-bottom: 6px; }
.estado { padding: 6px 12px; border-radius: 3px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.reserva-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 28px; }
.reserva-datos dt { font-size: 13px; font-weight: 600; color: var(--verde); margin-bottom: 4px; }
.reserva-datos dd { font-weight: 500; }
.reserva-datos dd a { text-decoration: underline; }
.reserva-notas { grid-column: 1 / -1; }
.reserva-pagos { display: grid; gap: 16px; padding: 24px; background: var(--verde-claro); }
.reserva-pagos .desglose-total dd { font-size: 2rem; }
.reserva-pago { display: flex; align-items: start; gap: 16px; flex-wrap: wrap; }
.reserva-pago .campo { flex: 1 1 200px; }
.reserva-pago .btn { margin-top: 22px; }

/* ---------- Registrar reserva ---------- */
.reserva-formulario .cabana-campos .campo:first-child { grid-column: auto; }
.reserva-seccion { font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.reserva-seccion:not(:first-child) { margin-top: 12px; padding-top: 24px; border-top: 1px solid var(--linea); }
.reserva-resumen { display: grid; gap: 16px; position: sticky; top: calc(var(--alto-barra) + 24px); }
.formulario-alerta { margin-bottom: 24px; }
.cal-detalle > .guardado { margin-bottom: 12px; }

/* Días libres del calendario: toda la celda es un enlace para registrar una reserva desde ese día. */
.cal-libre a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cal-libre a:hover { background: var(--verde-claro); }
.cal-libre a:hover::after { content: "+"; font: 600 18px var(--sans); color: var(--verde); }

/* ---------- Listado de reservas ---------- */
.filtros {
  display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 20px 24px; align-items: end;
  padding: 24px; margin-bottom: 24px; border: 1px solid var(--linea);
}
.listado-cantidad { margin-bottom: 12px; font-size: 14px; font-weight: 600; color: var(--verde); }
.tabla-contenedor { position: relative; overflow-x: auto; border: 1px solid var(--linea-campo); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
/* Misma tipografía en celdas de texto y en campos editables: los inputs toman la letra de la tabla. */
.tabla .campo input { font: inherit; color: inherit; }
.tabla .num, .tabla .num input { font-variant-numeric: tabular-nums; }
/* Primera columna (nombre del producto o plato) en negrita, sea texto o campo. */
.tabla td:first-child strong, .tabla td:first-child .campo input { font-weight: 600; }
.tabla th, .tabla td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #DCD6D6; vertical-align: top; }
.tabla thead th {
  background: #F4F1F1; border-bottom: 2px solid var(--linea-campo); white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--verde);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #FAF8F8; }
.tabla td small { display: block; font-size: 12px; color: var(--verde); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Los links con forma de botón (ej.: Ficha) conservan los colores del botón. */
.tabla td a:not(.btn) { font-weight: 600; color: var(--rojo); }
.tabla td a:not(.btn):hover { text-decoration: underline; }
.tabla .estado { display: inline-block; font-size: 12px; padding: 4px 10px; }
.pagado { font-weight: 600; color: var(--verde); }
.vacio { padding: 40px 24px; text-align: center; border: 1px dashed var(--linea-campo); color: var(--verde); }

/* Acciones de la ficha */
.reserva-acciones { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; border-top: 1px solid var(--linea); }
.reserva-acciones .btn[disabled] { opacity: .6; cursor: wait; }
.btn-peligro { margin-left: auto; border-color: var(--linea-campo); color: var(--rojo-accion); background: transparent; }
.btn-peligro:hover { border-color: var(--rojo-accion); background: #FBF1F1; }

/* ---------- Dashboard (Inicio) ---------- */
.kpis {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); margin-bottom: 32px;
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea);
}
.kpi { display: grid; align-content: start; gap: 6px; padding: 24px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.kpi-ocupacion { background: var(--verde-claro); }
.kpi-etiqueta { font-size: 13px; font-weight: 600; color: var(--verde); }
.kpi-valor { font-family: var(--serif); font-size: 2.8rem; line-height: 1; color: var(--rojo); font-variant-numeric: tabular-nums; }
.kpi-valor small { font-size: 1.4rem; }
.kpi-monto { font-size: 2.1rem; }
.kpi-detalle { font-size: 13px; }
.kpi-detalle a { text-decoration: underline; }
.kpi-barra { height: 8px; margin: 6px 0 2px; background: rgba(31, 77, 43, .15); border-radius: 4px; overflow: hidden; }
.kpi-barra span { display: block; height: 100%; background: var(--verde); border-radius: 4px; }

.dash-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.dash-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; margin-bottom: 24px; }
.dash-columnas .dash-panel { margin-bottom: 0; }
.dash-panel > h2 { font-size: 1.8rem; }
.dash-panel .vacio { padding: 28px 20px; }
.movimientos { list-style: none; border: 1px solid var(--linea-campo); }
.movimientos li + li { border-top: 1px solid #DCD6D6; }
.movimientos a { display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; }
.movimientos a:hover { background: #FAF8F8; }
.mov-cabana { font-weight: 600; color: var(--rojo); }
.mov-titular { font-weight: 500; }
.mov-titular small, .mov-derecha small { display: block; font-size: 12px; color: var(--verde); }
.mov-derecha { display: grid; justify-items: end; gap: 4px; text-align: right; }
.mov-derecha .estado { font-size: 12px; padding: 3px 9px; }

.cabanas-ahora { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.cabanas-ahora a { display: grid; gap: 4px; padding: 18px; border-radius: 4px; min-height: 108px; transition: filter .2s; }
.cabanas-ahora a:hover { filter: brightness(.94); }
.cabanas-ahora strong { font-size: 16px; }
.cabanas-ahora span { font-size: 14px; font-weight: 600; }
.cabanas-ahora small { font-size: 12px; opacity: .85; }
.cabanas-ahora .sit-disponible { border: 1px dashed var(--linea-campo); }

/* ---------- Productos ---------- */
.filtros-productos { grid-template-columns: 2fr 1fr auto; }
.filtros-platos { grid-template-columns: 2fr 1fr; }
.kpis-cantina { grid-template-columns: repeat(2, 1fr); }
.ventas-fecha { display: flex; align-items: end; gap: 16px; }
.ventas-fecha .campo { width: 200px; }
.cantina-seccion .kpis { margin-bottom: 0; }
.venta-items { list-style: none; display: grid; gap: 2px; }
.tabla .venta-items small { display: inline; margin-left: 6px; }
.venta-total { font-weight: 600; }
.cantina-seccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 48px; scroll-margin-top: calc(var(--alto-barra) + 16px); }
.cantina-seccion > h2 { font-size: 2.2rem; }
.cantina-seccion .filtros { margin-bottom: 0; }
.cantina-seccion .producto-alta { margin-bottom: 16px; }
.cantina-seccion .vacio { max-width: none; }
.producto-alta { display: grid; gap: 16px; padding: 24px; margin-bottom: 24px; background: var(--verde-claro); }
.producto-alta .reserva-seccion { margin-top: 0; padding-top: 0; border-top: 0; }
.producto-alta-campos { display: grid; grid-template-columns: 2fr 1.2fr 1.3fr 1fr auto; gap: 16px 20px; align-items: start; }
.producto-alta-campos .btn { margin-top: 22px; }
/* Dato que falta y conviene completar (ej.: plato sin precio). */
.faltante { font-weight: 600; color: var(--rojo-accion); }
.tabla code { font: inherit; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }
.tabla .acciones .interruptor { margin-right: 8px; font-size: 13px; }
.tabla .acciones .btn + .btn { margin-left: 6px; }
.fila-inactiva td { color: rgba(94, 20, 20, .55); }
.fila-edicion { background: #FBFAF6; }
.fila-edicion .campo input { padding: 6px 0; }
.fila-edicion .num input { text-align: right; }
.tabla td small.guardado { font-size: 12px; }
.plato-alta .producto-alta-campos { grid-template-columns: 2fr 1.2fr 1fr auto; }
.tabla-platos td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.tabla-platos .campo input { padding: 6px 0; border-bottom-color: transparent; }
.tabla-platos tr:hover .campo input, .tabla-platos .campo input:focus { border-bottom-color: var(--linea-campo); }
.tabla-platos .num input { text-align: right; max-width: 140px; margin-left: auto; }
.tabla-platos input.sin-precio::placeholder { color: var(--rojo-accion); font-weight: 600; opacity: 1; }
.tabla-platos .guardado, .tabla-platos .campo-error { margin-top: 2px; font-size: 12px; }

/* ---------- Escáner de códigos ---------- */
.buscador-escaner { display: flex; align-items: center; gap: 12px; }
.buscador-escaner input { flex: 1; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; }
.escaner {
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 24px;
  border: 0; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25); color: var(--rojo-texto);
}
.escaner::backdrop { background: rgba(30, 20, 20, .55); }
.escaner[open] { display: grid; gap: 16px; }
.escaner-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.escaner-cabecera h2 { font-size: 1.8rem; }
.escaner-camara { width: 100%; overflow: hidden; border-radius: 4px; background: #111; }
.escaner-camara:empty { display: none; }
.escaner-camara video { display: block; width: 100% !important; height: auto !important; }
.escaner-manual { display: flex; align-items: end; gap: 12px; }
.escaner-manual .campo { flex: 1; }
.escaneo { display: grid; gap: 12px; padding: 16px; background: var(--verde-claro); }
.escaneo h3 { font: 600 18px var(--sans); color: var(--rojo); }
.escaneo .antetitulo { margin-bottom: 0; }
.escaneo-datos { display: flex; gap: 32px; }
.escaneo-datos dt { font-size: 13px; font-weight: 600; color: var(--verde); }
.escaneo-datos dd { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.escaneo-precio { display: flex; align-items: end; gap: 12px; }
.escaneo-precio .campo { flex: 1; }
.escaneo-otro { justify-self: start; margin-top: 4px; }

/* ---------- Pantalla de venta ---------- */
.ventas-nueva { margin-left: auto; }
.venta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.venta-buscar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.resultados { list-style: none; border: 1px solid var(--linea-campo); }
.resultados li + li { border-top: 1px solid #DCD6D6; }
.resultado {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 12px 16px;
  border: 0; background: #fff; font: inherit; font-size: 14px; color: inherit; text-align: left; cursor: pointer;
}
.resultado:hover:not([disabled]) { background: var(--verde-claro); }
.resultado[disabled] { cursor: not-allowed; opacity: .75; }
.resultado-nombre { font-weight: 600; }
.resultado small { display: block; font-size: 12px; font-weight: 500; color: var(--verde); }
.resultado-precio { text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.venta-detalle { position: sticky; top: calc(var(--alto-barra) + 24px); }
.venta-detalle #carrito { display: grid; gap: 16px; }
.carrito { list-style: none; border-top: 1px solid var(--linea); }
.carrito li { display: grid; grid-template-columns: 1fr 70px 100px 32px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.carrito-nombre { font-weight: 600; }
.carrito-nombre small { display: block; font-size: 12px; font-weight: 500; color: var(--verde); }
.carrito-cantidad input { padding: 4px 0; text-align: center; font: inherit; }
.carrito-subtotal { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.carrito-quitar { width: 32px; height: 32px; border: 1px solid var(--linea-campo); border-radius: 2px; background: transparent; color: var(--rojo-accion); font-size: 18px; cursor: pointer; }
.carrito-quitar:hover { border-color: var(--rojo-accion); background: #FBF1F1; }
.carrito-no-vendible { background: #FBF1F1; }
.venta-total-linea { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; }
.venta-total-linea span:first-child { font-family: var(--serif); font-size: 1.8rem; color: var(--rojo); }
.venta-total-linea span:last-child { font-family: var(--serif); font-size: 2.4rem; color: var(--rojo); font-variant-numeric: tabular-nums; }
.venta-registrada a { margin-left: 6px; text-decoration: underline; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Fidelización ---------- */
.filtros-clientes { grid-template-columns: 1fr; }
.cliente-alta .producto-alta-campos { grid-template-columns: 1fr 1fr 1fr .8fr 1.2fr; }
.cliente-alta-pie { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.consentimiento { font-size: 14px; }
.consentimiento.campo-invalido span { color: var(--rojo-accion); }
.celda-doble { display: grid; gap: 4px; }
.cliente-ficha { max-width: 860px; }
/* Círculos de la tarjeta de visitas (_sellos.html): los comparten la ficha del cliente y su tarjeta pública. */
.sellos { list-style: none; display: grid; grid-template-columns: repeat(var(--columnas, 6), minmax(0, 1fr)); gap: clamp(8px, 3vw, 30px); }
.sello {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border: clamp(3px, .8vw, 5px) solid var(--verde); border-radius: 50%; background: #fff;
}
.sello-lleno::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--verde); }
.sello-premio { border-color: var(--rojo-accion); }
.sello-premio svg { position: relative; z-index: 1; width: 46%; height: 46%; stroke: var(--rojo-accion); }
.sello-premio.sello-lleno::after { background: var(--rojo-accion); }
.sello-premio.sello-lleno svg { stroke: #fff; fill: #fff; }
.ficha-progreso .sellos { max-width: 600px; margin: 8px 0 4px; }
.ficha-progreso { padding: 24px; border: 1px solid var(--linea); background: var(--verde-claro); }
.ficha-hoy { font-weight: 600; color: var(--verde); }
.ficha-tarjeta { display: flex; gap: 24px; align-items: center; padding: 20px; border: 1px solid var(--linea); }
.ficha-tarjeta img { flex-shrink: 0; width: 160px; height: 160px; }
.ficha-tarjeta h3 { font-size: 1.6rem; margin-bottom: 4px; }
.ficha-tarjeta p { font-size: 14px; }
.ficha-tarjeta-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ficha-ingresos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ficha-ingresos h3 { font-size: 1.6rem; }
.ingreso-anulado td { color: #9A8F8F; }
.ingreso-anulado td:first-child strong { text-decoration: line-through; }
.programa { grid-template-columns: 2fr 1fr; margin-bottom: 40px; }
.programa .kpi { gap: 10px; }
.programa-premio { background: var(--verde-claro); }
.programa-texto { font-size: 1.1rem; font-weight: 600; color: var(--rojo); }
.programa-texto small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--verde); }
.programa-premio .btn { justify-self: start; }
.premio-campos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 20px; }
.premio-descripcion { grid-column: 1 / -1; }
.premio-pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Configuración (solo admin) ---------- */
.config-general { margin-bottom: 0; }
.config-general .cabana-campos { grid-template-columns: minmax(0, 1fr); max-width: 460px; }
.config-ayuda { max-width: 70ch; font-size: 14px; color: var(--verde); }
.usuario-alta-campos { grid-template-columns: 1.4fr 1.4fr 1fr auto; }
.tabla-usuarios td { vertical-align: middle; }
.tabla-usuarios td small.campo-error { font-size: 12px; }
.usuario-rol { padding: 6px 8px; border: 1px solid var(--linea-campo); border-radius: 2px; background: #fff; font: inherit; color: inherit; }
.usuario-inactivo td:first-child strong { color: #9A8F8F; }
.galeria-alta-campos { grid-template-columns: 1.3fr 1.5fr auto; }
.fotos-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foto-tarjeta { display: grid; align-content: start; border: 1px solid var(--linea); background: #fff; }
.foto-tarjeta-imagen { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--verde-claro); }
.foto-tarjeta-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mismo sello que la tarjeta del sitio (sitio.css no se carga en el panel). */
.foto-tarjeta .aloja-sello {
  position: absolute; top: 14px; left: 14px; padding: 6px 11px; background: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--verde);
}
.foto-tarjeta-cuerpo { display: grid; gap: 12px; padding: 20px 22px 24px; }
.foto-tarjeta-cuerpo h3 { font-size: 1.8rem; }
.foto-tarjeta-origen { font-size: 14px; color: var(--verde); }
.foto-tarjeta-opcion { border-top: 1px solid var(--linea); padding-top: 12px; }
.foto-tarjeta-opcion summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--rojo); }
.foto-tarjeta-opcion[open] summary { margin-bottom: 12px; }
.selector-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.selector-foto { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.selector-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selector-foto:hover, .selector-foto:focus-visible { border-color: var(--rojo-accion); outline: none; }
.selector-foto-actual { border-color: var(--verde); }
.foto-tarjeta-subir { display: grid; gap: 12px; }
.foto-tarjeta-subir .btn { justify-self: start; }
.foto-tarjeta-original { justify-self: start; }
.galeria-alta-campos input[type="file"] { padding: 8px 0; font: inherit; font-size: 14px; }
.galeria-admin { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.foto-admin { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--linea); background: #fff; }
.foto-admin-imagen { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--verde-claro); }
.foto-admin-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-admin-numero {
  position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 700; color: var(--verde);
}
.foto-admin-oculta { position: absolute; top: 10px; right: 10px; padding: 4px 10px; background: var(--rojo-texto); color: #fff; font-size: 12px; font-weight: 600; }
.foto-oculta .foto-admin-imagen img { opacity: .45; filter: grayscale(1); }
.foto-admin-cuerpo { display: grid; gap: 10px; align-content: start; padding: 14px 16px 16px; }
.foto-admin-cuerpo .campo textarea { padding: 6px 0; font: inherit; font-size: 14px; line-height: 1.4; resize: none; }
.foto-admin-cuerpo .guardado, .foto-admin-cuerpo .campo-error { font-size: 12px; }
.foto-admin-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.foto-admin-acciones .btn { padding: 8px 12px; }
.foto-admin-acciones .btn-peligro { margin-left: auto; }

/* ---------- Paginación de tablas ---------- */
.paginacion { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 16px; font-size: 14px; }
.paginacion a, .paginacion span {
  min-width: 38px; padding: 8px 12px; text-align: center; border: 1px solid var(--linea-campo); border-radius: 2px;
}
.paginacion a { font-weight: 600; color: var(--rojo); }
.paginacion a:hover { background: var(--verde-claro); border-color: var(--verde); }
.paginacion .pag-actual { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.paginacion .pag-inactiva { opacity: .4; }
.paginacion .pag-salto { border-color: transparent; }

/* ---------- Responsive ---------- */
/* El menú del panel tiene muchas secciones: pasa a la hamburguesa antes que el del sitio público (que la usa
   desde 860px, más abajo). Mismas reglas que las de 860px, solo para el panel. */
@media (max-width: 1300px) {
  body:not(.sitio) .hamburguesa { display: block; }
  body:not(.sitio) .menu {
    display: none; position: absolute; top: var(--alto-barra); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 20px 32px; background: #fff; border-bottom: 1px solid var(--linea);
  }
  body:not(.sitio) .menu.abierto { display: flex; }
  body:not(.sitio) .menu-enlaces { flex-direction: column; gap: 4px; }
  body:not(.sitio) .menu-enlaces a, body:not(.sitio) .menu-pronto { padding: 10px 0; }
  body:not(.sitio) .menu-enlaces a[aria-current="page"] { border-bottom-color: transparent; }
  body:not(.sitio) .menu-usuario { justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--linea); }
  body:not(.sitio) .usuario { text-align: left; }
}
@media (max-width: 1024px) {
  .menores { grid-template-columns: 1fr; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtro-busqueda { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-ocupacion { grid-column: 1 / -1; }
  .dash-columnas { grid-template-columns: minmax(0, 1fr); }
  .venta { grid-template-columns: minmax(0, 1fr); }
  .venta-detalle { position: static; }
  .producto-alta-campos { grid-template-columns: 1fr 1fr; }
  .fotos-tarjetas { grid-template-columns: 1fr; }
  .producto-alta-campos .campo:first-child { grid-column: 1 / -1; }
  .cliente-alta .producto-alta-campos { grid-template-columns: 1fr 1fr; }
  .cliente-alta-pie { flex-direction: column; align-items: stretch; }
  .programa { grid-template-columns: 1fr; }
  .ficha-tarjeta { flex-direction: column; align-items: flex-start; }
  .premio-campos { grid-template-columns: 1fr; }
  .menu-enlaces { gap: 20px; }
  .login { grid-template-columns: 1fr; }
  .login-panel { padding: 32px 32px 96px; gap: 40px; }
  .login-formulario { align-items: flex-start; padding: 56px 32px; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .hamburguesa { display: block; }
  .menu {
    display: none; position: absolute; top: var(--alto-barra); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 24px;
    padding: 20px; background: #fff; border-bottom: 1px solid var(--linea);
  }
  .menu.abierto { display: flex; }
  .menu-enlaces { flex-direction: column; gap: 4px; }
  .menu-enlaces a, .menu-pronto { padding: 10px 0; }
  .menu-enlaces a[aria-current="page"] { border-bottom-color: transparent; }
  .menu-usuario { justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--linea); }
  .usuario { text-align: left; }
  .contenido { padding-top: 40px; padding-bottom: 64px; }
  .encabezado { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tablero-cabanas { grid-template-columns: minmax(0, 1fr); }
  .cabana { padding: 24px 20px; }
  .cabana-campos { grid-template-columns: minmax(0, 1fr); }
  .calculadora { grid-template-columns: minmax(0, 1fr); }
  .calculadora-datos .cabana-campos { grid-template-columns: 1fr 1fr; }
  .presupuesto { padding: 24px 20px; }
  .cal-cabana { width: 112px; padding: 8px 10px; }
  .cal-dia { width: 34px; }
  .cal-navegacion { flex-wrap: wrap; }
  .reserva-resumen { position: static; }
  .filtros { padding: 16px; }
  .btn-peligro { margin-left: 0; }
  .reserva-detalle { padding: 24px 20px; }
  .reserva-detalle-cabecera { flex-direction: column; }
  .movimientos a { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .mov-cabana { grid-column: 1 / -1; }
  .login-panel { padding: 24px 20px 72px; }
  .login-panel p { display: none; }
  .login-formulario { padding: 40px 20px; }
  /* Tablas: en vez de apretar las columnas hasta partir cada nombre en varios renglones, mantienen un ancho
     cómodo y se desplazan de costado dentro de su caja (.tabla-contenedor). */
  .tabla { min-width: 640px; }
  .tabla th, .tabla td { white-space: nowrap; }
  /* Campos editables dentro de la tabla (platos, edición de productos y clientes): un campo no crece con su
     texto, así que se les da un ancho mínimo para que el nombre no quede cortado. */
  .tabla .campo input { min-width: 7rem; }
  .tabla td:first-child .campo input { min-width: 19rem; }
}
/* Celulares chicos. */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .contenido { padding-top: 28px; }
  .encabezado { margin-bottom: 32px; }
  .cabana, .reserva-detalle { padding: 20px 16px; }
  .filtros, .producto-alta, .presupuesto, .ficha-progreso, .reserva-pagos { padding: 16px; }
  .kpi { padding: 18px 16px; }
  .kpi-valor { font-size: 2.4rem; }
  .kpi-monto { font-size: 1.8rem; }
  .menu, body:not(.sitio) .menu { padding: 16px; }
  .carrito li { grid-template-columns: minmax(0, 1fr) 52px 88px 40px; gap: 8px; }
  .ficha-tarjeta { padding: 16px; }
  .escaner { padding: 16px; }
  .escaner-manual, .escaneo-precio { flex-wrap: wrap; }
}
/* Pantallas táctiles: botones con alto cómodo para el dedo y, en los campos, letra de 16px como mínimo
   (con menos, Safari del iPhone hace zoom al tocar el campo y descuadra la pantalla). */
@media (pointer: coarse) {
  .btn-chico { min-height: 40px; }
  .carrito-quitar { width: 40px; height: 40px; }
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}