: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;
}

@media (max-width: 720px) {
  table.datos { min-width: 560px; }
  .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

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;
}
.link-publico span { flex: 1; min-width: 0; }
.link-publico button { flex-shrink: 0; white-space: nowrap; }

.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); }
  .sidebar .marca, .sidebar .nombre-comercio { display: block; }

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

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


/* ---------- Dictado por voz ---------- */
.grabando {
  background: var(--peligro) !important;
  border-color: var(--peligro) !important;
  color: #fff !important;
  animation: pulso-grabando 1.4s infinite;
}
@keyframes pulso-grabando {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ---------- Chat de IA (barra persistente) ---------- */
.main { padding-bottom: 110px; }

.chat-ia-barra {
  position: fixed;
  bottom: 0;
  left: 220px;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--linea);
  padding: 14px 24px;
  z-index: 60;
  display: flex;
  gap: 10px;
  align-items: center;
}

.chat-ia-barra input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
}
.chat-ia-barra input:focus {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

.chat-ia-enviar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primario);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-ia-enviar:disabled { background: var(--linea); cursor: not-allowed; }

.chat-ia-panel {
  position: fixed;
  bottom: 68px;
  left: 220px;
  right: 0;
  max-height: 50vh;
  background: #fff;
  border-top: 1px solid var(--linea);
  box-shadow: 0 -4px 16px rgba(30,38,53,0.08);
  z-index: 55;
  display: flex;
  flex-direction: column;
}

.chat-ia-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--linea);
  font-size: 13px;
  color: var(--ink-soft);
}
.chat-ia-panel-header button {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 16px;
}

.chat-ia-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.chat-ia-burbuja {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.chat-ia-burbuja.usuario {
  background: var(--primario);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.chat-ia-burbuja.asistente {
  background: var(--fondo);
  color: var(--ink);
  margin-right: auto;
  border-bottom-left-radius: 4px;
}
.chat-ia-burbuja.cargando { color: var(--ink-soft); font-style: italic; }

@media (max-width: 720px) {
  .chat-ia-barra, .chat-ia-panel { left: 0; }
}

/* ---------- Botón flotante de retroalimentación ---------- */
.btn-retro-flotante {
  position: fixed;
  bottom: 90px;
  right: 28px;
  z-index: 70;
  background: linear-gradient(135deg, #F2A93C, #E8871E);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 22px;
  font-family: 'Work Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(232, 135, 30, 0.45);
  animation: retro-pulso 2.4s ease-in-out infinite;
}
.btn-retro-flotante:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232, 135, 30, 0.55); }
.btn-retro-flotante .emoji { font-size: 17px; }

@keyframes retro-pulso {
  0%, 100% { box-shadow: 0 4px 14px rgba(232, 135, 30, 0.45); }
  50% { box-shadow: 0 4px 22px rgba(232, 135, 30, 0.8), 0 0 0 8px rgba(232, 135, 30, 0.12); }
}

@media (max-width: 720px) {
  .btn-retro-flotante {
    bottom: 84px;
    right: 14px;
    padding: 0;
    width: 46px;
    height: 46px;
    justify-content: center;
  }
  .btn-retro-flotante .texto-completo { display: none; }
}

/* ---------- Tour guiado ---------- */
.tour-hueco {
  position: fixed;
  z-index: 91;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(20, 26, 38, 0.72);
  outline: 3px solid var(--exito, #02C39A);
  outline-offset: 3px;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
  pointer-events: none;
}
.tour-tarjeta {
  position: fixed;
  z-index: 92;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 10px 30px rgba(20, 26, 38, 0.3);
  transition: top 0.25s ease, left 0.25s ease;
}
.tour-tarjeta h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 17px; margin: 0 0 8px; }
.tour-tarjeta p { font-size: 14px; color: var(--ink-soft); margin: 0 0 16px; line-height: 1.5; }
.tour-paso { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.02em; }
.tour-botones { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-saltar { background: none; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; padding: 8px 0; }
.tour-siguiente { background: var(--primario); color: #fff; border: none; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 14px; cursor: pointer; }
.tour-siguiente:hover { opacity: 0.92; }

.btn-ver-tour {
  background: none;
  border: 1px solid var(--linea);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Work Sans', Arial, sans-serif;
}
.btn-ver-tour:hover { background: var(--fondo); }

@media (max-width: 720px) {
  .tour-tarjeta { width: calc(100vw - 40px); }
}

/* ---------- App instalable (PWA) ---------- */
.nav-instalar {
  margin: 0 22px 10px;
  padding: 10px 0;
  background: rgba(2, 195, 154, 0.14);
  border: 1px solid var(--exito);
  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(2, 195, 154, 0.25); }

.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; }

/* Ningún campo puede ser más ancho que el espacio que le toca dentro de su
   tarjeta (las columnas de la rejilla se podían estirar por el contenido). */
input, select, textarea { max-width: 100%; }
.fila-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila-form > * { min-width: 0; }
@media (max-width: 720px) {
  .fila-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 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. En pantallas táctiles todos
   los campos usan 16px. Lleva !important porque varios <textarea> traen el
   tamaño escrito directo en el HTML. */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* Safari de iPhone/iPad trata los campos de fecha y hora como un componente
   propio: ignora el ancho que se le pide (se salía de su tarjeta) y centra el
   texto. Aquí se les obliga a portarse como cualquier otro campo. */
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    text-align: left;
  }
  input[type="date"]::-webkit-date-and-time-value,
  input[type="time"]::-webkit-date-and-time-value { text-align: left; }
}

/* ============================================================
   LISTA DE CITAS — tabla (pantallas anchas) y tarjetas (angostas)
   ============================================================ */

/* El contenedor mide su PROPIO ancho: si hay espacio para la tabla se ve la
   tabla; si no, tarjetas. Así también funciona bien en una tableta en
   vertical, donde el menú lateral se come una parte de la pantalla. */
.lista-contenedor { container-type: inline-size; margin-bottom: 22px; }
.lista-contenedor.l-citas { container-name: citas; }

.ico { width: 18px; height: 18px; flex: none; }

/* ---- Estatus (pastilla) ---- */
.pill-estatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.pill-estatus .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.pill-estatus .punto { width: 8px; height: 8px; border-radius: 50%; background: #F59E0B; }
.pill-estatus.pendiente  { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.pill-estatus.confirmada { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; }
.pill-estatus.cancelada  { background: #FFE4E6; color: #9F1239; border-color: #FECDD3; }
.pill-estatus.completada { background: #E0F2FE; color: #075985; border-color: #BAE6FD; }
.pill-estatus.no_asistio { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }

/* ---- Botón Confirmar ---- */
.btn-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0B4A6B;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-confirmar .ico { color: #34D399; stroke-width: 2.6; }
.btn-confirmar:hover { background: #0A3F5B; }

/* ---- Estado (cargando / vacío / error) ---- */
.lista-estado {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
}

/* ---- Tarjetas (angosto: base) ---- */
.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; }

.cita-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 3px rgba(20, 26, 38, 0.06);
}
.cita-tarjeta-encabezado {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EEF1F5;
}
.cita-encabezado-izq { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pill-fecha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 14px;
  font-weight: 700;
}
.pill-fecha .ico { width: 15px; height: 15px; }
.cita-hora-movil { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.cita-hora-movil .ico { width: 16px; height: 16px; color: #94A3B8; }
.cita-estatus-movil { margin-left: auto; }

.menu-contenedor { position: relative; }
.btn-kebab {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #F1F4F8;
  color: #64748B;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.btn-kebab:hover { background: #E7ECF2; }
.menu-cita {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 190px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(20, 26, 38, 0.18);
  padding: 6px;
}
.menu-cita.arriba { top: auto; bottom: calc(100% + 6px); }
.menu-cita button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  border-radius: 8px;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.menu-cita button:hover { background: #F4F6F9; }
.menu-cita button.peligro { color: var(--peligro); }

.cita-tarjeta-cuerpo { padding: 14px 0; border-bottom: 1px solid #EEF1F5; }
.cita-cliente-linea { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
.cita-cliente-linea .ico { width: 22px; height: 22px; color: #94A3B8; }
.cita-cliente-linea span { min-width: 0; overflow-wrap: anywhere; }
.cita-servicio-linea { margin: 6px 0 0 32px; font-size: 15px; color: #475569; overflow-wrap: anywhere; }

.cita-tarjeta-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 12px; }
.cita-recurso-linea { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #64748B; min-width: 0; }
.cita-recurso-linea .ico { color: #94A3B8; }
.cita-pie-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.btn-ver-notas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: 12px;
  padding: 9px 14px;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cita-pie-acciones .btn-confirmar { background: var(--ink); padding: 10px 20px; border-radius: 12px; }

/* ---- Tabla (ancho): imagen 1 ---- */
.lista-tabla-caja {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(20, 26, 38, 0.06);
  overflow: hidden;
}
.tabla-lista { width: 100%; border-collapse: collapse; }
.tabla-lista th {
  text-align: left;
  padding: 18px 12px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--linea);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748B;
}
.tabla-lista th.col-acciones { text-align: right; }
.tabla-lista td { padding: 16px 12px; border-bottom: 1px solid #EEF1F5; vertical-align: middle; font-size: 15px; }
.tabla-lista th:first-child, .tabla-lista td:first-child { padding-left: 24px; }
.tabla-lista th:last-child, .tabla-lista td:last-child { padding-right: 20px; }
.tabla-lista tbody tr:last-child td { border-bottom: none; }
.tabla-lista tbody tr:hover { background: #FAFBFD; }

.cita-fecha-hora { display: flex; align-items: center; gap: 12px; }
.cita-fecha-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
  padding: 7px 8px;
  background: #F1F5F9;
  border-radius: 10px;
  line-height: 1.15;
  color: var(--ink);
}
.cita-fecha-chip .dia { font-size: 16px; font-weight: 700; }
.cita-fecha-chip .mes { font-size: 14px; font-weight: 600; }
.cita-hora { font-weight: 700; white-space: nowrap; color: var(--ink); }
.cita-cliente { font-weight: 700; color: var(--ink); }
.cita-servicio { color: #475569; }
.cita-recurso { color: #64748B; }

.cita-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.cita-acciones .btn-confirmar { margin-right: 8px; }
.btn-icono {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #94A3B8;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.btn-icono:hover { background: #F1F5F9; color: var(--ink); }
.btn-icono.peligro:hover { background: var(--peligro-claro); color: var(--peligro); }
.btn-icono .contador {
  position: absolute;
  top: 1px;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--primario);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.accion-vacia { display: inline-block; width: 36px; height: 36px; }

/* ---- Cuando hay espacio para la tabla ---- */
@container citas (min-width: 840px) {
  .lista-contenedor:not(.vacio) .lista-tabla-caja { display: block; }
  .lista-contenedor:not(.vacio) .lista-tarjetas { display: none; }
}

/* Un nombre o servicio con una cadena larguísima sin espacios (o alguien
   escribiendo basura a propósito) no debe ensanchar la tabla. */
.cita-cliente, .cita-servicio, .cita-recurso, .cita-recurso-linea span { overflow-wrap: anywhere; }

/* Tope de ancho: las pantallas de formularios se quedan angostas (se leen
   mejor), pero la lista de citas puede crecer para que la tabla respire. */
.main { max-width: none; }
.main > .vista, .main > #avisoPrueba { max-width: 980px; }
.main > #vistaCitas { max-width: 1320px; }

/* Tabla un poco más compacta para que quepa en una tableta en horizontal. */
.tabla-lista th { padding: 16px 10px; }
.tabla-lista td { padding: 14px 10px; }
.tabla-lista th:first-child, .tabla-lista td:first-child { padding-left: 20px; }
.tabla-lista th:last-child, .tabla-lista td:last-child { padding-right: 14px; }
.cita-fecha-hora { gap: 10px; }
.cita-fecha-chip { min-width: 46px; padding: 6px 7px; }
.cita-acciones .btn-confirmar { padding: 9px 15px; font-size: 14px; margin-right: 6px; }
.btn-icono, .accion-vacia { width: 34px; height: 34px; }

/* Tarjeta en un celular: una pastilla como "Completada" ya no cabe en la
   misma fila que la fecha, la hora y el menú ⋮, y el botón se caía solo a
   una segunda línea (con su menú abriéndose fuera de la pantalla). En vez de
   dejar que se acomode al azar, se ordena a propósito en dos filas. */
@container citas (max-width: 439px) {
  .cita-tarjeta-encabezado {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "izq menu" "estatus estatus";
    row-gap: 10px;
  }
  .cita-encabezado-izq { grid-area: izq; }
  .menu-contenedor { grid-area: menu; }
  .cita-estatus-movil { grid-area: estatus; margin-left: 0; justify-self: start; }
}

/* Tabla: reparto de columnas para que los nombres no se partan sin necesidad. */
#tablaCitas th:nth-child(2) { width: 19%; }
#tablaCitas th:nth-child(3) { width: 23%; }
#tablaCitas th:nth-child(4) { width: 16%; }

/* ============================================================
   AVISO DE PRUEBA / SUSCRIPCIÓN — minimizable
   ============================================================ */
.aviso-prueba {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
  padding: 12px 48px 12px 16px;   /* el espacio de la derecha es del botón de minimizar */
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.aviso-prueba.prueba  { background: #EAF6F2; }
.aviso-prueba.vencida { background: #FDF2F1; }
.aviso-prueba-texto { flex: 1 1 220px; min-width: 0; }
.aviso-corto { display: none; }

.btn-minimizar {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.btn-minimizar:hover { background: rgba(20, 26, 38, 0.07); }
.btn-minimizar svg { transition: transform 0.2s ease; }

/* Minimizado: una sola tira delgada. */
.aviso-prueba.minimizado { flex-wrap: nowrap; padding-top: 6px; padding-bottom: 6px; margin-bottom: 12px; }
.aviso-prueba.minimizado .aviso-largo { display: none; }
.aviso-prueba.minimizado .aviso-corto { display: inline; }
.aviso-prueba.minimizado .aviso-prueba-texto { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aviso-prueba.minimizado .btn { padding: 4px 12px; font-size: 13px; white-space: nowrap; flex: none; }
.aviso-prueba.minimizado .btn-minimizar { top: 3px; }
.aviso-prueba.minimizado .btn-minimizar svg { transform: rotate(180deg); }
.aviso-prueba .btn { white-space: nowrap; }

/* ============================================================
   CITAS — encabezado con título y filtros en una sola fila
   ============================================================ */
.encabezado-vista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
}
.encabezado-vista h1 { margin: 0; }

.filtros-resumen { display: none; }
.filtros-campos { display: flex; align-items: flex-end; gap: 10px; }
.filtro-campo label { display: block; margin: 0 0 4px; font-size: 12px; }
.filtro-campo input { width: 160px; padding: 8px 10px; }
.filtros-campos .btn { height: 38px; }

/* Celular: los filtros se recogen en una pastilla con el rango aplicado. */
@media (max-width: 720px) {
  .encabezado-vista { align-items: center; margin-bottom: 14px; }
  .filtros-resumen {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 999px;
    font-family: 'Work Sans', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .filtros-resumen svg { color: var(--ink-soft); flex: none; }
  .filtros-chevron { transition: transform 0.2s ease; }
  .filtros-resumen[aria-expanded="true"] .filtros-chevron { transform: rotate(180deg); }

  .filtros-campos { display: none; flex: 1 1 100%; }
  .filtros-campos.abierto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
    padding: 14px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 12px;
  }
  .filtro-campo input { width: 100%; }
  .filtros-campos.abierto .btn { grid-column: 1 / -1; height: 42px; }
}


/* ============================================================
   SERVICIOS · RECURSOS · HORARIOS · NOTAS
   Misma idea que Citas: tabla si hay espacio, tarjetas si no.
   ============================================================ */
.lista-contenedor.l-simple { container-name: lista; }

/* Celdas de las tablas */
.tabla-lista .col-principal { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tabla-lista .col-suave { color: #475569; overflow-wrap: anywhere; }
.tabla-lista .col-precio { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tabla-lista tr.fila-inactiva td:not(:last-child) { opacity: 0.6; }
#tablaServicios th:nth-child(1) { width: 34%; }
#tablaRecursos th:nth-child(1) { width: 28%; }
#tablaRecursos th:nth-child(2) { width: 40%; }
#tablaHorarios th:nth-child(1) { width: 34%; }
.btn-icono.exito:hover { background: #D1FAE5; color: #065F46; }

/* Tarjetas */
.item-tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 14px 14px 14px 16px;
  box-shadow: 0 1px 3px rgba(20, 26, 38, 0.06);
}
.item-tarjeta.compacta { padding-top: 8px; padding-bottom: 8px; }
.item-tarjeta-cabecera { display: flex; align-items: center; gap: 8px; }
.item-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.item-titulo .ico { width: 22px; height: 22px; color: #94A3B8; }
.item-tarjeta.inactivo .item-titulo { color: #64748B; }
.item-acciones { display: flex; align-items: center; gap: 2px; flex: none; }
.lista-tarjetas .btn-icono { width: 40px; height: 40px; }
.item-detalle { margin: 6px 0 0; font-size: 14px; color: #64748B; overflow-wrap: anywhere; }
.item-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 15px; color: #475569; }
.dato { display: inline-flex; align-items: center; gap: 6px; }
.dato .ico { width: 16px; height: 16px; color: #94A3B8; }
.dato-precio { font-weight: 700; color: var(--ink); }
.horario-linea { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.horario-dia { min-width: 92px; font-size: 16px; color: var(--ink); }

/* Cuando hay espacio para la tabla (estas tablas tienen menos columnas que Citas) */
@container lista (min-width: 640px) {
  .lista-contenedor:not(.vacio) .lista-tabla-caja { display: block; }
  .lista-contenedor:not(.vacio) .lista-tarjetas { display: none; }
}

/* Horarios: selector de recurso junto al título */
.filtro-campo.selector { flex: 1 1 150px; max-width: 260px; min-width: 0; }
.filtro-campo.selector select { width: 100%; padding: 8px 10px; }

/* Notas: buscador de una sola línea */
.notas-busqueda { display: flex; gap: 8px; margin-bottom: 16px; }
.notas-busqueda input { flex: 1; min-width: 0; }
.notas-busqueda .btn { flex: none; height: 42px; }

.notas-lista-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.notas-lista-encabezado h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 18px; }

/* Las notas se acomodan en columnas cuando hay espacio */
.notas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; margin-bottom: 22px; }
.notas-grid > .lista-estado { grid-column: 1 / -1; }
.nota-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 14px 14px 10px 16px;
  box-shadow: 0 1px 3px rgba(20, 26, 38, 0.06);
}
.nota-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.5; color: var(--ink); }
.nota-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid #EEF1F5; }
.nota-meta { flex: 1 1 auto; font-size: 12.5px; color: var(--ink-soft); }
.nota-pie .item-acciones { margin-left: auto; }
.nota-pie .btn-ver-notas { padding: 7px 12px; font-size: 13px; }