:root {
  /* Paleta por defecto: pizarra, teal clínico y un ámbar de acento.
     Sustituye a la romana de terracota y dorado, que se sentía ornamental.
     Todos los pares de texto/fondo verificados por encima de 4.5:1. */
  --stone-dark: #0f172a;
  --travertine: #eef2f6;
  --surface: #ffffff;
  --bronze: #475569;
  --bronze-deep: #334155;
  --stone-line: #dfe5ec;
  --ink: #0f172a;
  --ink-muted: #546275;   /* 4.94:1 sobre el papel · antes #5b6b7f daba 4.33 */
  --tooth-default: #e6ecf2;

  --obsidian: #0f172a;
  --obsidian-line: rgba(248, 250, 252, 0.14);
  --marble: #f8fafc;
  --pompeii: #0d7d72;
  --pompeii-deep: #0a5f57;
  --gold-leaf: #f0b429;

  --radius: 10px;

  /* Ancho real de la ventana SIN la barra de desplazamiento. `100vw` sí la
     cuenta, y por eso el hero a sangre corría el sitio ~15px de lado. El JS
     lo mide y lo mantiene al día; esto es solo el valor de arranque. */
  --vw: 100vw;

  /* Botón de contorno: por omisión vive sobre fondo claro. Las zonas
     oscuras (el hero) redefinen estas tres y el botón se adapta solo. */
  --ghost-ink: var(--ink);
  --ghost-line: var(--stone-line);
  --ghost-hover: var(--pompeii);
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

/* `hidden` significa oculto, siempre.
   La regla [hidden]{display:none} viene de la hoja del navegador, y CUALQUIER
   regla de autor que declare `display` le gana, sin importar la especificidad.
   Por eso .tenant-gate{display:flex} dejaba el formulario de registro ocupando
   una pantalla entera encima del encabezado, y .admin-only.visible{display:block}
   mostraba el panel del dueño en todas las vistas a la vez. */
[hidden] { display: none !important; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* El lienzo del navegador (la zona de rebote al hacer scroll arriba) toma
   el fondo de <html>: si se deja transparente hereda el de la página y
   aparece una franja de color sobre la barra. */
html { background: var(--obsidian); }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--travertine);
  color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tenant-gate {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--obsidian);
  padding: 40px 20px;
}

.tenant-gate-card {
  max-width: 380px;
  width: 100%;
  background: color-mix(in srgb, var(--marble) 3%, transparent);
  border: 1px solid var(--obsidian-line);
  border-radius: 16px;
  padding: 32px 28px;
  text-align: center;
  color: var(--marble);
  --ink-muted: color-mix(in srgb, var(--marble) 62%, transparent);
}

.tenant-gate-heading {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-leaf);
  margin: 0 0 10px;
}

.tenant-gate-card .auth-form {
  max-width: none;
  margin-top: 14px;
}

.tenant-gate-card .auth-title {
  text-align: center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
}

.main-nav {
  background: var(--obsidian);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--obsidian-line);
  color: var(--marble);
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: var(--marble);
  cursor: pointer;
  padding: 2px 0;
  margin-right: auto;
}

.brand-seal {
  width: 30px;
  height: 30px;
  color: var(--gold-leaf);
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-word em { color: var(--gold-leaf); font-style: normal; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.nav-link {
  position: relative;
  background: none;
  border: none;
  color: color-mix(in srgb, var(--marble) 78%, transparent);
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 8px 4px;
  transition: color 0.15s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 3px;
  height: 1.5px;
  background: var(--gold-leaf);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.nav-link:hover { color: var(--marble); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--marble); }
.nav-link:active { opacity: 0.8; }

.nav-cta {
  background: var(--pompeii);
  border: none;
  color: var(--marble);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pompeii) 40%, transparent);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.nav-cta:hover { background: var(--pompeii-deep); transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--pompeii) 48%, transparent); }
.nav-cta:active { transform: scale(0.97); }
.nav-cta.active { background: var(--pompeii-deep); }

.nav-dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 210px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  z-index: 10;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.dropdown-item:hover { background: var(--travertine); }

.nav-link:focus-visible,
.nav-cta:focus-visible,
.brand:focus-visible,
.btn-solid:focus-visible,
.btn-ghost:focus-visible {
  outline-color: var(--gold-leaf);
}

/* Auth: discreto en la barra; se convierte en popover solo cuando hay
   un formulario que llenar (registro / login), sin empujar el layout. */
.auth-section {
  position: relative;
  font-size: 12px;
  color: color-mix(in srgb, var(--marble) 70%, transparent);
}

.auth-section > .text-btn {
  background: none;
  border: 1px solid var(--obsidian-line);
  color: color-mix(in srgb, var(--marble) 78%, transparent);
}

.auth-section > .text-btn:hover { border-color: var(--gold-leaf); color: var(--marble); background: none; }

.auth-section .admin-bar { color: var(--gold-leaf); font-size: 12px; gap: 10px; }
.auth-section .admin-bar .text-btn { background: none; border: 1px solid var(--obsidian-line); color: color-mix(in srgb, var(--marble) 78%, transparent); }

.auth-section .auth-form {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  margin: 0;
  width: 250px;
  max-width: 80vw;
  background: var(--obsidian);
  border: 1px solid var(--obsidian-line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
  z-index: 50;
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 24px;
}

/* El panel del dueño y el estimador respiran mejor anchos; el resto del
   contenido de lectura se queda estrecho a propósito. */
#view-panel, #view-estimador { max-width: 100%; }

.view { padding-top: 36px; }
/* El hero va pegado a la barra: cualquier separación deja ver el fondo de
   página por encima y parte el encabezado en dos. */
#view-citas { padding-top: 0; }

.view:not([hidden]) {
  animation: fadeInUp 0.35s ease;
}

.section-title {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--ink);
}

.section-eyebrow {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}

.section-subtitle {
  font-size: 13px;
  color: var(--ink-muted);
  margin: 0 0 20px;
}

.step-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}

.step-guide-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-muted);
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--stone-line);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.step-guide-item.current { opacity: 1; color: var(--ink); }
.step-guide-item.current .step-num { border-color: var(--bronze-deep); color: var(--bronze-deep); }

.step-guide-item.done { opacity: 1; color: var(--bronze-deep); }
.step-guide-item.done .step-num { background: var(--bronze-deep); border-color: var(--bronze-deep); color: #fff; }

/* ---------------------------------------------------------------------
   Hero — primera impresión. Rompe el ancho de 640px del resto del sitio
   a propósito (única vez que ocurre): la escala es parte del mensaje.

   El truco de `width:100vw` tiene una trampa conocida: 100vw incluye la
   barra de desplazamiento, así que el hero acababa siendo ~15px más ancho
   que el hueco real y el sitio entero se movía en horizontal. Se recorta
   arriba, en <html>, con `clip` y no con `hidden`: `hidden` crearía un
   contenedor de desplazamiento y la cabecera pegajosa dejaría de pegarse.
--------------------------------------------------------------------- */
.hero {
  position: relative;
  width: var(--vw, 100vw);
  margin-left: calc(50% - var(--vw, 100vw) / 2);
  margin-right: calc(50% - var(--vw, 100vw) / 2);
  margin-bottom: 40px;
  background: var(--obsidian);
  color: var(--marble);
  --ghost-ink: var(--marble);
  --ghost-line: var(--obsidian-line);
  --ghost-hover: var(--gold-leaf);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.hero-mosaic {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--gold-leaf) 28%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 90%);
}

.hero-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 720px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--pompeii) 38%, transparent) 0%, color-mix(in srgb, var(--pompeii) 10%, transparent) 45%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 76px 24px 48px;
  text-align: center;
}

.hero-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-leaf);
}

.hero-title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 8vw, 52px);
  line-height: 1.12;
  letter-spacing: 0.01em;
}

.hero-highlight {
  display: inline-block;
  background: var(--pompeii);
  color: var(--marble);
  padding: 2px 14px;
  border-radius: 4px;
}

.hero-copy {
  margin: 0 auto 30px;
  max-width: 440px;
  font-size: 15.5px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--marble) 78%, transparent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn-solid,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-solid {
  background: var(--pompeii);
  color: var(--marble);
  border: 1px solid var(--pompeii);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--pompeii) 38%, transparent);
}

.btn-solid:hover { background: var(--pompeii-deep); border-color: var(--pompeii-deep); transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--pompeii) 44%, transparent); }
.btn-solid:active { transform: scale(0.98); }

/* Estaba fijado a texto claro sobre borde oscuro, que solo sirve dentro
   del hero. Los otros tres sitios donde se usa ("Abrir el diente",
   "Cancelar", "Canjear") son paneles blancos: el botón salía blanco sobre
   blanco, con 1.07:1 de contraste. Ahora toma el color de su contexto. */
.btn-ghost {
  background: transparent;
  color: var(--ghost-ink);
  border: 1px solid var(--ghost-line);
}

.btn-ghost:hover { border-color: var(--ghost-hover); color: var(--ghost-hover); }
.btn-ghost:active { transform: scale(0.98); }

.hero-signature {
  position: relative;
  z-index: 1;
  width: min(320px, 78vw);
  margin: 0 auto 8px;
}

.signature-svg {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
    justify-items: stretch;
  }
  .hero-content {
    max-width: 480px;
    padding: 96px 40px 96px 64px;
    text-align: left;
    justify-self: end;
  }
  .hero-eyebrow { }
  .hero-copy { margin: 0 0 32px; }
  .hero-actions { justify-content: flex-start; }
  .hero-signature {
    align-self: center;
    justify-self: start;
    width: min(340px, 90%);
    margin: 0;
  }
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--travertine);
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  margin-bottom: 18px;
}

.tab-btn {
  flex: 1;
  padding: 9px 8px;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.tab-btn:hover { color: var(--ink); }

.tab-btn.active {
  background: var(--obsidian);
  color: var(--marble);
  box-shadow: 0 3px 10px rgba(21, 18, 14, 0.28);
}

.tab-btn:focus-visible,
.tooth-group:focus-visible,
[data-layer]:focus-visible,
.assign-btn:focus-visible,
.procedure-row input:focus-visible,
.admin-input:focus-visible,
.add-form input:focus-visible,
.add-form select:focus-visible,
.avail-form input:focus-visible,
.booking-form input:focus-visible,
.booking-form textarea:focus-visible,
.auth-form input:focus-visible,
.day-tile:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.brand:focus-visible,
.btn-solid:focus-visible,
.btn-ghost:focus-visible,
.dropdown-item:focus-visible,
.text-btn:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 2px;
}

/* El diagrama y el corte transversal se leen como un único negatoscopio:
   el instrumento real que usa un dentista para examinar una radiografía.
   Es la única licencia oscura de esta vista — el resto queda en calma. */
.canvas-wrap {
  position: relative;
  background: var(--obsidian);
  border-radius: 16px 16px 0 0;
  padding: 22px 16px 18px;
  margin-bottom: 0;
  overflow: hidden;
}

.canvas-texture {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--gold-leaf) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, black 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 38%, black 30%, transparent 85%);
}

.canvas-wrap svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}

.tooth-group {
  cursor: pointer;
}

.tooth {
  transition: fill 0.2s ease, stroke-width 0.15s ease;
}

.assign-panel {
  min-height: 20px;
  margin-bottom: 20px;
  background: var(--obsidian);
  border-top: 1px solid var(--obsidian-line);
  border-radius: 0 0 16px 16px;
  padding: 18px 16px 22px;
  color: var(--marble);
  box-shadow: 0 18px 34px rgba(21, 18, 14, 0.22);
  /* El diente sin asignar y su selección se ven bien con el marfil/bronce
     de siempre; solo el estado "seleccionado" pasa a oro para que resalte
     sobre el fondo oscuro, y las etiquetas mudas se aclaran para leerse. */
  --ink-muted: color-mix(in srgb, var(--marble) 62%, transparent);
  --bronze-deep: var(--gold-leaf);
}

.assign-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-muted);
}

.cross-section-wrap {
  max-width: 190px;
  margin: 0 auto 14px;
}

.cross-section-svg {
  width: 100%;
  height: auto;
  display: block;
}

.cross-section-svg [data-layer] {
  cursor: pointer;
  transition: fill 0.2s ease, stroke-width 0.15s ease;
}

.assign-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.assign-btn {
  border: 1px solid var(--stone-line);
  border-left: 4px solid var(--proc-color, var(--stone-line));
  background: var(--surface);
  padding: 8px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(21, 18, 14, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.assign-btn:hover { transform: translateY(-1px); }

.assign-btn.active {
  background: var(--proc-color);
  border-color: var(--proc-color);
  color: #ffffff;
}

.assign-panel .text-btn {
  background: color-mix(in srgb, var(--marble) 6%, transparent);
  border-color: var(--obsidian-line);
  color: var(--gold-leaf);
}

.assign-panel .text-btn:hover { background: color-mix(in srgb, var(--marble) 12%, transparent); border-color: var(--gold-leaf); }

.text-btn {
  background: var(--surface);
  border: 1px solid var(--stone-line);
  color: var(--bronze-deep);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.text-btn:hover { background: var(--travertine); border-color: var(--bronze); }
.text-btn:active { transform: scale(0.96); }

.text-link { color: var(--bronze-deep); }

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.procedure-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procedure-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.procedure-row:hover {
  border-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 31, 27, 0.07);
}

.procedure-row.checked { border-color: var(--bronze); }

.procedure-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bronze-deep);
  cursor: pointer;
}

.swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.procedure-name { flex: 1; font-size: 14px; }

.procedure-price {
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 18px;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 14px;
}

.total-bar-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.total-bar-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

#total-value {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  color: var(--pompeii);
  font-variant-numeric: tabular-nums;
}

.btn-compact {
  padding: 11px 20px;
  font-size: 13px;
}

.disclaimer {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
  text-align: center;
}

.admin-only { display: none; }
.admin-only.visible { display: block; }
/* El botón de configuración vive en la barra junto al CTA: se alinea en
   línea, no como bloque. */
.config-btn.admin-only.visible { display: inline-flex; }

.admin-block-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
}

.admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  transition: background 0.15s ease;
}

.admin-row:hover { background: var(--travertine); }

.admin-input {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 7px 9px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.admin-name { flex: 1; min-width: 0; }
.admin-price { width: 90px; }

.admin-scope {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.add-form input,
.add-form select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.add-form input[type="text"] { flex: 1; min-width: 140px; }

.add-form button {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--bronze);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.add-form button:hover { background: var(--bronze-deep); }
.add-form button:active { transform: scale(0.96); }

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 260px;
  margin: 8px auto 0;
}

.auth-title {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--gold-leaf);
}

.auth-form input {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--obsidian-line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--marble) 6%, transparent);
  color: var(--marble);
}

.auth-form button {
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--pompeii);
  color: var(--marble);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.auth-form button:hover { background: var(--pompeii-deep); }
.auth-form button:active { transform: scale(0.96); }

.auth-error { color: #e8877a; font-size: 12px; margin: 4px 0 0; animation: fadeInUp 0.25s ease; }
.auth-notice { color: var(--gold-leaf); font-size: 12px; margin: 4px 0 0; animation: fadeInUp 0.25s ease; }

.admin-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: var(--bronze);
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.day-tile {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--stone-line);
  background: var(--surface);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.day-tile:hover {
  border-color: var(--bronze);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(33, 31, 27, 0.1);
}

.day-tile:active { transform: translateY(-1px) scale(0.98); }

.day-tile.active {
  background: var(--bronze);
  border-color: var(--bronze);
}

.day-tile.active .day-tile-date,
.day-tile.active .day-tile-cupo,
.day-tile.active .day-tile-dow,
.day-tile.active .day-tile-doctor {
  color: #ffffff;
}

.day-tile-dow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}

.day-tile-date {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.day-tile-doctor {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-muted);
  margin-top: 1px;
}

.day-tile-cupo {
  font-size: 11px;
  color: var(--ink-muted);
}

/* Un día en el que ya tienes cita: sigue a la vista, porque saber que ya
   estás dentro es información útil, pero no se puede volver a pulsar. */
.day-tile.ya-agendado {
  cursor: default;
  border-style: dashed;
  border-color: var(--bronze);
  background: color-mix(in srgb, var(--bronze) 10%, var(--surface));
}

.day-tile.ya-agendado:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--bronze);
}

.day-tile.ya-agendado .day-tile-cupo {
  color: var(--bronze-deep);
  font-weight: 600;
}

/* Confirmación de la cita: sustituye al formulario en su mismo hueco. */
.cita-confirmada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--bronze) 8%, var(--surface));
  text-align: center;
  animation: fadeInUp 0.3s ease;
}

.cita-confirmada svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--bronze);
}

.cita-confirmada p { margin: 0; font-size: 14px; color: var(--ink); }
.cita-confirmada-nota { font-size: 12.5px; color: var(--ink-muted); }

/* La salida por si alguien se identificó con datos ajenos. Discreta: no es
   el camino normal, y no muestra los datos guardados. */
.booking-no-soy-yo {
  align-self: center;
  font-size: 11.5px;
  opacity: 0.7;
}

.booking-no-soy-yo:hover { opacity: 1; }

.doctor-heading {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--bronze-deep);
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--stone-line);
}

.doctor-heading:first-child { margin-top: 0; }

.panel-block {
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 16px;
  padding: 22px 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 3px 14px rgba(33, 31, 27, 0.05);
}

.panel-block:last-child { margin-bottom: 0; }

.panel-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-block-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--travertine);
  border: 1px solid var(--stone-line);
  color: var(--bronze-deep);
}

.panel-block-icon svg { width: 17px; height: 17px; }

.panel-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.stat-chip {
  background: var(--obsidian);
  color: var(--marble);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold-leaf);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--marble) 65%, transparent);
}

.patient-search-input {
  transition: border-color 0.15s ease;
}

.ficha-abrir-btn:focus-visible,
.ficha-guardar:focus-visible,
.ficha-tarjeta-head:focus-visible,
.historial-entry-head:focus-visible,
.ficha-marca-det:focus-visible,
.patient-result-row:focus-visible,
.visor-capa:focus-visible,
.patient-search-input:focus-visible { border-color: var(--bronze); }

.patient-result-row {
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.patient-result-row:hover {
  border-color: var(--bronze);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(33, 31, 27, 0.07);
}

.historial-entry {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.historial-entry:hover {
  border-color: var(--bronze);
  box-shadow: 0 3px 10px rgba(33, 31, 27, 0.06);
}

.doctor-admin-row {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.doctor-admin-row:hover {
  border-color: var(--bronze);
  box-shadow: 0 3px 10px rgba(33, 31, 27, 0.06);
}

.doctor-section {
  margin-bottom: 28px;
}

.doctor-section-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}

.doctor-section-name {
  color: var(--bronze-deep);
}

.doctor-section-especialidades {
  font-size: 12.5px;
  color: var(--ink-muted);
  margin: 0 0 12px;
}

.doctor-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.doctor-form input,
.doctor-form textarea {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.doctor-form textarea { min-height: 60px; resize: vertical; }

.doctor-form button {
  align-self: flex-start;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--bronze);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.doctor-form button:hover { background: var(--bronze-deep); }
.doctor-form button:active { transform: scale(0.96); }

.doctor-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doctor-admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
}

.doctor-admin-row .admin-input { min-width: 100px; }
.doctor-admin-row .admin-name { flex: 1 1 160px; }

.doctor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid var(--stone-line);
  border-radius: 12px;
  background: var(--surface);
  animation: fadeInUp 0.3s ease;
}

.booking-form input,
.booking-form textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--travertine);
  color: var(--ink);
}

.booking-form textarea { min-height: 70px; resize: vertical; }

.booking-form button {
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--bronze);
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(107, 130, 114, 0.3);
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.booking-form button:hover { background: var(--bronze-deep); transform: translateY(-1px); box-shadow: 0 5px 14px rgba(107, 130, 114, 0.38); }
.booking-form button:active { transform: scale(0.97); }

.avail-form { display: flex; gap: 8px; margin-bottom: 12px; }

.avail-form input,
.avail-form select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.avail-form button {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--bronze);
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.avail-form button:hover { background: var(--bronze-deep); }
.avail-form button:active { transform: scale(0.96); }

.avail-list, .citas-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.avail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.avail-row:hover { border-color: var(--bronze); box-shadow: 0 3px 10px rgba(33, 31, 27, 0.06); }

.cita-row {
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cita-row:hover { border-color: var(--bronze); box-shadow: 0 3px 10px rgba(33, 31, 27, 0.06); }

.patient-search-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 11px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  margin-bottom: 8px;
}

.patient-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.patient-result-row {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.patient-result-row:hover { border-color: var(--bronze); }

.patient-card {
  padding: 14px 16px;
  border: 1px solid var(--stone-line);
  border-top: 3px solid var(--gold-leaf);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.patient-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bronze-deep);
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}

.patient-card-datos { flex: 1; min-width: 0; }

.patient-name {
  margin: 0 0 2px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}

.ficha-abrir-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 1px solid var(--bronze);
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bronze-deep);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.ficha-abrir-btn:hover { background: var(--bronze); color: #ffffff; }
.ficha-abrir-btn:active { transform: scale(0.97); }

.patient-meta {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   Ficha clinica
   --------------------------------------------------------------- */

/* Alertas: lo unico que no se pliega. Quien va a infiltrar tiene que
   verlas sin abrir nada. */
.ficha-alertas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.ficha-alerta {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  background: color-mix(in srgb, var(--bronze) 12%, var(--surface));
  font-size: 11.5px;
  font-weight: 600;
  color: var(--bronze-deep);
}

.ficha-alerta.grave {
  border-color: color-mix(in srgb, var(--pompeii) 50%, transparent);
  background: color-mix(in srgb, var(--pompeii) 12%, var(--surface));
  color: var(--pompeii-deep);
}

.ficha-sin-llenar {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px dashed var(--stone-line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.ficha-tarjetas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

/* Cada seccion es una tarjeta plegada con su resumen en una linea. Una
   ficha llena son cuarenta campos: volcarlos todos obliga a leer un muro
   para encontrar el dato que se buscaba. */
.ficha-tarjeta {
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.ficha-tarjeta[open] { border-color: var(--bronze); }
.ficha-tarjeta.vacia { opacity: 0.62; }

.ficha-tarjeta-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ficha-tarjeta-head::-webkit-details-marker { display: none; }
.ficha-tarjeta-head:hover { background: color-mix(in srgb, var(--bronze) 6%, transparent); }

.ficha-tarjeta-icono {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bronze) 14%, var(--surface));
  color: var(--bronze-deep);
}

.ficha-tarjeta-icono svg { width: 17px; height: 17px; }

.ficha-tarjeta-texto { flex: 1; min-width: 0; }

.ficha-tarjeta-titulo {
  display: block;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.ficha-tarjeta-resumen {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha-tarjeta-chevron {
  flex-shrink: 0;
  color: var(--ink-muted);
  transition: transform 0.18s ease;
}

.ficha-tarjeta-chevron svg { width: 15px; height: 15px; display: block; }
.ficha-tarjeta[open] .ficha-tarjeta-chevron { transform: rotate(180deg); }

.ficha-tarjeta-cuerpo {
  padding: 2px 13px 13px;
  border-top: 1px solid var(--stone-line);
}

.ficha-dato {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--stone-line) 55%, transparent);
  font-size: 13px;
  line-height: 1.5;
}

.ficha-dato:last-child { border-bottom: none; }

.ficha-dato-label {
  flex: 0 0 44%;
  color: var(--ink-muted);
}

.ficha-dato-valor {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* --- La ventana de captura --- */
.ficha-panel { max-width: 720px; }

.ficha-form { display: block; }

.ficha-seccion {
  margin: 0 0 22px;
  padding: 0 0 4px;
  border: none;
  border-top: 1px solid var(--stone-line);
}

.ficha-seccion:first-of-type { border-top: none; }

.ficha-seccion-legend {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.ficha-seccion:first-of-type .ficha-seccion-legend { margin-top: 0; }

.ficha-seccion-num {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bronze-deep);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
}

.ficha-seccion-ayuda {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.ficha-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-top: 14px;
}

.ficha-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ficha-campo.ancho { grid-column: 1 / -1; }

.ficha-campo-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.ficha-campo-ayuda {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-muted);
}

.ficha-campo input[type="text"],
.ficha-campo input[type="date"],
.ficha-campo input[type="number"],
.ficha-campo select,
.ficha-campo textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 13.5px;
  padding: 8px 10px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}

.ficha-campo textarea { resize: vertical; min-height: 52px; }

.ficha-campo input:focus-visible,
.ficha-campo select:focus-visible,
.ficha-campo textarea:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 1px;
}

/* Las casillas del papel original: marca y, si marcas, explica. */
.ficha-campo.marca { gap: 4px; }

.ficha-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}

.ficha-marca input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--bronze-deep);
  cursor: pointer;
}

.ficha-marca-det {
  margin-left: 24px;
  width: calc(100% - 24px) !important;
  font-size: 12.5px !important;
  padding: 6px 9px !important;
}

.ficha-acciones {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--stone-line);
}

.ficha-acciones .auth-error { margin: 0; flex: 1; }

.ficha-guardar {
  padding: 10px 22px;
  border: none;
  border-radius: 999px;
  background: var(--bronze);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s ease;
}

.ficha-guardar:hover { background: var(--bronze-deep); }
.ficha-guardar:active { transform: scale(0.97); }
.ficha-guardar:disabled { opacity: 0.6; cursor: default; }

/* --- Visitas --- */
.historial-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.historial-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.historial-conteo { font-size: 11.5px; color: var(--ink-muted); }

.historial-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.historial-entry {
  border: 1px solid var(--stone-line);
  border-left: 4px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.historial-entry[data-tipo="nota"] { border-left-color: var(--bronze); }
.historial-entry[data-tipo="diagnostico"] { border-left-color: var(--pompeii); }
.historial-entry[data-tipo="tratamiento"] { border-left-color: var(--gold-leaf); }

.historial-entry-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.historial-entry-head::-webkit-details-marker { display: none; }
.historial-entry-head:hover { background: color-mix(in srgb, var(--bronze) 6%, transparent); }

/* El resumen de una linea: se ve de que va sin abrir la tarjeta. */
.historial-resumen {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historial-entry-cuerpo { padding: 0 12px 11px; }

.historial-tipo {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.historial-fecha {
  flex-shrink: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.historial-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.historial-diente {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.historial-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.historial-form select,
.historial-form input,
.historial-form textarea {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

.historial-form textarea { min-height: 60px; resize: vertical; }

.historial-form button {
  align-self: flex-start;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--bronze);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.historial-form button:hover { background: var(--bronze-deep); }
.historial-form button:active { transform: scale(0.96); }

.philosophy {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 20px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.photo-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px dashed var(--stone-line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.info-block p { margin: 2px 0; font-size: 14px; }

.info-block .info-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.map-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--stone-line);
}

.map-note {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 6px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 4px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faq-item:hover { border-color: var(--bronze); box-shadow: 0 3px 10px rgba(33, 31, 27, 0.06); }

.faq-item summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--bronze-deep);
}

.faq-item[open] summary::after { content: '\2212'; }

.faq-item p {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

.site-footer {
  text-align: center;
  padding: 24px 20px 40px;
  border-top: 1px solid var(--stone-line);
  font-size: 12px;
  color: var(--ink-muted);
}

.footer-hours { margin-top: 4px; }

@media (max-width: 480px) {
  .admin-row { flex-wrap: wrap; }
  .admin-row .admin-name { flex: 1 1 150px; min-width: 130px; }
  .admin-row .admin-price { flex: 0 1 74px; }
  .photo-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-content { padding: 52px 20px 36px; }
  .hero-signature { width: min(240px, 70vw); }
  .nav-inner { padding: 12px 16px; gap: 12px 16px; }
  .brand-word { font-size: 14px; }
  .auth-section .auth-form { right: -12px; }
  .tab-btn { padding: 9px 4px; font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-btn, .procedure-row, .tooth, .day-tile,
  .nav-link, .nav-cta, .brand, .btn-solid, .btn-ghost { transition: none; }
  .view:not([hidden]) { animation: none; }
}
/* ---------------------------------------------------------------------
   Personalización de la clínica (solo administrador)
   --------------------------------------------------------------------- */
.config-btn {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--obsidian-line);
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--marble) 78%, transparent);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.config-btn svg { width: 18px; height: 18px; }

.config-btn:hover {
  color: var(--gold-leaf);
  border-color: var(--gold-leaf);
  transform: rotate(35deg);
}

.config-btn:focus-visible {
  outline: 2px solid var(--gold-leaf);
  outline-offset: 2px;
}

.config-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(21, 18, 14, 0.72);
  backdrop-filter: blur(3px);
}

.config-overlay[hidden] { display: none; }

.config-panel {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 16px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(21, 18, 14, 0.45);
  animation: fadeInUp 0.22s ease both;
}

.config-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.config-eyebrow {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pompeii);
  font-weight: 600;
}

.config-title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
}

.config-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--stone-line);
  border-radius: 50%;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.config-close:hover { color: var(--pompeii); border-color: var(--pompeii); }

.config-hint {
  margin: 14px 0 20px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.config-field { display: block; margin-bottom: 22px; }

.config-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.config-text {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}

.config-text:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 1px;
}

.config-colores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 12px;
}

.config-color-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
}

.config-color-row input[type="color"] {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--stone-line);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

.config-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.config-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

.config-color-texto { min-width: 0; }

.config-color-nombre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.config-color-donde {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.config-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--stone-line);
}

.config-actions-right { display: flex; align-items: center; gap: 10px; }

#config-error:empty { display: none; }
#config-error { margin: 16px 0 0; }

@media (max-width: 560px) {
  .config-panel { padding: 20px 18px 18px; }
  .config-colores { grid-template-columns: 1fr; }
  .config-actions { justify-content: stretch; }
  .config-actions-right { flex: 1; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .config-panel { animation: none; }
  .config-btn, .config-close { transition: none; }
  .config-btn:hover { transform: none; }
}

/* Logo de la clínica: sustituye al sello dorado cuando el dueño sube uno */
.brand-logo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 4px;
}

.brand-logo[hidden] { display: none; }

.config-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.config-logo-preview {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--stone-line);
  border-radius: 10px;
  background: var(--marble);
  overflow: hidden;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-muted);
  padding: 4px;
}

.config-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.config-logo-acciones { min-width: 0; }

.config-logo-botones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.config-logo-acciones .config-color-donde { margin: 0; }

/* ---------------------------------------------------------------------
   Identidad antes de agendar: doctor o paciente
   --------------------------------------------------------------------- */
.identidad-zona { margin-bottom: 22px; }

.identidad-card {
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px 20px;
}

.identidad-titulo {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.identidad-texto {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.identidad-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.identidad-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.identidad-opcion:hover {
  border-color: var(--pompeii);
  transform: translateY(-1px);
}

.identidad-opcion:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 2px;
}

.identidad-opcion svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--pompeii);
}

.identidad-opcion-nombre {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.identidad-opcion-desc {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-muted);
}

.identidad-form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  max-width: 360px;
}

.identidad-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}

.identidad-form input:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 1px;
}

.identidad-form-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Barra de "agendando como ..." una vez identificado */
.identidad-activa {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink);
}

.identidad-activa-nombre { font-weight: 600; }
.identidad-activa .text-btn { margin-left: auto; }

/* ---------------------------------------------------------------------
   Panel del dueño: secciones plegables y guía de puesta en marcha
   --------------------------------------------------------------------- */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes desplegar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  35%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pompeii) 16%, transparent); }
}

/* Los chips de arriba ahora son botones que llevan a su sección */
.stat-chip {
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.stat-chip:hover {
  transform: translateY(-2px);
  border-color: var(--pompeii);
}

.stat-chip:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 2px;
}

/* Guía: cuál es el siguiente paso */
.panel-guia {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--pompeii);
  border-radius: var(--radius);
  background: var(--surface);
  animation: aparecer 0.3s ease both;
}

.panel-guia[hidden] { display: none; }

.panel-guia-icono {
  color: var(--pompeii);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.panel-guia-texto {
  margin: 0;
  flex: 1;
  min-width: 200px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

/* Secciones plegables */
.panel-block {
  border: 1px solid var(--stone-line);
  border-radius: 14px;
  background: var(--surface);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-block[open] { border-color: var(--bronze); }

.panel-block.destacado {
  border-color: var(--pompeii);
  animation: latido 1.2s ease;
}

.panel-block-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}

.panel-block-head::-webkit-details-marker { display: none; }
.panel-block-head:hover { background: var(--travertine); }

.panel-block-head:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: -2px;
}

.panel-block-icon {
  display: flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--travertine);
  color: var(--bronze-deep);
}

.panel-block-icon svg { width: 18px; height: 18px; }

.panel-block-titulo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.panel-block-titulo .admin-block-title { margin: 0; }

.panel-block-meta {
  font-size: 11.5px;
  color: var(--ink-muted);
}

.panel-block-chevron {
  flex-shrink: 0;
  display: flex;
  color: var(--ink-muted);
  transition: transform 0.2s ease;
}

.panel-block-chevron svg { width: 16px; height: 16px; }
.panel-block[open] .panel-block-chevron { transform: rotate(180deg); }

.panel-block-body {
  padding: 4px 18px 18px;
  animation: desplegar 0.22s ease both;
}

.panel-block-ayuda {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: var(--travertine);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.panel-block-ayuda strong { color: var(--ink); }

/* ---------------------------------------------------------------------
   Animaciones de entrada escalonadas
   --------------------------------------------------------------------- */
.day-tile,
.procedure-row,
.admin-row,
.doctor-admin-row,
.cita-row,
.historial-entry {
  animation: aparecer 0.3s ease both;
}

/* Cada elemento entra un poco después que el anterior: da sensación de
   lista que se compone, no de bloque que aparece de golpe. */
.day-tile:nth-child(1), .procedure-row:nth-child(1), .admin-row:nth-child(1),
.doctor-admin-row:nth-child(1), .cita-row:nth-child(1), .historial-entry:nth-child(1) { animation-delay: 0.02s; }
.day-tile:nth-child(2), .procedure-row:nth-child(2), .admin-row:nth-child(2),
.doctor-admin-row:nth-child(2), .cita-row:nth-child(2), .historial-entry:nth-child(2) { animation-delay: 0.06s; }
.day-tile:nth-child(3), .procedure-row:nth-child(3), .admin-row:nth-child(3),
.doctor-admin-row:nth-child(3), .cita-row:nth-child(3), .historial-entry:nth-child(3) { animation-delay: 0.10s; }
.day-tile:nth-child(4), .procedure-row:nth-child(4), .admin-row:nth-child(4),
.doctor-admin-row:nth-child(4), .cita-row:nth-child(4), .historial-entry:nth-child(4) { animation-delay: 0.14s; }
.day-tile:nth-child(5), .procedure-row:nth-child(5), .admin-row:nth-child(5),
.doctor-admin-row:nth-child(5), .cita-row:nth-child(5), .historial-entry:nth-child(5) { animation-delay: 0.18s; }
.day-tile:nth-child(n+6), .procedure-row:nth-child(n+6), .admin-row:nth-child(n+6),
.doctor-admin-row:nth-child(n+6), .cita-row:nth-child(n+6), .historial-entry:nth-child(n+6) { animation-delay: 0.22s; }

.identidad-card { animation: aparecer 0.3s ease both; }

/* Nada de esto debe moverse para quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .panel-guia, .panel-block-body, .identidad-card,
  .day-tile, .procedure-row, .admin-row,
  .doctor-admin-row, .cita-row, .historial-entry {
    animation: none;
  }
  .panel-block, .panel-block-head, .panel-block-chevron, .stat-chip { transition: none; }
  .stat-chip:hover { transform: none; }
  .panel-block.destacado { animation: none; }
}

/* Con logo propio el sello desaparece. Va por clase y no por [hidden]:
   .hidden = true no hace nada sobre un <svg>, porque hidden es una
   propiedad de HTMLElement y un SVG no lo es. */
.brand.con-logo .brand-seal { display: none; }

/* Modos de personalización: manual o automático desde el logo */
.config-modos {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: var(--marble);
}

.config-modo {
  flex: 1;
  padding: 9px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.config-modo:hover { color: var(--ink); }

.config-modo.activo {
  background: var(--pompeii);
  color: var(--marble);
}

.config-modo:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 2px;
}

.config-auto[hidden] { display: none; }
.config-colores[hidden] { display: none; }

.config-auto-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.config-auto-estado {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.config-auto-estado.ok { color: var(--bronze-deep); }
.config-auto-estado.error { color: var(--pompeii); }

.config-auto-muestras {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.config-auto-muestras:empty { display: none; }

.config-auto-muestra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: var(--marble);
  font-size: 11.5px;
  color: var(--ink-muted);
  animation: aparecer 0.25s ease both;
}

.config-auto-color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--stone-line);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .config-modo { transition: none; }
  .config-auto-muestra { animation: none; }
}

/* Cita con acción de cancelar */
.cita-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cita-datos { flex: 1; min-width: 0; }

.cita-tel {
  color: var(--pompeii);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.cita-tel:hover { border-bottom-color: var(--pompeii); }

.cita-cancelar {
  flex-shrink: 0;
  align-self: center;
}

.cita-cancelar:hover {
  color: var(--pompeii);
  border-color: var(--pompeii);
}

/* ---------------------------------------------------------------------
   Móvil: la barra ocupaba 189px (23% de la pantalla) porque todo se
   envolvía, las áreas táctiles quedaban en 31-34px y el hero se comía
   755px de 812, dejando el contenido fuera de la primera pantalla.
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .nav-inner {
    padding: 10px 16px;
    gap: 10px 12px;
  }

  /* Los enlaces pasan a una tira que se desliza en horizontal en vez de
     envolverse en tres filas. */
  .nav-links {
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 2px;
    margin: 0 -16px;
    padding: 0 16px 2px;
  }

  .nav-links::-webkit-scrollbar { display: none; }

  .nav-link {
    flex-shrink: 0;
    padding: 11px 10px;   /* 44px de alto real */
    font-size: 14px;
  }

  .nav-right { gap: 10px; }

  .brand { padding: 6px 0; }
  .brand-word { font-size: 14px; letter-spacing: 0.06em; }

  .nav-cta { padding: 12px 16px; }
  .config-btn { width: 40px; height: 40px; }
  .auth-section .admin-bar { font-size: 11px; gap: 6px; }
  .auth-section .text-btn { padding: 9px 10px; }

  /* El hero deja ver que hay algo debajo. */
  .hero-content { padding: 44px 20px 36px; }
  .hero-title { font-size: 30px; }
  .hero-signature { display: none; }
  .hero { margin-bottom: 28px; }

  .view { padding-top: 24px; }

  /* Formularios y listas del panel en una sola columna, con campos
     cómodos de tocar. */
  .avail-form, .add-form, .doctor-form { grid-template-columns: 1fr; }

  .avail-form input, .avail-form select,
  .add-form input, .add-form select,
  .doctor-form input, .doctor-form textarea,
  .identidad-form input, .config-text, .patient-search-input {
    min-height: 44px;
    font-size: 16px;   /* menos de 16px hace que iOS haga zoom al enfocar */
  }

  .admin-row, .doctor-admin-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .admin-row .admin-input, .doctor-admin-row .admin-input { min-height: 40px; }

  .cita-row { flex-direction: column; align-items: stretch; }
  .cita-cancelar { align-self: flex-start; }

  .panel-block-head { padding: 14px 14px; }
  .panel-block-body { padding: 4px 14px 16px; }
  .panel-stats { gap: 8px; }

  .config-panel { padding: 18px 16px 16px; max-height: 92vh; }
  .config-modo { padding: 12px 10px; }

  .total-row { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* Pantallas muy estrechas */
@media (max-width: 380px) {
  .brand-word { font-size: 12.5px; }
  .nav-cta { padding: 11px 13px; font-size: 12.5px; }
  .hero-title { font-size: 26px; }
}

@media (max-width: 720px) {
  /* "Modo administrador activo" forzaba una fila entera de la barra. El
     engranaje y el botón de salir ya dicen que estás en modo dueño. */
  .auth-section .admin-bar > span { display: none; }
  .auth-section .admin-bar { gap: 0; }
  .nav-link { padding: 13px 10px; }
  .brand-seal, .brand-logo { width: 26px; height: 26px; }
}

/* Pantalla de carga: cubre el arranque para que no se vea la marca por
   defecto antes de que llegue la de la clínica. */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--obsidian);
  transition: opacity 0.3s ease;
}

.cargando.saliendo { opacity: 0; pointer-events: none; }

.cargando-anillo {
  width: 34px;
  height: 34px;
  border: 2px solid color-mix(in srgb, var(--gold-leaf) 25%, transparent);
  border-top-color: var(--gold-leaf);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.cargando-texto {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--marble) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cargando-anillo { animation: none; border-top-color: var(--gold-leaf); }
  .cargando { transition: none; }
}

/* La fila de doctor ahora lleva acciones de acceso además de editar */
.doctor-admin-row { flex-wrap: wrap; }
.doctor-admin-row .text-btn { flex-shrink: 0; }
#doctor-aviso { border-left-color: var(--bronze); }

/* La recuperación va por encima de todo, incluida la pantalla de carga
   (z-index 100): puede llegar en cualquier momento del arranque. */
#recuperar-overlay { z-index: 120; }

/* ---------------------------------------------------------------------
   Portada de (la raíz de la plataforma, sin ?clinica).
   No confundir con la web de cada clínica cliente, que lleva su marca.
   --------------------------------------------------------------------- */
.lobby-portada {
  display: grid;
  grid-template-columns: 1.1fr 380px;
  gap: 48px;
  align-items: center;
  max-width: 980px;
  width: 100%;
}

.lobby-presentacion { color: var(--marble); }

.lobby-marca {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-leaf);
}

.lobby-titular {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.lobby-copy {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  color: color-mix(in srgb, var(--marble) 72%, transparent);
}

.lobby-ventajas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.lobby-ventajas li {
  display: grid;
  gap: 2px;
  padding-left: 18px;
  position: relative;
}

.lobby-ventajas li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-leaf);
}

.lobby-ventajas strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--marble);
}

.lobby-ventajas span {
  font-size: 12.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--marble) 60%, transparent);
}

@media (max-width: 900px) {
  .lobby-portada {
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 420px;
  }
  .lobby-titular { font-size: 30px; }
  .lobby-ventajas { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
}

@media (max-width: 560px) {
  .lobby-titular { font-size: 25px; }
  .lobby-ventajas { grid-template-columns: 1fr; }
}

/* Editor de textos de la clínica */
.config-textos[hidden] { display: none; }
.config-textos textarea.config-text { min-height: 74px; resize: vertical; }

.config-faq {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--stone-line);
}

.config-faq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.config-faq-fila {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  animation: aparecer 0.22s ease both;
}

.config-faq-fila textarea.config-text { min-height: 60px; }
.config-faq-fila .text-btn { justify-self: start; }

@media (prefers-reduced-motion: reduce) { .config-faq-fila { animation: none; } }

/* Pantalla de mantenimiento (suscripción vencida) */
.mantenimiento {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--obsidian);
}

.mantenimiento-card {
  max-width: 420px;
  text-align: center;
  color: var(--marble);
}

.mantenimiento-icono { display: block; color: var(--gold-leaf); margin-bottom: 18px; }
.mantenimiento-icono svg { width: 44px; height: 44px; }

.mantenimiento-titulo {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
}

.mantenimiento-texto {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--marble) 65%, transparent);
}

.mantenimiento-dueno { margin-bottom: 16px; }
.mantenimiento .text-btn { border-color: var(--obsidian-line); color: color-mix(in srgb, var(--marble) 70%, transparent); }

/* Estado de suscripción en el panel del dueño */
.panel-suscripcion {
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--bronze);
  border-radius: var(--radius);
  background: var(--surface);
}

.panel-suscripcion.aviso   { border-left-color: var(--gold-leaf); }
.panel-suscripcion.vencida { border-left-color: var(--pompeii); }

.susc-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.susc-titulo { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.susc-texto  { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); max-width: 48ch; }

.susc-precio {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--pompeii);
  white-space: nowrap;
}

.susc-precio span { font-family: var(--font-body); font-size: 12px; color: var(--ink-muted); font-weight: 400; }

.susc-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.susc-plan {
  display: grid;
  gap: 2px;
  padding: 11px 10px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.susc-plan:hover { border-color: var(--pompeii); transform: translateY(-1px); }
.susc-plan-meses { font-size: 12px; color: var(--ink-muted); }
.susc-plan-total { font-size: 14px; font-weight: 600; color: var(--ink); }

.susc-codigo { display: flex; gap: 8px; flex-wrap: wrap; }

.susc-codigo input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}

.susc-msg { margin: 10px 0 0; font-size: 12.5px; }
.susc-msg:empty { display: none; }
.susc-msg.ok { color: var(--bronze-deep); }
.susc-msg.error { color: var(--pompeii); }

@media (prefers-reduced-motion: reduce) {
  .susc-plan { transition: none; }
  .susc-plan:hover { transform: none; }
}

/* Consola de Doc's Lobby: administración de códigos */
.consola {
  width: 100%;
  max-width: 860px;
  background: var(--surface);
  border: 1px solid var(--stone-line);
  border-radius: 16px;
  padding: 26px;
  color: var(--ink);
}

.consola-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.consola-titulo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
}

.consola-sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-muted); max-width: 52ch; }

.consola-form {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 1fr auto;
  gap: 8px;
  align-items: center;
}

.consola-form input {
  padding: 10px 12px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
}

.consola-lista { margin-top: 20px; display: grid; gap: 8px; }

.consola-fila {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-size: 13px;
}

.consola-fila.inactiva { opacity: 0.55; }
.consola-codigo { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; letter-spacing: 0.04em; }
.consola-dato { color: var(--ink-muted); font-size: 12.5px; }

.consola-estado {
  margin-left: auto;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bronze-deep);
}

@media (max-width: 720px) {
  .consola { padding: 20px 16px; }
  .consola-form { grid-template-columns: 1fr 1fr; }
  .consola-form button { grid-column: 1 / -1; }
  .consola-estado { margin-left: 0; }
}

/* Selector de ilustración de portada */
.config-motivos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.motivo-opcion {
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  text-align: left;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.motivo-opcion:hover:not(:disabled) { border-color: var(--pompeii); }

.motivo-opcion.activo {
  border-color: var(--pompeii);
  background: color-mix(in srgb, var(--pompeii) 8%, var(--marble));
}

.motivo-opcion.deshabilitado { opacity: 0.5; cursor: not-allowed; }
.motivo-opcion:focus-visible { outline: 2px solid var(--pompeii); outline-offset: 2px; }

.motivo-nombre { font-size: 13px; font-weight: 600; color: var(--ink); }
.motivo-desc { font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); }

/* Motivo "tu logo": el logo actúa de máscara y la página pinta el color de
   la paleta a través de su forma, así que nunca desentona. */
.motivo-logo {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  background: var(--gold-leaf);
  -webkit-mask-image: var(--logo);
  mask-image: var(--logo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) { .motivo-opcion { transition: none; } }

/* ---------------------------------------------------------------------
   Despliegue del texto de portada
   Cada línea se revela desde abajo, escalonada. El clip-path es lo que da
   la sensación de "desplegarse" en vez de solo aparecer.
   --------------------------------------------------------------------- */
@keyframes desplegar-hero {
  from {
    opacity: 0;
    transform: translateY(18px);
    clip-path: inset(0 0 105% 0);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(-30% -30% -30% -30%);
  }
}

/* Los botones se despliegan SIN clip-path.
   El recorte de `desplegar-hero` empieza en `inset(0 0 105% 0)`, que deja el
   elemento reducido a nada — y un área recortada tampoco recibe el ratón. En
   el texto da igual, pero en los botones abría un hueco de 1,3 segundos desde
   que carga la página en el que pulsar "Agendar cita" no hacía nada. Se ve
   igual, porque a esta escala el recorte no se aprecia. */
@keyframes aparecer-acciones {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aparecer-firma {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-eyebrow,
.hero-title,
.hero-copy {
  animation: desplegar-hero 0.75s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

.hero-actions {
  animation: aparecer-acciones 0.75s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

.hero-eyebrow { animation-delay: 0.08s; }
.hero-title   { animation-delay: 0.20s; }
.hero-copy    { animation-delay: 0.38s; }
.hero-actions { animation-delay: 0.52s; }

.hero-signature { animation: aparecer-firma 0.9s ease 0.3s both; }

/* Al volver a la portada desde otra sección se vuelve a reproducir. */
.hero.replegar .hero-eyebrow,
.hero.replegar .hero-title,
.hero.replegar .hero-copy,
.hero.replegar .hero-actions,
.hero.replegar .hero-signature { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-title, .hero-copy, .hero-actions, .hero-signature {
    animation: none;
    opacity: 1;
    clip-path: none;
    transform: none;
  }
  .hero.replegar .hero-eyebrow,
  .hero.replegar .hero-title,
  .hero.replegar .hero-copy,
  .hero.replegar .hero-actions,
  .hero.replegar .hero-signature { opacity: 1; }
}

/* Botón de subir logo: sólido y con icono, antes pasaba desapercibido */
.btn-subir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.btn-subir svg { width: 15px; height: 15px; flex-shrink: 0; }

/* El recuadro de vista previa es la zona donde la gente hace clic primero */
.config-logo-preview {
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.config-logo-preview:hover {
  border-color: var(--pompeii);
  border-style: solid;
  background: color-mix(in srgb, var(--pompeii) 6%, var(--marble));
}

.config-logo-preview:focus-visible {
  outline: 2px solid var(--pompeii);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) { .config-logo-preview { transition: none; } }

/* Visor 3D dentro del lienzo del estimador */
.visor-3d {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 320px;
  border-radius: var(--radius);
  overflow: hidden;
}

.visor-3d[hidden] { display: none; }
.visor-3d dental-mouth-viewer { display: block; width: 100%; height: 100%; }

.visor-3d-estado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.visor-3d-estado.error { color: var(--pompeii); }

.visor-3d-aviso {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--obsidian);
  color: var(--marble);
  font-size: 12.5px;
  white-space: nowrap;
  animation: aparecer 0.2s ease both;
}

.visor-3d-aviso[hidden] { display: none; }

.tab-3d::after {
  content: '3D';
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--pompeii);
  color: var(--marble);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) { .visor-3d-aviso { animation: none; } }

/* Controles del visor 3D: capas y corte */
.visor-controles {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
}

.visor-controles[hidden] { display: none; }

.visor-controles-titulo {
  display: block;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.visor-capas-lista { display: flex; flex-wrap: wrap; gap: 6px; }

.visor-capa {
  padding: 7px 11px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: var(--marble);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.visor-capa:hover { border-color: var(--pompeii); }

.visor-capa.activa {
  background: var(--pompeii);
  border-color: var(--pompeii);
  color: var(--marble);
}

.visor-corte { display: grid; gap: 8px; }
.visor-corte button[disabled] { opacity: 0.45; cursor: not-allowed; }

.visor-corte-slider {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  color: var(--ink-muted);
}

.visor-corte-slider[hidden] { display: none; }
.visor-corte-slider input { width: 180px; accent-color: var(--pompeii); }

@media (max-width: 720px) {
  .visor-controles { flex-direction: column; gap: 14px; }
  .visor-corte-slider input { width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .visor-capa { transition: none; } }

/* Selector de capa dentro del panel de asignación */
.capa-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 7px;
  margin: 12px 0 16px;
}

.capa-btn {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  text-align: left;
  border: 1px solid var(--stone-line);
  border-left: 3px solid var(--stone-line);
  border-radius: var(--radius);
  background: var(--marble);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.capa-btn:hover { border-color: var(--pompeii); }

.capa-btn.activa {
  border-color: var(--pompeii);
  background: color-mix(in srgb, var(--pompeii) 8%, var(--marble));
}

/* Con afección asignada, el borde toma el color del procedimiento */
.capa-btn.asignada { border-left-color: var(--proc-color); }

.capa-btn-nombre { font-size: 12.5px; font-weight: 600; color: var(--ink); }

.capa-btn-proc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--proc-color, var(--ink-muted));
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) { .capa-btn { transition: none; } }

/* Fondo del visor: puntos unidos por líneas difusas, en la línea del hero.
   Va detrás del lienzo 3D, que es transparente. */
.canvas-wrap { position: relative; background: var(--obsidian); }

.visor-malla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    /* líneas diagonales tenues que unen los puntos */
    repeating-linear-gradient(60deg,
      color-mix(in srgb, var(--gold-leaf) 9%, transparent) 0 1px,
      transparent 1px 58px),
    repeating-linear-gradient(-60deg,
      color-mix(in srgb, var(--gold-leaf) 7%, transparent) 0 1px,
      transparent 1px 58px),
    /* los puntos, en las intersecciones */
    radial-gradient(color-mix(in srgb, var(--gold-leaf) 42%, transparent) 1.5px, transparent 1.6px);
  background-size: 58px 100px, 58px 100px, 58px 100px;
  background-position: 0 0, 0 0, 14px 26px;
  /* difuminado hacia los bordes para que no se note el patrón cortado */
  mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, black 25%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 50% 45%, black 25%, transparent 88%);
  opacity: 0.55;
}

.visor-3d { position: relative; z-index: 1; background: transparent; }

/* Volver al modelo: es la salida del diente abierto, conviene que destaque */
#visor-abrir { white-space: nowrap; }
#visor-abrir.btn-solid { box-shadow: 0 4px 14px color-mix(in srgb, var(--pompeii) 35%, transparent); }

/* Capas marcadas para recibir la afección */
.capa-chip {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pompeii) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pompeii) 35%, transparent);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pompeii);
}

/* La ficha en pantallas estrechas: una columna, y la tarjeta del paciente
   con el boton debajo en vez de apretado contra el nombre. */
@media (max-width: 560px) {
  .ficha-grid { grid-template-columns: 1fr; }
  .ficha-dato { flex-direction: column; gap: 2px; }
  .ficha-dato-label { flex: none; }
  .patient-card { flex-wrap: wrap; }
  .ficha-abrir-btn { width: 100%; margin-top: 4px; }
  .historial-resumen { display: none; }
}

/* ---------------------------------------------------------------
   Remates de interfaz
   --------------------------------------------------------------- */

/* Red de seguridad. El ancho de verdad lo lleva --vw (ver el hero); esto
   solo evita que un descuido futuro vuelva a mover el sitio de lado. Es
   `clip` y no `hidden` porque `hidden` crearía un contenedor de
   desplazamiento y la cabecera pegajosa dejaría de pegarse. */
html { overflow-x: clip; }

/* La tira de navegación en móvil se desliza en horizontal y le habíamos
   escondido la barra, así que el último enlace parecía texto roto en vez
   de contenido que continúa. El degradado del borde lo delata. */
.nav-links.hay-mas {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 38px), transparent);
}

@media (max-width: 720px) {
  /* Los conmutadores de capa quedaban en 31px de alto: se dejan en 36,
     que ya se pulsa con el pulgar sin apuntar. */
  .visor-capa { min-height: 36px; }
}

/* Agenda llena: el mensaje anterior era una sola línea sin salida, y es lo
   primero que ve un paciente cuando no hay cupos. */
.dias-vacio {
  padding: 20px 18px;
  border: 1px dashed var(--stone-line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.dias-vacio-titulo {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.dias-vacio .assign-hint { margin: 0 0 12px; }

/* Logo sin transparencia: se enseña la imagen en vez de teñirla. La máscara
   solo puede recortar por el canal alfa, y una foto no tiene ninguno. */
.motivo-logo-img {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}

/* ---------------------------------------------------------------
   Fotos de la clínica
   --------------------------------------------------------------- */

/* En el panel del dueño: miniaturas con su pie y su aspa para quitar. */
.config-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.config-foto {
  position: relative;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

.config-foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.config-foto-quitar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(21, 18, 14, 0.72);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.config-foto-quitar:hover { background: var(--pompeii); }

.config-foto-pie {
  width: 100%;
  border: none;
  border-top: 1px solid var(--stone-line);
  padding: 7px 9px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
  background: var(--surface);
}

.config-foto-pie:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: -2px; }

.config-foto-añadir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--stone-line);
  border-radius: 10px;
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.config-foto-añadir:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.config-foto-añadir svg { width: 20px; height: 20px; }

/* En la página pública: la rejilla de «Conócenos». */
.photo-grid[hidden] { display: none; }

.photo-item {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--stone-line);
}

.photo-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-item figcaption {
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
}

@media (max-width: 560px) {
  .config-fotos { grid-template-columns: repeat(2, 1fr); }
}

/* Variante del logo: original, sin fondo, o solo la forma. */
.config-recorte {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--stone-line);
  border-radius: 999px;
  background: var(--surface);
}

.config-recorte[hidden] { display: none; }

.config-recorte-op {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.config-recorte-op:hover:not(:disabled):not(.activa) { color: var(--ink); }
.config-recorte-op.activa { background: var(--bronze); color: #fff; }
.config-recorte-op:disabled { opacity: 0.4; cursor: default; }
.config-recorte-op:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }

/* Tablero de ajedrez tras la vista previa: sin él, un logo recortado sobre
   fondo blanco parece que sigue teniendo su recuadro. */
.config-logo-preview {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%),
    linear-gradient(45deg, #e6e6e6 25%, transparent 25%, transparent 75%, #e6e6e6 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}

/* ---------------------------------------------------------------
   Visor de fotos
   --------------------------------------------------------------- */

/* La foto de la rejilla es un botón: se abre con el ratón y con Intro. */
.photo-abrir {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}

.photo-abrir img { transition: transform 0.28s ease; }
.photo-abrir:hover img { transform: scale(1.04); }
.photo-abrir:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }

.visor-fotos {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px 56px;
  background: rgba(12, 10, 8, 0.92);
  backdrop-filter: blur(4px);
  animation: fadeInUp 0.18s ease both;
}

.visor-fotos[hidden] { display: none; }

.visor-fotos-marco {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.visor-fotos-marco img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}

.visor-fotos-pie {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #ece7df;
  text-align: center;
}

.visor-fotos-pie[hidden] { display: none; }

.visor-fotos-cerrar {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.visor-fotos-flecha {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.visor-fotos-flecha[hidden] { display: none; }
.visor-fotos-flecha svg { width: 22px; height: 22px; }

.visor-fotos-cerrar:hover,
.visor-fotos-flecha:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.55); }
.visor-fotos-cerrar:focus-visible,
.visor-fotos-flecha:focus-visible { outline: 2px solid var(--gold-leaf); outline-offset: 2px; }

.visor-fotos-cuenta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 560px) {
  /* En el móvil las flechas se apartan a los lados de abajo para no comerse
     el ancho de la foto. */
  .visor-fotos { padding: 16px 10px 76px; }
  .visor-fotos-flecha { position: absolute; bottom: 14px; }
  .visor-fotos-flecha.antes { left: 18px; }
  .visor-fotos-flecha.despues { right: 18px; }
  .visor-fotos-cuenta { bottom: 28px; }
  .visor-fotos-marco img { max-height: calc(100vh - 170px); }
}

@media (prefers-reduced-motion: reduce) {
  .visor-fotos { animation: none; }
  .photo-abrir img, .photo-abrir:hover img { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------
   Cobro dentro de la aplicación: el panel que se abre bajo los planes
   cuando el dueño elige uno, y el formulario de datos de cobro de la
   consola. Heredan colores de las variables ya definidas arriba.
   --------------------------------------------------------------------- */
.susc-pago {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid var(--stone-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.susc-pago-titulo {
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 15px;
}

.susc-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 12px 0;
}

.susc-datos div { display: flex; flex-direction: column; gap: 2px; }
.susc-datos span { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.susc-datos strong { font-size: 14.5px; font-weight: 600; word-break: break-all; }

.consola-titulo-seccion { font-size: 20px; margin: 30px 0 4px; }

.cobro-form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }

.cobro-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.cobro-campo { display: flex; flex-direction: column; gap: 4px; }
.cobro-campo span { font-size: 12px; color: var(--ink-muted); }
.cobro-campo input {
  padding: 9px 11px;
  border: 1px solid var(--stone-line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: var(--surface);
  color: inherit;
}
.cobro-campo input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }
.cobro-enlaces .cobro-campo input { font-size: 12.5px; }