/* Estilos del panel de administrador. Independiente de landing/styles.css
   a propósito — así un cambio acá nunca afecta el sitio público, y viceversa. */

:root {
  --stone: #9F9689;
  --ink: #555151;
  --ink-strong: #3D3938;
  --haze: #909B9A;
  --amber: #B76E2D;
  --amber-dark: #96591F;
  --cream: #F2F0EA;
  --cream-deep: #E8E4DC;
  --line: #D9D4C9;
  --font-display: 'League Spartan', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

* { box-sizing: border-box; }

/* Blindaje contra un bug que ya se coló dos veces: un elemento con el
   atributo `hidden` Y un `display` puesto a mano en línea (ej. flex, para
   acomodar sus hijos) deja de esconderse — el `style=""` en línea le gana
   al `[hidden]{display:none}` del navegador. Esta regla, al ser del
   propio stylesheet y con !important, gana siempre — así no hay que
   acordarse de nunca poner `display` en línea junto con `hidden`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--ink-strong); margin: 0; }
a { color: inherit; }

/* Barra superior */
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px 32px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.admin-topbar .marca { font-family: var(--font-display); font-weight: 700; font-size: 16px; }

.admin-topbar .usuario {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink);
}

.rol-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--cream-deep);
  color: var(--ink-strong);
  padding: 4px 10px;
  border-radius: 999px;
}

.btn-salir {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
}

.btn-salir:hover { background: var(--cream-deep); }
.btn-salir:active { transform: scale(0.98); }

/* Navegación entre páginas del panel — Dashboard queda suelto (es la
   página de entrada); el resto se agrupa en 3 menús desplegables
   (<details>/<summary> nativos, sin JS para abrir/cerrar ni para que se
   excluyan entre sí — el atributo `name` ya los hace mutuamente
   exclusivos en los navegadores actuales). shared/nav.js solo se encarga
   de cerrar el menú abierto si se hace clic afuera. */
.admin-nav {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 32px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.admin-nav > a {
  padding: 14px 12px;
  font-size: 13.5px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.admin-nav > a.activo { color: var(--amber-dark); border-color: var(--amber); font-weight: 500; }

.admin-nav-grupo { position: relative; }

.admin-nav-grupo summary {
  padding: 14px 12px;
  font-size: 13.5px;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
/* A propósito NO usa display:flex acá — algunas versiones de Safari dejan
   de responder al clic (el <summary> no abre el <details>) si se le
   cambia el display por otro que no sea list-item/block. El acomodo del
   texto con la flechita se resuelve con márgen, no con flexbox. */
.admin-nav-grupo summary::-webkit-details-marker { display: none; }
.admin-nav-grupo summary::after { content: '▾'; font-size: 8px; opacity: 0.6; margin-left: 5px; }
.admin-nav-grupo[open] summary::after { content: '▴'; }
.admin-nav-grupo summary:hover { color: var(--amber-dark); }
.admin-nav-grupo.admin-nav-grupo--activo summary { color: var(--amber-dark); border-color: var(--amber); font-weight: 500; }

.admin-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 10px 24px rgba(61, 57, 56, 0.14);
  z-index: 30;
  padding: 6px 0;
}

.admin-nav-submenu a {
  display: block;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.admin-nav-submenu a:hover { background: var(--cream-deep); }
.admin-nav-submenu a.activo { color: var(--amber-dark); font-weight: 500; }

/* Layout general */
.admin-main { max-width: 1280px; margin: 0 auto; padding: 32px; }

.dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 800px) {
  .dos-columnas { grid-template-columns: 1fr; }
}

/* Formularios de gestión (pacientes, documentos, pendientes) */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink); }

.form-field input,
.form-field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  background: #fff;
}

.form-acciones { display: flex; gap: 10px; align-items: center; margin-top: 20px; }
.form-mensaje { font-size: 13.5px; color: var(--ink); }

.btn-secundario {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  cursor: pointer;
}

.btn-secundario:hover { background: var(--cream-deep); }
.btn-secundario:active { transform: scale(0.98); }

.btn-fila {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
}

.btn-fila:hover { background: var(--cream-deep); }

.buscador { width: 100%; padding: 11px 13px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--font-body); font-size: 14px; margin-bottom: 16px; }

.estado-completado { color: var(--stone); text-decoration: line-through; }

/* Etapas del paciente (pipeline del CRM) — mismo código de color en toda
   parte donde aparezca, para reconocer la etapa de un vistazo. */
.etapa-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.etapa-nuevo { background: #E4E9E8; color: var(--haze); }
.etapa-control_pendiente { background: #F3E4D6; color: var(--amber-dark); }
.etapa-en_tratamiento { background: #E8E4DC; color: var(--stone); }
.etapa-con_deuda { background: #F6DAD5; color: #B54B3B; }

/* Estado de una inscripción a una promo (admin/registros-promo.html) —
   mismo widget .etapa-badge, código de color propio. */
.estado-pendiente_pago { background: #F3E4D6; color: var(--amber-dark); }
.estado-pagado { background: #DCEAD8; color: #3E7A4C; }
.estado-cancelado { background: #F6DAD5; color: #B54B3B; }

/* Recordatorio en la ficha cuando quedaron datos opcionales sin llenar
   (ej. un paciente creado rápido desde el popup del calendario, con solo
   RUT/nombre/correo). No es un error, por eso el mismo tono ámbar de
   "control_pendiente", no el rojo de vencido. */
.aviso-incompleto {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F3E4D6;
  color: var(--amber-dark);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
}
.aviso-incompleto a { color: var(--amber-dark); font-weight: 500; text-decoration: underline; }

/* Galería de fotos por paciente */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.foto-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--ink);
  font-size: 11.5px;
}

.foto-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--cream-deep);
}

.foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px dashed var(--line);
  background: var(--cream-deep);
  color: var(--stone);
  font-size: 12px;
}

.foto-item--archivada { opacity: 0.85; }

/* Popup de "nuevo paciente" — <dialog> nativo, sin librería: el navegador
   ya resuelve el fondo oscurecido, el foco atrapado y cerrar con Escape. */
dialog.modal-paciente {
  border: none;
  border-radius: 12px;
  padding: 28px 30px;
  max-width: 420px;
  width: 92%;
  box-shadow: 0 16px 44px rgba(61, 57, 56, 0.22);
}
dialog.modal-paciente::backdrop { background: rgba(61, 57, 56, 0.45); }
dialog.modal-paciente h2 { margin-bottom: 4px; }

/* Agenda — vistas de calendario (agenda.html) */
.calendario-controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.calendario-vistas { display: flex; gap: 6px; }
.calendario-vistas button[aria-pressed="true"] { background: var(--amber); color: #fff; border-color: var(--amber-dark); }
.calendario-nav { display: flex; align-items: center; gap: 6px; }

.calendario-grid {
  display: grid;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.calendario-encabezado {
  grid-row: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-strong);
  padding: 8px 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}

.calendario-hora-label {
  font-size: 10.5px;
  color: var(--stone);
  text-align: right;
  padding-right: 8px;
  transform: translateY(-7px);
  white-space: nowrap;
}

.calendario-columna {
  border-right: 1px solid var(--line);
  position: relative;
  /* Es solo el fondo con las líneas de hora — nunca debe tapar el clic de
     una cita que cae en su misma celda de grilla. */
  pointer-events: none;
}

.calendario-bloque {
  background: color-mix(in srgb, var(--amber) 18%, #fff);
  border: 1px solid var(--amber-dark);
  color: var(--ink-strong);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
  margin: 0 2px;
}
.calendario-bloque:hover { filter: brightness(0.97); }
.calendario-bloque strong { display: block; font-size: 11.5px; }

.calendario-bloque--completada { background: var(--cream-deep); border-color: var(--line); color: var(--stone); }
.calendario-bloque--cancelada, .calendario-bloque--no_asistio { background: #fff; border-color: var(--line); color: var(--stone); text-decoration: line-through; }

.calendario-mes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.calendario-mes-encabezado {
  background: var(--cream-deep);
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stone);
  padding: 6px 0;
}

.calendario-mes-dia {
  background: #fff;
  min-height: 96px;
  padding: 6px;
  cursor: pointer;
  font-size: 11.5px;
}
.calendario-mes-dia:hover { background: var(--cream-deep); }
.calendario-mes-dia--fuera-de-mes { background: var(--cream); color: var(--stone); }
.calendario-mes-dia--hoy .calendario-mes-numero { color: #fff; background: var(--amber); border-radius: 999px; padding: 1px 7px; }

.calendario-mes-numero { font-weight: 600; display: inline-block; margin-bottom: 4px; }
.calendario-mes-cita { font-size: 10.5px; padding: 1px 4px; border-radius: 4px; background: var(--cream-deep); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.calendario-mes-mas { font-size: 10.5px; color: var(--stone); }

/* Popup flotante: aparece justo encima del bloque en el que se hizo clic
   (o abajo si no cabe arriba) — para resolver todo ahí mismo sin tener
   que bajar a buscarlo más abajo del calendario. La posición exacta la
   calcula posicionarPopupCita() en dashboard.js, acá solo el aspecto. */
.cita-detalle {
  position: fixed;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(61, 57, 56, 0.18);
  padding: 18px 20px;
  max-height: calc(100vh - 20px);
  overflow-y: auto;
}

/* Odontograma (ficha.html) — vista de arriba hacia abajo, igual
   convención que cualquier ficha dental: arcada superior arriba, inferior
   abajo, separadas por línea media entre cuadrantes. */
.odontograma-arcada {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.odontograma-medio { width: 12px; }

.odontograma-pieza {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 11.5px;
  cursor: pointer;
  color: var(--ink);
}

.odontograma-pieza:hover { background: var(--cream-deep); }

.odontograma-pieza--trabajada {
  background: var(--amber);
  border-color: var(--amber-dark);
  color: #fff;
  font-weight: 600;
}

/* Consentimientos (consentimientos.html) */
.consentimiento-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.consentimiento-estado { font-size: 13px; margin-top: 4px; }
.consentimiento-estado--otorgado { color: #4C7A5D; font-weight: 500; }
.consentimiento-estado--revocado { color: #B54B3B; font-weight: 500; }
.consentimiento-estado--sin-registrar { color: var(--stone); }

/* Resumen financiero (financiero.html) */
.resumen-financiero {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.resumen-financiero > div { display: flex; flex-direction: column; gap: 4px; }
.resumen-etiqueta { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--stone); }
.resumen-financiero strong { font-family: var(--font-display); font-size: 22px; color: var(--ink-strong); }

/* Dashboard: grilla de tarjetas */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.panel-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
}

.panel-card h2 { font-size: 17px; margin-bottom: 4px; }
.panel-card .panel-sub { font-size: 12.5px; color: var(--stone); margin-bottom: 16px; }

/* Ficha del paciente: la tarjeta de datos fijos (nombre, RUT, fecha de
   nacimiento) lleva el botón de editar en la esquina, chico a propósito —
   es solo para corregir un error de tipeo, no la edición completa. */
.panel-card--relativo { position: relative; }
.btn-editar-esquina {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  text-decoration: none;
}
.btn-editar-esquina:hover { background: var(--cream-deep); }

/* Botón de texto en la esquina de una tarjeta (ej. "Revisar ficha →" en
   el resumen de pacientes.html) — misma idea que .btn-editar-esquina
   pero con texto, así que no puede ser un círculo chico. */
.btn-esquina-texto { position: absolute; top: 20px; right: 20px; }

.panel-card table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.panel-card th { text-align: left; color: var(--stone); font-weight: 500; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 8px; }
.panel-card td { padding: 8px 0; border-top: 1px solid var(--cream-deep); }

/* Fila de tabla que abre algo al hacer clic (ej. el resumen de un
   paciente) — sin botón de acción aparte, toda la fila es el botón. */
.fila-clickeable { cursor: pointer; }
.fila-clickeable:hover td { background: var(--cream-deep); }

/* Atajo al final de una fila clickeable para saltar directo a otra
   pantalla sin pasar por el resumen (ej. pacientes.html → ficha.html) —
   mismo color de acento que el resto de los links/botones primarios. */
.link-ficha-directa {
  color: var(--amber-dark);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  padding: 2px 6px;
}
.link-ficha-directa:hover { color: var(--amber); }

.estado-atrasado { color: #B54B3B; font-weight: 600; }
.estado-vencido { color: #B54B3B; font-weight: 600; }
.sin-datos { color: var(--stone); font-size: 13px; padding: 8px 0; }
.error-carga { color: #B54B3B; }

/* Marcas de seguimiento de una cotización, aparte de su estado
   (pendiente/aceptada/rechazada): si ya se mandó por correo y si ya se
   cobró — dos cosas independientes entre sí. */
.marca-cotizacion { display: inline-block; font-size: 10.5px; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin-right: 4px; }
.marca-enviada { background: var(--cream-deep); color: var(--stone); }
.marca-pagada { background: #E1EBE3; color: #4C7A5D; }

/* Odontograma + historial de procedimientos cotizados al costado — columna
   angosta para ojear rápido sin competir por espacio con el dibujo de
   dientes. Se apila abajo del odontograma en pantallas angostas. */
.odontograma-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .odontograma-layout { grid-template-columns: 1fr; } }

.historial-cotizado { font-size: 12.5px; max-height: 420px; overflow-y: auto; }
.historial-cotizado-item { padding: 10px 0; border-top: 1px solid var(--cream-deep); }
.historial-cotizado-item:first-child { border-top: none; padding-top: 0; }
.historial-cotizado-fecha { color: var(--stone); font-size: 11px; }
.historial-cotizado-procedimientos { margin: 4px 0 0; padding-left: 16px; }
.historial-cotizado-procedimientos li { margin-bottom: 2px; }

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

.login-card {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 40px 32px;
}

.login-card h1 { font-size: 22px; margin-bottom: 24px; text-align: center; }

.login-card label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ink); }

.login-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: 16px;
}

.btn-primary {
  width: 100%;
  background: var(--amber);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
}

.btn-primary:hover { background: var(--amber-dark); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }

.login-error { color: #B54B3B; font-size: 13px; min-height: 18px; margin-bottom: 8px; }