/* Tema visual — marca "Odonto Medic Sonri Salud" (variante azul del
   logo del cliente), inspirado en el diseño de coa.pe: tipografía Plus
   Jakarta Sans, titulares grandes, botones tipo píldora con un azul
   vivo de acento sobre el azul marino de marca (tomado del logo). */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --background: #f5f2ef;
  --surface: #ffffff;
  --surface-hover: #f7f4f1;
  --border: #e2e6ed;
  --foreground: #1c2430;
  --muted: #626d7d;

  --accent: #003c90;
  --accent-oscuro: #002a66;
  --accent-tint: #dbe9fb;
  --accent-foreground: #ffffff;
  --accent-vivo: #0a5cff;

  --calido: #b45309;
  --calido-tint: #fdf1de;
  --calido-foreground: #ffffff;

  --danger: #b3261e;
  --danger-fondo: #fbe9e7;

  /* Insignias de estado — pastilla con fondo claro y texto del mismo tono,
     igual que las etiquetas de doctoralia (p. ej. "Consulta online"). */
  --ambar: #92600a; --ambar-fondo: #fdf1de;
  --azul: #145da0; --azul-fondo: #e3f1fd;
  --verde: #1e7d3c; --verde-fondo: #e5f6ea;
  --gris: #736c64; --gris-fondo: #ece8e4;
  --rojo: #b3261e; --rojo-fondo: #fbe9e7;

  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.05);
  --sombra-media: 0 8px 24px rgba(0, 0, 0, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--foreground);
  background: var(--background);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }

/* --- Barra lateral --- */
.sidebar {
  width: 226px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem;
}
.sidebar .marca {
  font-weight: 800;
  font-size: 1.15rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
}
.marca-icono { height: 30px; width: auto; display: block; }

/* Insignia "en qué modo estás" — para que nunca se confunda el login del
   personal (/login) con el del portal de pacientes (/portal/ingresar),
   que son sesiones completamente separadas. */
.badge-modo {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-oscuro);
  white-space: nowrap;
}
.sidebar .badge-modo { display: block; width: fit-content; margin: -1rem 0 1.25rem; }
.enlace-personal { font-size: 0.8rem; color: var(--muted); margin-left: 0.5rem; }
.enlace-personal:hover { color: var(--accent); }
.sidebar nav a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  color: var(--foreground);
  margin-bottom: 0.15rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar nav a:hover { background: var(--surface-hover); text-decoration: none; }
.sidebar nav a.activo { background: var(--accent-tint); color: var(--accent-oscuro); font-weight: 700; }
.sidebar .usuario { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; }
.sidebar .usuario form { margin-top: 0.5rem; }
.sidebar .enlace-portal {
  display: block;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
  font-size: 0.82rem;
  color: var(--muted);
}
.sidebar .enlace-portal a { font-weight: 600; }

.contenido { flex: 1; padding: 1.75rem 2rem; max-width: 980px; }

h1 {
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
  color: var(--foreground);
}
h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-top: 6px;
  background: var(--accent);
  border-radius: 2px;
}
.subtitulo { color: var(--muted); margin-top: 0.5rem; margin-bottom: 1.5rem; }

/* --- Tarjetas / métricas --- */
.metricas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.metrica {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  box-shadow: var(--sombra-suave);
  min-width: 160px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.metrica:hover { transform: translateY(-2px); box-shadow: var(--sombra-media); }
.metrica.acento-turquesa { border-top-color: var(--azul); }
.metrica.acento-coral { border-top-color: var(--calido); }
.metrica .valor { font-size: 1.6rem; font-weight: 800; color: var(--foreground); }
.metrica .etiqueta { color: var(--muted); font-size: 0.85rem; }

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--sombra-suave);
}

/* --- Formularios --- */
label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; color: var(--foreground); }
input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--foreground);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-tint); border-color: var(--accent); }
.fila { display: flex; gap: 1rem; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 180px; }

button, .boton {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.55rem 1.2rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--foreground);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
button:hover, .boton:hover { transform: translateY(-1px); background: var(--surface-hover); box-shadow: var(--sombra-suave); text-decoration: none; }
button.primario, .boton.primario { background: var(--accent-vivo); border-color: transparent; color: var(--accent-foreground); font-weight: 600; }
button.primario:hover, .boton.primario:hover { background: var(--accent-oscuro); box-shadow: var(--sombra-media); }
button.calido, .boton.calido { background: var(--calido); border-color: transparent; color: var(--calido-foreground); }
button.calido:hover, .boton.calido:hover { filter: brightness(1.08); box-shadow: var(--sombra-media); }
button.peligro, .boton.peligro { background: var(--danger-fondo); border-color: var(--danger); color: var(--danger); }
button.chico, .boton.chico { padding: 0.3rem 0.85rem; font-size: 0.82rem; }
button.grande, .boton.grande { padding: 0.8rem 1.6rem; font-size: 1rem; }

/* --- Tablas y listas --- */
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.02em; }

/* --- Insignias de estado --- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-pendiente { background: var(--ambar-fondo); color: var(--ambar); }
.badge-confirmada { background: var(--azul-fondo); color: var(--azul); }
.badge-asistio { background: var(--verde-fondo); color: var(--verde); }
.badge-cancelada { background: var(--gris-fondo); color: var(--gris); }
.badge-activo { background: var(--azul-fondo); color: var(--azul); }
.badge-completado { background: var(--verde-fondo); color: var(--verde); }
.badge-cancelado { background: var(--gris-fondo); color: var(--gris); }
.badge-pagado { background: var(--verde-fondo); color: var(--verde); }
.badge-debe { background: var(--rojo-fondo); color: var(--rojo); }

.alerta { padding: 0.75rem 1rem; border-radius: 10px; margin-bottom: 1.25rem; font-size: 0.92rem; }
.alerta-error { background: var(--danger-fondo); color: var(--danger); }
.alerta-exito { background: var(--verde-fondo); color: var(--verde); }
.alerta-info { background: var(--azul-fondo); color: var(--azul); }

.caja-login {
  max-width: 380px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sombra-media);
}
.caja-login h1 { text-align: center; }
.caja-login h1::after { margin-left: auto; margin-right: auto; }
.logo-caja { display: block; max-width: 220px; width: 100%; height: auto; margin: 0 auto 0.5rem; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.tabs a { padding: 0.6rem 1rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs a.activo { color: var(--accent); border-color: var(--accent); }

.muted { color: var(--muted); font-size: 0.88rem; }

/* --- Calendario semanal de citas --- */
.calendario-scroll { overflow-x: auto; }

table.calendario-semana {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 760px;
}
table.calendario-semana th,
table.calendario-semana td {
  border: 1px solid var(--border);
  padding: 0;
  font-size: 0.82rem;
}
table.calendario-semana thead th {
  padding: 0.5rem 0.4rem;
  background: var(--accent-tint);
  color: var(--accent-oscuro);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  position: sticky;
  top: 0;
}
table.calendario-semana thead th.col-hoy { background: #cadef7; }
table.calendario-semana .col-hora {
  width: 58px;
  min-width: 58px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  background: var(--background);
  position: sticky;
  left: 0;
}

td.celda-libre, td.celda-ocupada { height: 44px; vertical-align: middle; text-align: center; background: var(--surface); }
td.celda-libre.col-hoy { background: #f1f6fd; }

a.slot-libre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 100%;
  width: 100%;
  color: var(--muted);
  padding: 3px 0;
}
a.slot-libre:hover { background: var(--accent-tint); text-decoration: none; color: var(--accent); }
a.slot-libre .icono-diente { fill: #c4d9f2; }
a.slot-libre:hover .icono-diente { fill: var(--accent); }
a.slot-libre span { font-size: 0.68rem; line-height: 1; }

td.celda-ocupada { padding: 0; }
td.celda-ocupada a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  width: 100%;
  padding: 4px 3px;
  color: inherit;
}
td.celda-ocupada a:hover { text-decoration: none; filter: brightness(0.96); }
td.celda-ocupada a strong { font-size: 0.74rem; line-height: 1.1; }
td.celda-ocupada a .hora-cita { font-size: 0.68rem; opacity: 0.85; }
td.celda-ocupada.badge-pendiente { background: var(--ambar-fondo); color: var(--ambar); }
td.celda-ocupada.badge-confirmada { background: var(--azul-fondo); color: var(--azul); }
td.celda-ocupada.badge-asistio { background: var(--verde-fondo); color: var(--verde); }

/* Celda "Ocupado" del calendario público del portal — a diferencia de la
   del panel interno, nunca dice quién la ocupa, así que no necesita un
   link ni badge de estado, solo un fondo neutro que la distinga de las
   libres. */
td.celda-no-disponible {
  height: 44px;
  vertical-align: middle;
  text-align: center;
  background: var(--gris-fondo);
  color: var(--gris);
  font-size: 0.7rem;
  font-weight: 600;
}

.leyenda-calendario { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; margin-top: 0.9rem; margin-bottom: 0; }
.leyenda-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 0.85rem; }
.leyenda-item .icono-diente { fill: #c4d9f2; vertical-align: middle; }

/* ======================================================================
   Portal público de citas (/portal/*) — misma paleta seria/profesional,
   con un hero en el verde-azulado de marca (como la cabecera de
   doctoralia) en vez de un tono oscuro tipo "app".
   ====================================================================== */

.pagina-publica { background: var(--background); min-height: 100vh; }

.navbar-publica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.navbar-publica .marca {
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.navbar-publica nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.navbar-publica nav a.boton { padding: 0.5rem 1rem; }

.hero-publica {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-oscuro) 100%);
  color: #fff;
  padding: 3.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-publica::before {
  content: "🦷";
  position: absolute;
  font-size: 14rem;
  opacity: 0.08;
  right: -1.5rem;
  top: -3rem;
  transform: rotate(-12deg);
}
.hero-logo {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 1.25rem;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-media);
}
.hero-logo img { width: 60px; height: auto; }
.hero-publica h1 { position: relative; font-size: 3.2rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.9rem; color: #fff; }
.hero-publica h1::after { display: none; }
.hero-publica p { font-size: 1.1rem; opacity: 0.92; max-width: 560px; margin: 0 auto 1.75rem; }
.hero-publica .acciones-hero { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.hero-publica .boton { background: #fff; color: var(--accent-oscuro); border-color: transparent; }
.hero-publica .boton.calido { background: var(--calido); color: #fff; }

.seccion-publica { max-width: 1040px; margin: 0 auto; padding: 2.5rem 2rem; }
.seccion-publica h2 { margin-bottom: 0.3rem; color: var(--foreground); }
.seccion-publica > p.subtitulo { margin-top: 0; }

.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }

.tarjeta-servicio, .tarjeta-odontologo {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: var(--sombra-suave);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tarjeta-servicio:hover, .tarjeta-odontologo:hover { transform: translateY(-3px); box-shadow: var(--sombra-media); }
.tarjeta-servicio .icono, .tarjeta-odontologo .icono {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent); font-size: 1.3rem;
  margin-bottom: 0.75rem;
}
.tarjeta-servicio h3, .tarjeta-odontologo h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--foreground); }
.tarjeta-servicio .precio { font-weight: 800; color: var(--accent); margin-top: 0.4rem; }

.caja-publica {
  max-width: 420px;
  margin: 2.5rem auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--sombra-media);
}
.caja-publica h1 { text-align: center; font-size: 1.5rem; }
.caja-publica h1::after { margin-left: auto; margin-right: auto; }
.caja-publica .enlace-secundario { text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }

/* --- Selector de franjas del portal (solo Libre/Ocupado, sin nombres) --- */
.selector-fecha { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.grid-franjas { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; }
.slot-franja {
  display: block;
  text-align: center;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--foreground);
}
.slot-franja:hover { border-color: var(--accent); background: var(--accent-tint); text-decoration: none; }
.slot-franja.seleccionada { background: var(--accent); border-color: transparent; color: #fff; }
.slot-franja.ocupada { background: var(--gris-fondo); color: var(--gris); cursor: not-allowed; opacity: 0.6; }

.footer-publica {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
  margin-top: 1rem;
}

@media (max-width: 720px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
  .contenido { padding: 1.25rem; }
  .navbar-publica { padding: 1rem; }
  .hero-publica { padding: 2.5rem 1.25rem; }
  .seccion-publica { padding: 2rem 1.25rem; }
}