/* Oral Studio · Panel interno
   Paleta: porcelana + petróleo, con el turquesa de marca como acento vivo.
   El petróleo (#2F5D5A) y el turquesa del logo (#4BE2DB) comparten matiz
   (177°): son el mismo color en dos profundidades. El turquesa se reserva
   para lo accionable y lo activo; el petróleo sostiene la estructura. */

:root {
  --porcelain: #F7F6F3;
  --surface: #FFFFFF;
  --hairline: #E4E1DA;
  --ink: #22282A;
  --ink-soft: #6B7275;
  --petrol: #2F5D5A;
  --petrol-deep: #234745;

  /* Turquesa de marca, tomado del logo */
  --turquoise: #4BE2DB;
  --turquoise-ink: #17A69F;   /* versión legible para trazos */
  --turquoise-wash: #EAFBFA;  /* fondo tenue */

  /* Estados: matices repartidos para que se distingan de un vistazo.
     Antes rojo (5°), naranja (18°) y amarillo (40°) se apiñaban en la zona
     cálida — 13° entre los dos más cercanos. Sacando "atención" al azul,
     la separación mínima sube a 42°. */
  --st-confirmada: #1F7A4C;   /* verde   150° */
  --st-pendiente: #F5C518;    /* amarillo 47° — lleva texto oscuro */
  --st-reprogramar: #6D4AAF;  /* violeta 261° */
  --st-cancelada: #C42B1C;    /* rojo      5° */
  --st-atencion: #1D6CA8;     /* azul    206° */

  /* Advertencia. Tiene color propio y no toma el de ningún estado: cuando
     "atención" pasó de naranja a azul para separar los estados, los avisos
     de error se volvieron azules de rebote y parecían enlaces. Un error
     debe verse como error, sin importar qué hagan las pastillas. */
  --warning: #B0552F;

  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden debe ganarle a cualquier display de clase */
[hidden] { display: none !important; }

body {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: var(--porcelain);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.logo { display: block; height: auto; }
.logo-sm { width: 104px; }
.logo-lg { width: 168px; margin: 0 auto 14px; }

/* ── Login ─────────────────────────────────────── */
.login {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--porcelain);
  z-index: 10;
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 40px 36px;
  width: min(360px, 90vw);
  text-align: center;
  box-shadow: 0 1px 3px rgba(34, 40, 42, 0.05);
}
.login-sub { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; }
.login-card input {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--hairline); border-radius: 8px;
  font: inherit; margin-bottom: 12px;
  background: var(--porcelain);
}
.login-card input:focus { outline: 2px solid var(--turquoise-ink); outline-offset: 1px; }
.login-card button {
  width: 100%; padding: 11px;
  background: var(--petrol); color: #fff;
  border: none; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: var(--petrol-deep); }
.login-error { color: var(--st-cancelada); font-size: 13px; margin-top: 10px; }

/* ── Barra superior ────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 22px;
  padding: 13px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 5;
}
.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  padding: 8px 16px;
  border: none; background: none;
  font: inherit; font-weight: 500; color: var(--ink-soft);
  border-radius: 8px; cursor: pointer;
  position: relative;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--petrol-deep); background: var(--porcelain); }
/* El cuadrado del punto final del logotipo, repetido como marcador */
.tab.active::after {
  content: ''; position: absolute;
  left: 16px; bottom: 2px;
  width: 5px; height: 5px;
  background: var(--turquoise);
}
.badge {
  display: inline-block; min-width: 18px; height: 18px;
  background: var(--st-atencion); color: #fff;
  border-radius: 9px; font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center; padding: 0 5px;
  margin-left: 6px; vertical-align: 1px;
}
.ghost {
  padding: 8px 14px;
  background: none; border: 1px solid var(--hairline);
  border-radius: 8px; font: inherit; font-size: 13px;
  color: var(--ink-soft); cursor: pointer;
}
.ghost:hover { border-color: var(--turquoise-ink); color: var(--petrol-deep); }
.primary {
  padding: 9px 20px;
  background: var(--petrol); color: #fff;
  border: none; border-radius: 8px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.primary:hover { background: var(--petrol-deep); }
.primary:disabled { background: var(--hairline); color: var(--ink-soft); cursor: not-allowed; }

/* ── Vista Citas ───────────────────────────────── */
.view { max-width: 980px; margin: 0 auto; padding: 26px 22px 60px; }

.day-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; flex-wrap: wrap; gap: 10px;
}
.day-header h1 {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 30px;
  color: var(--ink);
}
/* Barra de herramientas: buscar, filtrar por doctor, elegir rango.
   El buscador manda (crece), los filtros se quedan en su ancho. */
.toolbar {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap;
}
.search-wrap { position: relative; flex: 1; min-width: 220px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--ink-soft); pointer-events: none;
}
#search {
  width: 100%; font: inherit; font-size: 14px;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
#search:focus {
  outline: 2px solid var(--turquoise-ink); outline-offset: 1px;
}
#search::-webkit-search-cancel-button { cursor: pointer; }
.toolbar select {
  font: inherit; font-size: 13px; padding: 9px 10px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--ink);
  cursor: pointer; max-width: 190px;
}
.toolbar select:focus { outline: 2px solid var(--turquoise-ink); outline-offset: 1px; }
.toolbar select:disabled { opacity: 0.5; cursor: not-allowed; }
.search-note {
  margin: -8px 0 16px;
  font-size: 12.5px; color: var(--turquoise-ink);
}

@media (max-width: 620px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar select { max-width: none; }
}

/* ── Nueva cita: disparador ────────────────────── */
.new-trigger {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 16px; align-items: center;
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
  font: inherit; cursor: pointer;
}
.new-trigger:hover { border-color: var(--turquoise-ink); }
.new-trigger:focus-visible { outline: 2px solid var(--turquoise-ink); outline-offset: 2px; }
.new-plus { display: block; }
.new-plus svg { width: 40px; height: 40px; display: block; }
/* Anillos concéntricos: el gesto propio del isotipo */
.ring { fill: none; stroke: var(--turquoise); }
.ring-outer { stroke-width: 1.5; opacity: 0.45; }
.ring-inner { stroke-width: 1.5; opacity: 0.8; }
.plus-bars { stroke: var(--turquoise-ink); stroke-width: 2.5; stroke-linecap: round; }
.new-trigger:hover .ring-outer { opacity: 0.8; }
.new-trigger:hover .ring-inner { opacity: 1; }
.new-copy { display: flex; flex-direction: column; gap: 2px; }
.new-title { font-weight: 600; color: var(--petrol-deep); }
.new-sub { font-size: 13px; color: var(--ink-soft); }

/* ── Nueva cita: formulario ────────────────────── */
.new-form {
  background: var(--surface);
  border: 1px solid var(--turquoise-ink);
  border-radius: var(--radius);
  padding: 20px 18px;
  margin-bottom: 22px;
}
.form-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.form-head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 20px;
  color: var(--ink);
}
.icon-btn {
  border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink-soft);
  padding: 2px 8px; border-radius: 6px;
}
.icon-btn:hover { background: var(--porcelain); color: var(--ink); }

/* Dos filas con intención: quién y cómo contactarlo arriba,
   cuándo y con quién abajo. Seis columnas para repartir sin apretar. */
.form-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
/* Dos filas de tres, agrupadas por significado: arriba a quién y cómo
   contactarlo; abajo la cita en sí. */
.field-name    { grid-column: span 2; }
.field-phone   { grid-column: span 2; }
.field-email   { grid-column: span 2; }
.field-doctor  { grid-column: span 2; }
.field-when    { grid-column: span 2; }
.field-duration{ grid-column: span 2; }
.field label .opt {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  opacity: 0.75;
}

@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .field { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.field input, .field select {
  font: inherit; font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--porcelain); color: var(--ink);
  width: 100%;
}
.field input:focus, .field select:focus {
  outline: 2px solid var(--turquoise-ink); outline-offset: 1px;
  background: var(--surface);
}
.hint { font-size: 12px; min-height: 15px; color: var(--ink-soft); }
.hint.ok { color: var(--st-confirmada); font-variant-numeric: tabular-nums; }
.hint.bad { color: var(--st-cancelada); }

.form-error {
  margin-top: 12px; padding: 9px 12px;
  background: #F8E9E7; color: var(--st-cancelada);
  border-radius: 8px; font-size: 13px;
}
.form-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 16px;
}

/* ── Lista de citas ────────────────────────────── */
.day-group { margin-bottom: 26px; }
.day-group h2 {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.appt {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 16px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.appt-time {
  font-family: 'Fraunces', serif;
  font-size: 19px; font-weight: 500;
  color: var(--petrol-deep);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.appt-name { font-weight: 600; }
.appt-meta { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.appt-note {
  color: var(--warning);
  font-size: 13px; line-height: 1.45;
  margin-top: 5px;
}

.appt-right { display: flex; align-items: center; gap: 10px; }

/* Cada estado declara dos versiones de sí mismo: la viva, para lo que está
   por venir, y la apagada, para lo que ya pasó. La apagada conserva el matiz
   (bajado a 14% de saturación y subido a 91% de luz) así que queda a un paso
   del fondo — reconocible si se busca, invisible si no. El texto lleva el
   mismo matiz oscurecido, que es lo que mantiene "cada una con su tono" y de
   paso garantiza legibilidad: en gris neutro daría 4.05:1, por debajo del
   mínimo. Así todas superan 5:1. */
.pill {
  font-size: 12px; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
  background: var(--bg); color: var(--fg);
}
.pill.confirmada  { --bg: var(--st-confirmada);  --fg: #fff;
                    --bg-off: #E5EBE8; --fg-off: #446A57; }
.pill.pendiente   { --bg: var(--st-pendiente);   --fg: var(--ink);
                    --bg-off: #EBEAE5; --fg-off: #6A6244; }
.pill.reprogramar { --bg: var(--st-reprogramar); --fg: #fff;
                    --bg-off: #E7E5EB; --fg-off: #51446A; }
.pill.cancelada   { --bg: var(--st-cancelada);   --fg: #fff;
                    --bg-off: #EBE5E5; --fg-off: #6A4744; }
.pill.atencion    { --bg: var(--st-atencion);    --fg: #fff;
                    --bg-off: #E5E8EB; --fg-off: #44596A; }

.appt select {
  font: inherit; font-size: 13px;
  padding: 5px 8px;
  border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer;
}
.appt select:focus { outline: 2px solid var(--turquoise-ink); outline-offset: 1px; }

.empty-state {
  text-align: center; color: var(--ink-soft);
  padding: 40px 0; font-size: 14px;
}

/* ── Vista Conversaciones ──────────────────────── */
.inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - 160px);
  min-height: 420px;
}
.conversation-list { border-right: 1px solid var(--hairline); overflow-y: auto; }

.conv-item {
  width: 100%; text-align: left;
  padding: 14px 16px;
  border: none; border-bottom: 1px solid var(--hairline);
  background: none; font: inherit; cursor: pointer;
}
.conv-item:hover { background: var(--porcelain); }
.conv-item.active { background: var(--porcelain); box-shadow: inset 3px 0 0 var(--turquoise); }
.conv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-name { font-weight: 600; font-size: 14px; }
.conv-time { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.conv-preview {
  font-size: 13px; color: var(--ink-soft);
  margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-flags { margin-top: 5px; display: flex; gap: 6px; }
.flag {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
}
.flag.attention { background: #DCEAF5; color: var(--st-atencion); }
.flag.window-open { background: var(--turquoise-wash); color: var(--turquoise-ink); }
.flag.window-closed { background: #EDEBE6; color: var(--ink-soft); }

/* min-height:0 es imprescindible: sin él, .thread (flex:1) se estira hasta
   caber todos los mensajes en vez de scrollear, y empuja el campo de
   respuesta fuera del contenedor. Es el valor por defecto de flex
   (min-height:auto = alto del contenido) el que rompe el scroll interno. */
.conversation-detail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.thread-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center;
}
.thread-header .conv-name { font-size: 15px; }
.thread-header .phone { font-size: 13px; color: var(--ink-soft); }

.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.msg {
  max-width: 72%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 14px;
  white-space: pre-wrap; word-break: break-word;
}
.msg.in  { background: var(--porcelain); border: 1px solid var(--hairline); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.out { background: var(--petrol); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg .msg-time { display: block; font-size: 11px; opacity: 0.65; margin-top: 4px; }

.composer {
  display: flex; gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
}
.composer textarea {
  flex: 1; resize: none;
  font: inherit; font-size: 14px;
  padding: 10px 14px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--porcelain);
  min-height: 44px; max-height: 120px;
}
.composer textarea:focus { outline: 2px solid var(--turquoise-ink); outline-offset: 1px; }
.composer button {
  padding: 0 22px;
  background: var(--petrol); color: #fff;
  border: none; border-radius: 10px;
  font: inherit; font-weight: 600; cursor: pointer;
}
.composer button:disabled { background: var(--hairline); color: var(--ink-soft); cursor: not-allowed; }
.composer-note {
  padding: 10px 18px;
  font-size: 13px; color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
  background: var(--porcelain);
}

.empty-thread { flex: 1; display: grid; place-items: center; color: var(--ink-soft); font-size: 14px; }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 760px) {
  .appt { grid-template-columns: 64px 1fr; }
  .appt-right { grid-column: 1 / -1; justify-content: flex-start; }
  .new-trigger { grid-template-columns: 52px 1fr; gap: 12px; }
  .new-plus svg { width: 36px; height: 36px; }
  .inbox { grid-template-columns: 1fr; height: auto; }
  .conversation-list { max-height: 40vh; border-right: none; border-bottom: 1px solid var(--hairline); }
  .conversation-detail { min-height: 50vh; }
  .topbar { flex-wrap: wrap; gap: 12px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions button { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .appt, .conv-item, .new-trigger, .ring { transition: all 0.15s ease; }
}

/* ── Ajustes de carácter ───────────────────────── */

/* El header gana presencia: la marca y su descriptor forman un bloque
   propio, separado de la navegación por una regla vertical. */
.topbar {
  padding: 16px 26px;
  gap: 0;
}
.brand { display: flex; flex-direction: column; gap: 6px; }
.logo-sm { width: 124px; }
/* El descriptor queda amarrado al ancho del logotipo: nunca lo desborda,
   así el conjunto lee como un bloque de marca y no como texto suelto. */
.brand-tag {
  max-width: 124px;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.tabs {
  margin-left: 26px;
  padding-left: 26px;
  border-left: 1px solid var(--hairline);
  align-items: center;
}

/* La tarjeta de nueva cita es una herramienta, no un registro: el lavado
   turquesa la separa de las citas sin necesidad de más espacio muerto. */
.new-trigger {
  background: var(--turquoise-wash);
  border-color: #C4EFEC;
  margin-bottom: 30px;
}
.new-trigger:hover {
  border-color: var(--turquoise-ink);
  background: #E1F8F7;
}
.new-sub { color: #4E8C88; }

@media (max-width: 760px) {
  .brand-tag { display: none; }
  .topbar { padding: 12px 18px; gap: 10px; }
  .logo-sm { width: 104px; }
  .tabs { margin-left: 0; padding-left: 0; border-left: none; }
}

/* El campo de respuesta siempre está presente: cuando la ventana de 24h
   de WhatsApp está cerrada se muestra deshabilitado con el motivo, en vez
   de desaparecer y parecer una función que falta. */
.composer.closed { border-top: 1px solid var(--hairline); }
.composer.closed textarea,
.composer.closed button {
  opacity: 0.55;
  cursor: not-allowed;
}
.composer.closed textarea { background: var(--porcelain); }
.composer.closed button { background: var(--hairline); color: var(--ink-soft); }
.composer-note {
  border-top: none;
  padding: 0 18px 14px;
  line-height: 1.5;
}

/* El alto del inbox se calculaba restando 160px al viewport, un número
   calibrado para el header viejo de 56px. Al crecer a 105px el inbox
   sobresalía y el campo de respuesta caía fuera de pantalla.
   Solución: en escritorio la app es un armazón de altura fija y cada vista
   scrollea por dentro. Así el inbox ocupa exactamente lo que sobra y el
   campo de respuesta queda siempre anclado abajo, sin números que ajustar
   cada vez que algo cambie de alto. En teléfono se conserva el scroll de
   página, que es lo natural ahí. */
@media (min-width: 761px) {
  /* El armazón de altura fija ahora es fila: sidebar + área principal.
     El área principal hereda la columna de altura fija para que cada
     vista scrollee por dentro y el composer siga anclado. */
  #app {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
  }
  .main-area {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  /* Cualquier vista, presente o futura, ocupa lo que sobra y scrollea por
     dentro. Antes esta regla enumeraba las vistas por nombre, y al agregar
     Doctores quedó fuera de la lista: su contenido se cortaba sin scroll.
     Enumerar es una invitación a olvidarse de la siguiente. */
  .main-area > .view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  /* Conversaciones es la excepción: no scrollea entera, sino que reparte su
     alto entre la lista y el hilo, que scrollean por separado. El selector
     lleva #app delante a propósito, para ganarle en especificidad a la regla
     de arriba; si no, heredaría overflow-y:auto y la intención quedaría a
     merced del orden del archivo. */
  .main-area > #view-conversaciones {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 26px;
  }
  .main-area > #view-conversaciones .inbox { flex: 1; height: auto; min-height: 0; }
}

/* Citas ya pasadas: presentes y consultables, pero apagadas para que el ojo
   vaya primero a lo que todavía está por venir. Al pasar el mouse recuperan
   nitidez, por si hace falta leerlas. */
.appt.pasada { background: transparent; border-style: dashed; }
.appt.pasada .appt-time,
.appt.pasada .appt-name,
.appt.pasada .appt-meta { opacity: 0.5; }
/* La pastilla no se hace transparente: cambia a su versión apagada. Bajarle
   la opacidad la habría vuelto ilegible sobre el fondo claro. */
.appt.pasada .pill { background: var(--bg-off); color: var(--fg-off); }
/* Al pasar el mouse recupera su color real, por si hace falta leerla. */
.appt.pasada:hover { background: var(--surface); }
.appt.pasada:hover .appt-time,
.appt.pasada:hover .appt-name,
.appt.pasada:hover .appt-meta { opacity: 1; }
.appt.pasada:hover .pill { background: var(--bg); color: var(--fg); }

/* ── Bloque plegable de citas anteriores ───────────────────────
   Va arriba porque cronológicamente vino antes, y plegado porque no es lo
   que la secretaria necesita ver al abrir el panel. Se usa <details>, que
   es plegable nativo: funciona con teclado y sin JavaScript. */
.past-block { margin-bottom: 22px; }
.past-block summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  list-style: none;
  font-size: 13px; font-weight: 600;
  color: var(--ink-soft);
  user-select: none;
}
.past-block summary::-webkit-details-marker { display: none; }
.past-block summary:hover { border-color: var(--ink-soft); color: var(--ink); }
.past-block summary:focus-visible {
  outline: 2px solid var(--turquoise-ink); outline-offset: 2px;
}
.past-block .chev {
  width: 12px; height: 12px; flex-shrink: 0;
  transition: transform 0.15s ease;
}
.past-block[open] .chev { transform: rotate(90deg); }
.past-block .count {
  margin-left: auto;
  font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--porcelain);
  border-radius: 999px;
  padding: 1px 9px;
  min-width: 22px; text-align: center;
}
.past-block[open] summary { margin-bottom: 14px; }
.past-body .day-group:last-child { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
  .past-block .chev { transition: none; }
}

/* ── Revisión antes de agendar ─────────────────────────────────
   Agendar es irreversible de cara al paciente: crea el evento y arranca los
   mensajes. Este paso existe para que la secretaria lea lo que escribió, no
   para autenticarla otra vez — por eso no pide contraseña. */
.form-confirm { padding-top: 4px; }
.form-confirm h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500; font-size: 19px;
  color: var(--ink);
}
.confirm-sub {
  font-size: 13px; color: var(--ink-soft);
  margin: 4px 0 16px;
}
.confirm-list {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.confirm-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row:nth-child(odd) { background: var(--porcelain); }
.confirm-row dt {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
  align-self: center;
}
.confirm-row dd { font-size: 14.5px; font-weight: 500; }

/* ── Doctores ──────────────────────────────────────────────────── */
.doctor {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.doctor.inactivo { background: transparent; border-style: dashed; }
.doctor.inactivo .doctor-datos { opacity: 0.55; }
.doctor-color {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: var(--porcelain);
  border: 1px solid var(--hairline);
  color: var(--ink-soft); font-size: 12px; font-weight: 700;
}
.doctor-nombre { font-weight: 600; }
.doctor-off {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: var(--porcelain);
  border-radius: 999px; padding: 1px 8px;
  vertical-align: 1px;
}
.doctor-meta { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.doctor-meta .falta { color: var(--warning); }
.doctor-notas { color: var(--ink-soft); font-size: 13px; margin-top: 3px; font-style: italic; }

/* Los once colores de Google, mostrados como son. Antes había que saberse
   de memoria qué número era cuál y escribirlo en una variable de entorno. */
.color-field { margin-top: 16px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--hairline);
  cursor: pointer;
  padding: 0;
}
.swatch:hover { transform: scale(1.08); }
.swatch.sel {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.swatch.none {
  background: var(--porcelain);
  color: var(--ink-soft);
  font-size: 14px; line-height: 1;
}
.swatch:focus-visible { outline: 2px solid var(--turquoise-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .swatch { transition: transform 0.12s ease; }
}
@media (max-width: 620px) {
  .doctor { grid-template-columns: 40px 1fr; }
  .doctor .editar { grid-column: 1 / -1; }
  .confirm-row { grid-template-columns: 1fr; gap: 2px; }
}

/* El nombre bloqueado explica por qué lo está. Un campo deshabilitado sin
   explicación se lee como un error de la aplicación. */
.hint.locked { color: var(--warning); line-height: 1.45; }
.field input:disabled {
  background: var(--porcelain);
  color: var(--ink-soft);
  cursor: not-allowed;
}

/* Crear un doctor fija su nombre para siempre, y ese nombre va literal al
   WhatsApp de cada paciente. El aviso está para que ese momento se sienta
   como lo que es: irreversible. Que se sienta así no es una limitación —
   es lo que hace que se escriba con cuidado. */
.aviso-permanente {
  margin-top: 16px;
  padding: 11px 14px;
  background: #FBF3EE;
  border: 1px solid #EBD9CD;
  border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  color: #7A4A2E;
}

/* ═══════════════════════════════════════════════════════════════
   PACIENTES (OralStudio Connect · Fase 1)
   Misma familia: porcelana + petróleo + turquesa; densidad del prototipo.
   ═══════════════════════════════════════════════════════════════ */

.patients { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.patient-row {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer;
  font: inherit; color: inherit; width: 100%;
}
.patient-row:hover { border-color: var(--turquoise-ink); }
.pat-row-name { display: flex; flex-direction: column; }
.pat-row-sub { color: var(--ink-soft); font-size: 13px; }
.pat-row-last { margin-left: auto; color: var(--ink-soft); font-size: 13px; }
.empty-note { color: var(--ink-soft); padding: 18px 4px; }

.pat-avatar {
  width: 52px; height: 52px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--turquoise-wash); color: var(--petrol);
  font-weight: 600; font-size: 19px; letter-spacing: .5px;
}
.pat-avatar.sm { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }

.ficha-top { display: flex; gap: 8px; margin-bottom: 14px; }
.ficha-top .danger-ghost, .danger-ghost { color: var(--st-cancelada); }
.ficha-top #pat-edit { margin-left: auto; }
.ficha-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.ficha-head h1 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 26px; }
.pat-meta { color: var(--ink-soft); }

.ficha-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}
.ficha-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 16px;
}
.ficha-card h2 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.ficha-card h2 .opt, .card-head h2 .opt { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.ficha-wide { grid-column: 1 / -1; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-head h2 { margin-bottom: 0; }
.slim { padding: 5px 12px; font-size: 13.5px; }

.datos-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.datos-list dt { font-size: 12px; color: var(--ink-soft); }
.datos-list dd { margin: 0; }
.muted { color: var(--ink-soft); }

.pat-citas { display: flex; flex-direction: column; gap: 6px; }
.pat-cita {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--hairline); border-radius: 8px;
}
.cita-cuando { font-weight: 600; min-width: 130px; }
.cita-doctor { color: var(--ink-soft); flex: 1; }

.inner-form { margin: 0 0 12px; }
.inner-form textarea {
  width: 100%; font: inherit; padding: 8px 10px;
  border: 1px solid var(--hairline); border-radius: 8px; resize: vertical;
}

.historia { display: flex; flex-direction: column; gap: 10px; }
.entrada {
  border: 1px solid var(--hairline); border-left: 3px solid var(--turquoise-ink);
  border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.entrada-anulada { border-left-color: var(--st-cancelada); opacity: .75; }
.entrada-head { display: flex; align-items: center; gap: 10px; }
.entrada-acciones { margin-left: auto; display: flex; gap: 6px; }
.etq {
  display: inline-block; font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .4px; min-width: 92px;
}
.anuladas summary { color: var(--ink-soft); cursor: pointer; font-size: 13.5px; }
.anuladas .entrada { margin-top: 8px; }

/* ── Odontograma ── */
.odo-toggle { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 13.5px; cursor: pointer; }
.odontograma { display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 6px 0 2px; }
.odo-fila { display: flex; gap: 5px; }
.odo-fila:nth-child(even) { margin-bottom: 8px; }
.diente {
  width: 34px; height: 42px; border-radius: 8px 8px 10px 10px;
  border: 1.5px solid var(--hairline); background: #fff; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px;
  font: inherit; transition: transform .08s ease;
}
.diente:hover { transform: translateY(-2px); border-color: var(--petrol); }
.diente-num { font-size: 10.5px; color: var(--ink-soft); }

/* Condiciones: color de fondo del diente y del punto de la leyenda.
   Matices repartidos, misma lógica que las pastillas de estado. */
.odo-sano     { background: #FFFFFF; }
.odo-caries   { background: #F6D2CD; border-color: #C42B1C !important; }
.odo-obturado { background: #CFE3F2; border-color: #1D6CA8 !important; }
.odo-corona   { background: #F7E9B5; border-color: #A87900 !important; }
.odo-endo     { background: #E1D7F2; border-color: #6D4AAF !important; }
.odo-ausente  { background: #ECECEC; border-color: #9AA0A3 !important; }
.odo-ausente .diente-num { text-decoration: line-through; }
.odo-implante { background: var(--turquoise-wash); border-color: var(--turquoise-ink) !important; }
.odo-extraer  { background: #F1BDBD; border-color: #7A1010 !important; border-style: dashed !important; }

.odo-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; justify-content: center; }
.leyenda { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.dot { width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--hairline); display: inline-block; }

/* Diálogo de pieza */
.tooth-overlay {
  position: fixed; inset: 0; background: rgba(34, 40, 42, .35);
  display: flex; align-items: center; justify-content: center; z-index: 60;
}
.tooth-dialog {
  background: var(--surface); border-radius: var(--radius);
  padding: 18px; width: min(430px, 92vw); max-height: 86vh; overflow: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.tooth-conditions { display: flex; flex-wrap: wrap; gap: 7px; }
.cond-pill {
  border: 1.5px solid var(--hairline); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; font: inherit; font-size: 13.5px; background: #fff;
}
.cond-pill.sel { outline: 2px solid var(--petrol); outline-offset: 1px; font-weight: 600; }
.tooth-history { border-top: 1px solid var(--hairline); padding-top: 10px; }
.tooth-history h3 { font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.hist-row { display: flex; align-items: center; gap: 7px; font-size: 13.5px; padding: 3px 0; }

/* Conversación (solo lectura) */
.pat-mensajes { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow: auto; }
.pat-mensajes .msg { max-width: 72%; padding: 8px 11px; border-radius: 12px; }
.pat-mensajes .msg-in  { background: #EFEDE8; align-self: flex-start; }
.pat-mensajes .msg-out { background: var(--turquoise-wash); align-self: flex-end; }
.pat-mensajes .msg-meta { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }

@media (max-width: 820px) {
  .ficha-grid { grid-template-columns: 1fr; }
  .datos-list { grid-template-columns: 1fr; }
  .diente { width: 28px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   TEMA CONNECT (Fase 1.1)
   Adopta del prototipo Control Hub: tipografía ("Segoe UI" + system
   stack), diagramación (sidebar 226px + contenido), y densidad.
   Conserva del panel: colores de marca (porcelana/petróleo/turquesa)
   y colores de estado. Esta capa va al final a propósito: gana por
   cascada y es reversible eliminándola.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Arial, system-ui, sans-serif;
  --r: 10px; --r-sm: 7px;
}

/* ── Tipografía: system stack en todo; Fraunces queda fuera ── */
body, button, input, select, textarea {
  font-family: var(--font);
}
body { font-size: 14px; -webkit-font-smoothing: antialiased; }

.day-header h1, .form-head h2, .form-confirm h3, .login-card h1,
.conv-name, .ficha-head h1 {
  font-family: var(--font);
}

/* "Hoy es …": del serif grande al título del prototipo */
.day-header h1 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
}
.day-header { margin-bottom: 14px; }
.ficha-head h1 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; }
.form-head h2 { font-size: 16px; font-weight: 700; }

/* ── Diagramación: sidebar real + área principal ── */

.sidebar {
  width: 226px; flex: 0 0 226px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  padding: 20px 14px 14px;
  overflow-y: auto;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 2px 8px 20px; }
.brand .logo-sm { height: 34px; width: auto; }
.brand-connect {
  font-size: 12px; font-weight: 700; letter-spacing: 2.6px;
  text-transform: uppercase; color: var(--petrol);
}

.tabs { display: flex; flex-direction: column; gap: 2px; }
.tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 11px; border: none; background: transparent;
  border-radius: var(--r-sm); border-bottom: none;
  font-size: 13.5px; text-align: left; justify-content: flex-start;
  color: var(--ink-soft); cursor: pointer; transition: background .12s;
}
.tab:hover { background: #fff; color: var(--ink); }
.tab.active {
  background: var(--turquoise-wash); color: var(--petrol-deep);
  font-weight: 600; box-shadow: none; border-bottom: none;
}
.sidebar-foot {
  margin-top: auto; padding: 12px 8px 2px;
  border-top: 1px solid var(--hairline);
  font-size: 11.5px; color: var(--ink-soft);
}

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main-top {
  height: 54px; flex: 0 0 54px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 26px; background: var(--porcelain);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 10;
}
#sync-btn { font-size: 13px; }
.view { max-width: 1060px; width: 100%; margin: 0; padding: 22px 28px 60px; }

/* El buscador funciona igual en todas las vistas (corrige la lupa montada) */
.search-wrap input {
  width: 100%; padding: 9px 12px 9px 34px;
  border: 1px solid var(--hairline); border-radius: var(--r-sm);
  background: var(--surface); font-size: 13.5px;
}
.search-wrap input:focus {
  outline: none; border-color: var(--turquoise-ink);
  box-shadow: 0 0 0 3px var(--turquoise-wash);
}

/* Móvil: sidebar arriba, horizontal */
@media (max-width: 760px) {
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 10px;
    border-right: none; border-bottom: 1px solid var(--hairline);
    padding: 10px 14px;
  }
  .brand { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
  .tabs { flex-direction: row; overflow-x: auto; flex: 1; }
  .tab { width: auto; white-space: nowrap; }
  .sidebar-foot { display: none; }
  .main-top { height: 44px; flex-basis: 44px; padding: 0 14px; }
}

/* ── Densidad de componentes (medidas del prototipo) ── */
.primary, .ghost, button.primary, button.ghost {
  font-size: 13px; font-weight: 600; padding: 8px 14px;
  border-radius: var(--r-sm);
}
.slim { padding: 5px 10px; font-size: 12px; }
.icon-btn { font-size: 20px; }

.field label { font-size: 12px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea, .inner-form textarea {
  font-size: 13.5px; padding: 9px 11px; border-radius: var(--r-sm);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--turquoise-ink);
  box-shadow: 0 0 0 3px var(--turquoise-wash);
}
.hint, .opt { font-size: 12px; }

.new-form { border-radius: var(--r); }
.new-trigger { border-radius: var(--r); }
.new-title { font-size: 14px; font-weight: 700; }
.new-sub { font-size: 12px; }

/* Tarjetas y listas con el radio y borde del prototipo */
.appointment, .doctor-card, .conv-item, .patient-row, .ficha-card,
.entrada, .pat-cita, .tooth-dialog {
  border-radius: var(--r);
}
.ficha-card { padding: 18px; }
.ficha-card h2, .card-head h2 { font-size: 14px; font-weight: 700; }

/* Pastillas de estado: tamaño del prototipo, MISMOS colores de siempre */
.pill {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px;
}

/* Encabezados de tabla / listas al estilo del prototipo */
.pat-row-sub, .pat-row-last, .cita-doctor { font-size: 12.5px; }
.etq { font-size: 10.5px; letter-spacing: .5px; }

/* Búsqueda */
.search-wrap { border-radius: var(--r-sm); }
.search-wrap input { font-size: 13.5px; }

/* Login en la misma familia */
.login-card { border-radius: 14px; }
.login-sub { font-size: 12.5px; letter-spacing: .3px; }

/* El diálogo de pieza hereda el modal del prototipo */
.tooth-dialog { box-shadow: 0 24px 60px rgba(0, 0, 0, .22); border-radius: 14px; }

/* ── Fase 1.4: citas de la ficha y marca ── */
.pat-cita.cita-activa {
  border-left: 3px solid var(--turquoise-ink);
  background: var(--surface);
}
.pat-cita.cita-activa .cita-cuando { color: var(--petrol-deep); }
.pat-cita.cita-pasada { opacity: .55; background: transparent; }
.citas-divisor {
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 10px 0 4px; padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

/* Marca: logo más presente, CONNECT acoplado a su ancho */
.brand { gap: 5px; padding: 4px 8px 22px; }
.brand .logo-sm { height: 48px; width: auto; }
.brand-connect {
  font-size: 13.5px; letter-spacing: 5.2px; padding-left: 2px;
  color: var(--petrol-deep);
}

/* Doctor de la sesión: tarjeta destacada del sidebar */
.atiende-box {
  display: flex; flex-direction: column; gap: 6px;
  margin: 2px 0 18px; padding: 12px;
  background: var(--turquoise-wash);
  border: 1px solid var(--turquoise-ink);
  border-radius: var(--r);
}
.atiende-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--petrol-deep);
}
.atiende-box select {
  width: 100%; font-size: 13.5px; font-weight: 600; color: var(--petrol-deep);
  padding: 8px 10px; border: 1px solid var(--turquoise-ink);
  border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
}
.atiende-nota { font-size: 11.5px; color: var(--warning); line-height: 1.35; }
.atiende-box.atiende-vacio { border-color: var(--warning); background: #FBF3EC; }
.atiende-box.atiende-vacio select { border-color: var(--warning); color: var(--ink-soft); font-weight: 400; }
.doctor-firma { font-size: 13.5px; padding: 9px 2px; color: var(--petrol-deep); font-weight: 600; }
.doctor-firma.sin-doctor { color: var(--ink-soft); font-weight: 400; font-style: italic; }

/* ── Galería de archivos del paciente ── */
.btn-subir { display: inline-flex; align-items: center; cursor: pointer; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.galeria-item { position: relative; border: 1px solid var(--hairline); border-radius: var(--r);
  overflow: hidden; background: var(--surface); }
.galeria-media { height: 110px; display: flex; align-items: center; justify-content: center;
  background: #EFEDE8; cursor: pointer; }
.galeria-media img { width: 100%; height: 100%; object-fit: cover; }
.doc-chip { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--petrol);
  border: 1.5px solid var(--petrol); border-radius: 6px; padding: 8px 14px; }
.galeria-item figcaption { padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; }
.galeria-cap { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.galeria-meta { font-size: 11px; color: var(--ink-soft); }
.galeria-void { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: rgba(34,40,42,.55); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.galeria-item:hover .galeria-void { opacity: 1; }

@media (max-width: 760px) {
  .atiende-box { margin: 0; padding: 8px 10px; flex: 0 0 auto; min-width: 170px; }
  .atiende-nota { display: none; }
}