:root {
  --marca: #21295C;
  --primario: #065A82;
  --primario-claro: #E8F0F4;
  --ink: #1E2635;
  --ink-soft: #64707D;
  --fondo: #F4F5F7;
  --linea: #E1E4E9;
  --blanco: #FFFFFF;
  --exito: #02C39A;
  --peligro: #B3261E;
  --peligro-claro: #FBEAE8;
  --advertencia: #A66B1E;
  --advertencia-claro: #FBF1E4;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fondo);
  color: var(--ink);
  font-family: 'Work Sans', Arial, sans-serif;
}

a { color: var(--primario); }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}

.login-marca {
  background: var(--marca);
  padding: 18px 26px;
}

.login-marca span {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: bold;
  font-size: 19px;
  color: #fff;
}

.login-body { padding: 28px 26px 30px; }

.login-body h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 20px;
}

/* ---------- Layout general del panel ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--marca);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.sidebar .marca {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: bold;
  font-size: 18px;
  padding: 0 22px 6px;
}

.sidebar .nombre-comercio {
  font-size: 12px;
  color: #C7CBEA;
  padding: 0 22px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 10px;
}

.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 22px;
  background: none;
  border: none;
  color: #D7DAF0;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.nav-item:hover { background: rgba(255,255,255,0.08); }

.nav-item.activo {
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-weight: 600;
  border-left: 3px solid var(--exito);
}

.nav-spacer { flex: 1; }

.nav-logout {
  margin: 0 22px;
  padding: 10px 0;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  color: #fff;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 13px;
  cursor: pointer;
}

.main {
  flex: 1;
  padding: 30px 36px 60px;
  max-width: 980px;
}

.main h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 6px;
}

.subtitulo {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 24px;
}

/* ---------- Tarjetas / secciones ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 22px;
}

.tarjeta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 14px;
}

/* ---------- Tablas ---------- */
table.datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.datos th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
}

table.datos td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

table.datos tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.pendiente { background: var(--advertencia-claro); color: var(--advertencia); }
.badge.confirmada { background: #E3F7F1; color: var(--exito); }
.badge.cancelada { background: var(--peligro-claro); color: var(--peligro); }
.badge.completada { background: var(--primario-claro); color: var(--primario); }
.badge.no_asistio { background: #EEE; color: var(--ink-soft); }

/* ---------- Formularios ---------- */
label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 14px 0 6px;
}
label:first-of-type { margin-top: 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="color"], select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
}

input:focus, select:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
  border-color: var(--primario);
}

.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
}
.check-row input { width: auto; }
.check-row label { margin: 0; color: var(--ink); font-size: 14px; }

.fila-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: none;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primario { background: var(--primario); color: #fff; }
.btn-primario:disabled { background: var(--linea); color: var(--ink-soft); cursor: not-allowed; }
.btn-secundario { background: #fff; border: 1px solid var(--linea); color: var(--ink); }
.btn-peligro { background: #fff; border: 1px solid var(--peligro); color: var(--peligro); }
.btn-chico { padding: 6px 14px; font-size: 13px; }

.mensaje-error {
  font-size: 13px;
  color: var(--peligro);
  margin-top: 10px;
}
.mensaje-exito {
  font-size: 13px;
  color: var(--exito);
  margin-top: 10px;
}

.estado-vacio {
  color: var(--ink-soft);
  font-size: 14px;
  padding: 24px 0;
  text-align: center;
}

.link-publico {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--fondo);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  word-break: break-all;
}

.hidden { display: none !important; }

/* ---------- Menú móvil (hamburguesa + cajón deslizable) ---------- */
.barra-movil {
  display: none;
  align-items: center;
  gap: 14px;
  background: var(--marca);
  color: #fff;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 85;
}
.btn-hamburguesa {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}
.barra-movil-marca { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 17px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 38, 0.55);
  z-index: 89;
}
.sidebar-overlay.abierto { display: block; }

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .barra-movil { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
  }
  .sidebar.abierto { transform: translateX(0); }

  .nav-item { border-left: none !important; }
  .nav-item.activo { border-left: 3px solid var(--exito) !important; }

  .main { padding: 20px 16px 40px; }
  .fila-form { grid-template-columns: 1fr; }
}


/* ---------- Comentarios ---------- */
.nav-item-comentarios { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.badge-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--peligro);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.nav-item:not(.activo) .badge-contador { background: #E35B51; }

.pestañas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--linea);
  margin-bottom: 20px;
}
.pestaña {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.pestaña:hover { color: var(--ink); }
.pestaña.activa { color: var(--primario); border-bottom-color: var(--primario); }
.pestaña .badge-contador { background: var(--advertencia); }

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

.comentario-tarjeta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px 18px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.comentario-tarjeta.comentario-saliendo { opacity: 0; transform: translateX(8px); }

.comentario-check { position: relative; flex: none; padding-top: 2px; cursor: pointer; }
.comentario-check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; }
.comentario-check span {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid var(--linea);
  border-radius: 7px;
  background: var(--blanco);
}
.comentario-check input:checked + span {
  background: var(--exito);
  border-color: var(--exito);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}
.comentario-check input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }
.comentario-check input:disabled { cursor: default; }

.comentario-cuerpo { flex: 1; min-width: 0; }
.comentario-texto { margin: 0 0 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.comentario-meta { margin: 0; font-size: 12.5px; color: var(--ink-soft); }

/* ============================================================
   LISTAS — tabla si hay espacio, tarjetas si no (mismo principio
   que el panel del comercio).
   ============================================================ */
.lista-contenedor { container-type: inline-size; margin-bottom: 22px; }
.lista-contenedor.l-simple { container-name: lista; }
.lista-tabla-caja { display: none; }
.lista-tarjetas { display: flex; flex-direction: column; gap: 14px; }
.lista-contenedor.vacio .lista-tarjetas,
.lista-contenedor.vacio .lista-tabla-caja { display: none; }

.lista-estado {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
}

.lista-tabla-caja {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  overflow: hidden;
}
.tabla-lista { width: 100%; border-collapse: collapse; }
.tabla-lista th {
  text-align: left;
  padding: 14px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--linea);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.tabla-lista td { padding: 14px 16px; border-bottom: 1px solid var(--linea); font-size: 14px; vertical-align: middle; overflow-wrap: anywhere; }
.tabla-lista tbody tr:last-child td { border-bottom: none; }
.tabla-lista tbody tr:hover { background: #FAFBFD; }
.tabla-lista th.col-acciones { text-align: right; width: 1%; white-space: nowrap; }
.tabla-lista td:last-child { text-align: right; white-space: nowrap; }
.tabla-lista th:first-child { width: 22%; }

@container lista (min-width: 700px) {
  .lista-contenedor:not(.vacio) .lista-tabla-caja { display: block; }
  .lista-contenedor:not(.vacio) .lista-tarjetas { display: none; }
}

/* Tarjetas (angosto) */
.item-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 16px 18px;
}
.item-tarjeta-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-titulo { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 16px; color: var(--ink); overflow-wrap: anywhere; }
.item-detalle { margin: 6px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.item-datos { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: 13px; color: var(--ink); }
.item-tarjeta-pie { margin-top: 14px; }

/* ---------- Campos de texto en celulares y tabletas ---------- */

/* iPhone y iPad hacen zoom automático al tocar un campo con letra menor a
   16px, y luego no regresan solos a su tamaño — mismo arreglo que el panel. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
input, select, textarea { max-width: 100%; }

/* ---------- App instalable (PWA) ---------- */
.nav-instalar {
  margin: 0 22px 10px;
  padding: 10px 0;
  background: rgba(166, 107, 30, 0.16);
  border: 1px solid var(--advertencia);
  border-radius: 8px;
  color: #fff;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nav-instalar:hover { background: rgba(166, 107, 30, 0.28); }

.barra-sin-conexion {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 250;
  background: var(--advertencia-claro);
  color: var(--advertencia);
  border-bottom: 1px solid var(--advertencia);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
}
body.sin-conexion { padding-top: 36px; }
body.sin-conexion .barra-movil { top: 36px; }