/* Panel del consultorio — mismo estilo que el Dashboard Nubi (colores de la web de Nubecall) */

/* ================= 1. Variables ================= */
:root {
  --bg: #061e33;
  --lateral: #071a2c;
  --panel: #0c2d47;
  --accent: #69dafa;
  --text: #f2fbff;
  --muted: #93b1c6;
  --line: #1c3a52;
  --hover: color-mix(in srgb, var(--accent) 6%, transparent);
  --sel: color-mix(in srgb, var(--accent) 12%, transparent);
  --radio: 12px;
  --suave: cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* ================= 0. Temas: oscuro / claro y fondos =================
   Todo el panel usa estas variables. <html data-tema="oscuro|claro" data-fondo="azul|grafito|verde|degrade">
   lo pone app.js (y un script chiquito en el <head> para que no "parpadee" al cargar). */
:root {
  --tinta: #ffffff;          /* con transparencia: rellenos y separadores suaves */
  --ok: #5fe3a1;
  --mal: #ff8b98;
  --error: #ff7a8a;
  --alerta: #ffb86b;
  --aviso: #ffd279;
  --aviso-texto: #ffe2a6;
  --elevado: #0f2c45;        /* ventanas */
  --elevado-2: #123a5a;      /* avisos y tooltips */
  --panel-hover: #0f3452;
  --sobre-acento: #061e33;   /* texto arriba del botón celeste */
  --sombra-fuerte: #000000aa;
  --texto-suave: #cfe3f0;
  --esquema: dark;
  --fondo-imagen: none;
  color-scheme: dark;
}
:root[data-fondo="grafito"] {
  --bg: #15181c; --lateral: #101215; --panel: #1d2126; --line: #2c3139;
  --elevado: #23282e; --elevado-2: #2a3038; --panel-hover: #242a31; --muted: #9aa5b0; --text: #f3f5f7;
}
:root[data-fondo="verde"] {
  --bg: #04211f; --lateral: #031a18; --panel: #0a302d; --line: #18433f;
  --elevado: #0d3632; --elevado-2: #11403b; --panel-hover: #0e3935; --muted: #8fbab3; --accent: #5fe0c8;
}
:root[data-fondo="degrade"] {
  --fondo-imagen: radial-gradient(1200px 700px at 85% -10%, #134a73 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #0b4a4a 0%, transparent 55%);
}

/* Modo claro */
:root[data-tema="claro"] {
  --bg: #eef3f7; --lateral: #ffffff; --panel: #ffffff; --line: #dbe4ec;
  --accent: #0974a0; --text: #10283b; --muted: #5a6f81;
  --tinta: #0b2236;
  --ok: #138353; --mal: #c8384a; --error: #c8384a; --alerta: #b35f0c;
  --aviso: #e0a100; --aviso-texto: #7a5200;
  --elevado: #ffffff; --elevado-2: #ffffff; --panel-hover: #f2f8fc;
  --sobre-acento: #ffffff; --sombra-fuerte: #0f22333d; --texto-suave: #2e4456;
  --esquema: light;
  color-scheme: light;
}
:root[data-tema="claro"][data-fondo="grafito"] { --bg: #f0f1f3; --line: #dfe2e6; --accent: #2f6fb0; --panel-hover: #f4f5f7; --muted: #5f6873; --text: #1c2229; }
:root[data-tema="claro"][data-fondo="verde"] { --bg: #ebf5f2; --line: #d5e8e2; --accent: #0b7968; --panel-hover: #f0f8f5; --muted: #557069; --text: #12302b; }
:root[data-tema="claro"][data-fondo="degrade"] {
  --fondo-imagen: radial-gradient(1100px 650px at 85% -10%, #cfe9f7 0%, transparent 60%), radial-gradient(900px 600px at -10% 110%, #d6f1ea 0%, transparent 55%);
}
:root[data-tema="claro"] .panel, :root[data-tema="claro"] .kpi, :root[data-tema="claro"] .col-pro, :root[data-tema="claro"] .pro-tarjeta { box-shadow: 0 1px 2px #0f22330f, 0 0 0 1px var(--line); }
:root[data-tema="claro"] .avatar { color: #ffffff; }

/* Fondos con imagen (carpeta fondos/): una versión para oscuro y otra para claro.
   Arriba de la imagen va una capa del color del tema ("--velo") para que los textos se lean bien. */
:root[data-fondo^="img-"] { --velo: color-mix(in srgb, #03111f 40%, transparent); }
:root[data-tema="claro"][data-fondo^="img-"] { --velo: color-mix(in srgb, #ffffff 30%, transparent); }
:root[data-fondo="img-ondas"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/ondas-oscuro.jpg"); }
:root[data-fondo="img-aurora"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/aurora-oscuro.jpg"); --accent: #b49cff; }
:root[data-fondo="img-red"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/red-oscuro.jpg"); }
:root[data-fondo="img-paisaje"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/paisaje-oscuro.jpg"); --accent: #ffb38a; }
:root[data-tema="claro"][data-fondo="img-ondas"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/ondas-claro.jpg"); }
:root[data-tema="claro"][data-fondo="img-aurora"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/aurora-claro.jpg"); --accent: #6d4fd1; }
:root[data-tema="claro"][data-fondo="img-red"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/red-claro.jpg"); }
:root[data-tema="claro"][data-fondo="img-paisaje"] { --fondo-imagen: linear-gradient(var(--velo), var(--velo)), url("fondos/paisaje-claro.jpg"); --accent: #2b739e; }
/* Con imagen o degradé, el menú y los paneles dejan ver un poquito el fondo */
:root[data-fondo^="img-"] .lateral, :root[data-fondo="degrade"] .lateral { background: color-mix(in srgb, var(--lateral) 78%, transparent); }
:root[data-fondo^="img-"] .panel, :root[data-fondo^="img-"] .kpi, :root[data-fondo^="img-"] .col-pro { background-color: color-mix(in srgb, var(--panel) 93%, transparent); }

/* Color de énfasis elegido (pisa el del fondo). Un tono para oscuro y otro para claro. */
:root:not([data-tema="claro"])[data-acento="celeste"] { --accent: #69dafa; }
:root:not([data-tema="claro"])[data-acento="azul"] { --accent: #6aa8ff; }
:root:not([data-tema="claro"])[data-acento="verde"] { --accent: #5fe0c8; }
:root:not([data-tema="claro"])[data-acento="violeta"] { --accent: #b49cff; }
:root:not([data-tema="claro"])[data-acento="coral"] { --accent: #ff9a8b; }
:root:not([data-tema="claro"])[data-acento="ambar"] { --accent: #ffc46b; }
:root[data-tema="claro"][data-acento="celeste"] { --accent: #0974a0; }
:root[data-tema="claro"][data-acento="azul"] { --accent: #296ad2; }
:root[data-tema="claro"][data-acento="verde"] { --accent: #0b7968; }
:root[data-tema="claro"][data-acento="violeta"] { --accent: #6d4fd1; }
:root[data-tema="claro"][data-acento="coral"] { --accent: #c43e2c; }
:root[data-tema="claro"][data-acento="ambar"] { --accent: #9a5e09; }

/* ---------- Botón principal (--cta): el color complementario del énfasis ----------
   Regla 60-30-10 (diseño de interiores): 60 % fondo, 30 % paneles, 10 % color.
   El botón es el "toque" opuesto que llama la atención. Contrastes verificados ≥ 4.5:1. */
:root { --cta: #ff8a6b; --sobre-cta: #2a0d05; --logo-2: #2fd3a7; }                         /* coral */
:root[data-tema="claro"] { --cta: #cc4925; --sobre-cta: #ffffff; --logo-2: #12a07f; }
/* Grafito y Constelación: gris/azul profundo + ámbar */
:root:not([data-tema="claro"])[data-fondo="grafito"], :root:not([data-tema="claro"])[data-fondo="img-red"] { --cta: #ffbd59; --sobre-cta: #2b1800; }
:root[data-tema="claro"][data-fondo="grafito"], :root[data-tema="claro"][data-fondo="img-red"] { --cta: #ab6300; --sobre-cta: #ffffff; }
/* Aurora: violeta + dorado */
:root:not([data-tema="claro"])[data-fondo="img-aurora"] { --cta: #ffd166; --sobre-cta: #2b2100; }
:root[data-tema="claro"][data-fondo="img-aurora"] { --cta: #966d00; --sobre-cta: #ffffff; }
/* Lago: cielo + durazno del atardecer */
:root:not([data-tema="claro"])[data-fondo="img-paisaje"] { --accent: #8fc1ff; --cta: #ffa47a; --sobre-cta: #2a0d05; }

/* Si la persona elige un color de énfasis, el botón usa su pareja complementaria */
:root:not([data-tema="claro"])[data-acento="celeste"], :root:not([data-tema="claro"])[data-acento="verde"] { --cta: #ff8a6b; --sobre-cta: #2a0d05; }
:root:not([data-tema="claro"])[data-acento="azul"] { --cta: #ffbd59; --sobre-cta: #2b1800; }
:root:not([data-tema="claro"])[data-acento="violeta"] { --cta: #ffd166; --sobre-cta: #2b2100; }
:root:not([data-tema="claro"])[data-acento="coral"] { --cta: #4fe0b6; --sobre-cta: #03241a; }
:root:not([data-tema="claro"])[data-acento="ambar"] { --cta: #7aa7ff; --sobre-cta: #071a3d; }
:root[data-tema="claro"][data-acento="celeste"], :root[data-tema="claro"][data-acento="verde"] { --cta: #cc4925; --sobre-cta: #ffffff; }
:root[data-tema="claro"][data-acento="azul"] { --cta: #ab6300; --sobre-cta: #ffffff; }
:root[data-tema="claro"][data-acento="violeta"] { --cta: #966d00; --sobre-cta: #ffffff; }
:root[data-tema="claro"][data-acento="coral"] { --cta: #0e8365; --sobre-cta: #ffffff; }
:root[data-tema="claro"][data-acento="ambar"] { --cta: #2f62d6; --sobre-cta: #ffffff; }

/* Tamaño del texto: agranda todo el panel (el alto se compensa para que no aparezca scroll) */
:root { --zoom: 1; }
:root[data-letra="grande"] { --zoom: 1.1; }
:root[data-letra="mayor"] { --zoom: 1.2; }
body { zoom: var(--zoom); }

/* Densidad compacta: menos espacios, más turnos por pantalla */
:root[data-densidad="compacta"] .contenido { padding: 18px 28px 40px; }
:root[data-densidad="compacta"] .cabecera { margin-bottom: 16px; padding-bottom: 14px; }
:root[data-densidad="compacta"] .cabecera h1 { font-size: 22px; }
:root[data-densidad="compacta"] .kpis { gap: 8px; margin-bottom: 10px; }
:root[data-densidad="compacta"] .kpi { padding: 12px 16px; }
:root[data-densidad="compacta"] .kpi strong { font-size: 24px; }
:root[data-densidad="compacta"] .panel { padding: 14px 16px; }
:root[data-densidad="compacta"] .panel-tabla { padding: 4px 8px 6px; }
:root[data-densidad="compacta"] .turno, :root[data-densidad="compacta"] .fila-cabeza { padding-top: 6px; padding-bottom: 6px; }
:root[data-densidad="compacta"] .libre { padding-top: 5px; padding-bottom: 5px; }
:root[data-densidad="compacta"] .cal-dia { min-height: 74px; }
:root[data-densidad="compacta"] .nav-item { height: 34px; }
:root[data-densidad="compacta"] .seccion { margin-bottom: 7px; }
:root[data-densidad="compacta"] .hoy-layout, :root[data-densidad="compacta"] .cal-layout, :root[data-densidad="compacta"] .pac-layout { gap: 10px; }

/* Animaciones reducidas (o si la compu lo pide) */
:root[data-movimiento="reducido"] *, :root[data-movimiento="reducido"] *::before, :root[data-movimiento="reducido"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}



* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 20%, transparent) transparent; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--fondo-imagen);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Manrope', sans-serif; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.app { display: flex; height: calc(100vh / var(--zoom)); height: calc(100dvh / var(--zoom)); }

/* ================= 2. Menú lateral ================= */
.lateral {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--lateral);
  overflow: hidden;
  white-space: nowrap;
  transition: flex-basis 0.35s var(--suave);
}

.marca { display: flex; align-items: center; gap: 11px; padding: 0 5px 26px; }
.marca-icono { flex: 0 0 38px; width: 38px; height: 38px; }
.marca-texto { min-width: 0; }
.marca-texto strong { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.2; }
.marca-texto span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.nav-item svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav-item:hover { color: var(--text); }
.nav-item.activo { color: var(--accent); background: var(--sel); }

.cuenta { display: flex; align-items: center; gap: 10px; padding: 12px 7px 0; border-top: 1px solid var(--line); }
.cuenta strong { display: block; font-weight: 500; font-size: 13px; }
.cuenta small { color: var(--muted); font-size: 12px; }
.avatar {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #2f8fd8);
  color: var(--sobre-acento);
  font-weight: 700;
  font-size: 13px;
}

/* Botón para plegar el menú: va abajo, arriba de la cuenta */
.plegar { margin-top: auto; margin-bottom: 8px; }
.plegar .flecha { transition: transform 0.35s var(--suave); transform-origin: 14.5px 12px; }

/* Menú plegado: queda una columna angosta con los íconos centrados */
.nav-item { padding: 0 14.5px; }
.nav-item span, .marca-texto, .cuenta > div { transition: opacity 0.2s; }
.menu-plegado .lateral { flex-basis: 76px; }
.menu-plegado .nav-item span, .menu-plegado .marca-texto, .menu-plegado .cuenta > div { opacity: 0; pointer-events: none; }
.menu-plegado .plegar .flecha { transform: scaleX(-1); }

/* ================= 3. Contenido ================= */
.contenido { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 40px 60px; }

.cartel-maqueta {
  padding: 5px 12px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--aviso) 10%, transparent);
  color: var(--aviso-texto);
  font-size: 12px;
  white-space: nowrap;
}

/* Encabezado de cada pantalla: título a la izquierda, acciones a la derecha, línea abajo */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.cabecera h1 { font-size: 26px; letter-spacing: -0.5px; line-height: 1.2; }
.cabecera p { margin: 4px 0 0; color: var(--muted); }
.cabecera-acciones { display: flex; align-items: center; gap: 12px; }

/* Título chico de cada bloque ("RESUMEN DEL DÍA", "TURNOS DE HOY"…) */
.seccion {
  margin: 0 0 10px 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.seccion-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; margin-bottom: 10px; }
.seccion-fila .seccion { margin-bottom: 0; }

.panel { padding: 20px 22px; border-radius: var(--radio); background: var(--panel); }
.panel-tabla { padding: 8px 10px 10px; }

/* Botones */
.btn, .btn-sec {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, filter 0.2s;
}
.btn { background: var(--accent); color: var(--sobre-acento); }
.btn:hover { filter: brightness(1.08); }
.btn-sec { background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--text); }
.btn-sec:hover { background: color-mix(in srgb, var(--tinta) 12%, transparent); }
.btn-sec.peligro { color: var(--mal); }
.btn svg, .btn-sec svg { width: 15px; height: 15px; }
.btn-chico { height: 30px; padding: 0 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

.icono-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.icono-btn:hover { background: var(--hover); color: var(--accent); }
.icono-btn svg { width: 18px; height: 18px; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  color: var(--c, var(--accent));
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

/* ================= 4. Hoy ================= */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.kpi { min-width: 0; padding: 18px 20px; border-radius: var(--radio); background: var(--panel); }
.kpi strong { display: block; font-family: 'Manrope', sans-serif; font-size: 30px; font-weight: 500; letter-spacing: -1px; line-height: 1.15; }
.kpi span { font-size: 12px; color: var(--muted); }

.hoy-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; align-items: start; }

/* Tarjeta del próximo paciente */
.proximo {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 20%, var(--panel)), var(--panel) 60%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.proximo-hora { display: inline-block; font-family: 'Manrope', sans-serif; font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; }
.proximo-falta { margin-left: 10px; color: var(--muted); font-size: 13px; }
.proximo-nombre { margin-top: 14px; font-size: 20px; }
.proximo-servicio { margin: 4px 0 0; color: var(--muted); }
.proximo-ind { margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--aviso) 10%, transparent); color: var(--aviso-texto); font-size: 13px; }
.proximo-hist { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.proximo-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.proximo-vacio { margin: 4px 0; color: var(--muted); }

/* Tabla de turnos (Hoy y panel del día en Agenda)
   Columnas: Hora · Paciente · Servicio · Origen · Estado */
.tabla { margin: 0; padding: 0; list-style: none; }
.tabla > li { border-radius: 9px; }

.fila-cabeza, .turno {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1fr) 76px 104px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.fila-cabeza {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  border-radius: 0 !important;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.turno { cursor: pointer; transition: background 0.15s; }
.turno + .turno { box-shadow: 0 -1px 0 color-mix(in srgb, var(--tinta) 4%, transparent); }
.turno:hover, .turno:focus-visible { background: var(--hover); outline: none; }

.col-hora { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.fila-cabeza .col-hora { font-family: inherit; font-size: inherit; font-weight: inherit; }
.col-paciente, .col-servicio { min-width: 0; }
.col-paciente strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-paciente small { display: block; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-paciente .sub-ind { color: color-mix(in srgb, var(--aviso-texto) 70%, transparent); }
.col-paciente .sub-servicio { display: none; }
.turno .col-servicio { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turno .col-origen { color: var(--muted); font-size: 13px; }
.turno .col-origen.valeria { color: var(--text); }
.col-estado { text-align: right; }

.turno.cancelado { opacity: 0.5; }
.turno.cancelado .col-paciente strong { text-decoration: line-through; }

/* Tabla compacta (panel del día y celular): Hora · Paciente (con servicio abajo) · Estado */
.compacta .fila-cabeza, .compacta .turno { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
.compacta .col-servicio, .compacta .col-origen, .compacta .sub-ind { display: none; }
.compacta .col-paciente .sub-servicio { display: block; }

.libre {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 8px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.libre .col-hora { font-weight: 500; }
.libre-texto { font-size: 13px; }
.libre-mas { font-size: 12.5px; color: var(--accent); opacity: 0; transition: opacity 0.15s; }
.libre:hover, .libre:focus-visible { background: var(--hover); color: var(--text); outline: none; }
.libre:hover .libre-mas, .libre:focus-visible .libre-mas { opacity: 1; }

.ahora {
  position: relative;
  margin: 6px 0;
  padding-left: 66px;
  color: var(--error);
  font-size: 11.5px;
  font-weight: 700;
}
.ahora::before { content: ''; position: absolute; left: 12px; right: 0; top: 50%; height: 1px; background: color-mix(in srgb, var(--error) 40%, transparent); }
.ahora::after { content: ''; position: absolute; left: 10px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--error); }
.ahora span { position: relative; padding: 0 8px; background: var(--panel); }

.vacia { padding: 20px 12px; color: var(--muted); }

/* ================= 5. Agenda (calendario estilo Dashboard Nubi) ================= */
.mes-nav { display: flex; align-items: center; gap: 6px; }
.mes-nav strong { min-width: 150px; text-align: center; font-family: 'Manrope', sans-serif; font-size: 15px; }
.mes-nav .btn-sec { margin-left: 8px; height: 30px; }

.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; align-items: start; }

.cal-mes { padding: 14px; }
.cal-dias-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); text-align: right; }
.cal-dias-semana span { padding-right: 8px; }

.cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }

.cal-dia {
  min-width: 0;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 7px 8px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tinta) 2%, transparent);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.cal-dia:hover { background: var(--hover); }
.cal-dia.otro-mes { opacity: 0.35; }
.cal-dia.sel { background: var(--sel); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.cal-dia.sin-atencion { background: transparent; }
.cal-dia.bloqueado { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--error) 8%, transparent) 0 6px, transparent 6px 12px); }

.cal-num { display: block; text-align: right; font-size: 13px; margin-bottom: auto; }
.cal-dia.hoy .cal-num span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--sobre-acento); font-weight: 700; }

.cal-cant { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cal-cant b { font-family: 'Manrope', sans-serif; font-size: 15px; color: var(--text); }

/* Barra de ocupación del día */
.cal-ocupacion { position: relative; display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: color-mix(in srgb, var(--tinta) 7%, transparent); overflow: hidden; }
.cal-ocupacion::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--accent); }

.cal-libre { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cal-bloq { margin-top: 8px; font-size: 11.5px; color: var(--mal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-layout { transition: grid-template-columns 0.35s var(--suave); }
.cal-layout.sin-panel { grid-template-columns: minmax(0, 1fr) 0; gap: 0; }
.cal-layout.sin-panel .cal-dia-col { visibility: hidden; }
.cal-dia-col { min-width: 0; }

/* Botón del panel: resaltado cuando el panel está visible */
.mes-nav .panel-toggle { margin-left: 4px; }
.panel-toggle .relleno { opacity: 0; transition: opacity 0.2s; }
.panel-toggle[aria-pressed="true"] { color: var(--accent); }
.panel-toggle[aria-pressed="true"] .relleno { opacity: 0.35; }

/* Con el panel oculto, cada día muestra sus primeros turnos */
.cal-lista { display: none; }
.sin-panel .cal-dia { min-height: 118px; }
.sin-panel .cal-lista { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; }
.cal-item {
  padding: 1px 6px;
  border-left: 2px solid var(--c);
  border-radius: 4px;
  background: color-mix(in srgb, var(--tinta) 3%, transparent);
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-item b { font-weight: 700; color: var(--text); }
.cal-mas { padding-left: 8px; font-size: 11px; color: var(--muted); }
.sin-panel .cal-num { margin-bottom: 0; }

.cal-dia-col { position: sticky; top: 0; }
.cal-dia-panel { max-height: calc(100dvh - 120px); overflow-y: auto; }
.cal-dia-col .seccion { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= 5b. Pacientes (lista + ficha) ================= */
.pac-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 14px; align-items: start; }

.pac-herramientas { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.buscador {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  transition: border-color 0.2s;
}
.buscador:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.buscador svg { width: 17px; height: 17px; flex: 0 0 17px; }
.buscador input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); outline: none; }
.buscador input::placeholder { color: var(--muted); }

/* Filtros tipo "pastillas" */
.filtros { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--panel); }
.filtros button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.filtros button:hover { color: var(--text); }
.filtros button[aria-pressed="true"] { background: var(--sel); color: var(--accent); }

/* Tabla de pacientes: Paciente · Teléfono · Última consulta · Próximo turno */
.tabla .fila-pac { grid-template-columns: minmax(0, 1fr) 146px 112px 140px; }
/* En notebooks el teléfono se ve solo en la ficha, así el nombre entra completo */
@media (max-width: 1500px) {
  .tabla .fila-pac { grid-template-columns: minmax(0, 1fr) 112px 140px; }
  .fila-pac .col-tel { display: none; }
}
.fila-pac.sel { background: var(--sel); }
.fila-pac .col-tel, .fila-pac .col-fecha { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-pac .col-prox { text-align: right; }
.fila-pac .col-prox .chip { font-variant-numeric: tabular-nums; }

.pac-nombre { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pac-txt { min-width: 0; }
.mini-avatar {
  flex: 0 0 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
}

/* Encabezados que ordenan la tabla */
.orden {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}
.orden:hover, .orden.activo { color: var(--text); }
.orden.col-prox { text-align: right; }
.flecha-orden { color: var(--accent); }

/* Ficha del paciente */
.ficha { position: sticky; top: 0; max-height: calc(100dvh - 56px); overflow-y: auto; padding: 22px; }
.ficha-vacia { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 50px 10px; text-align: center; color: var(--muted); }
.ficha-vacia svg { width: 40px; height: 40px; margin-bottom: 8px; color: var(--accent); opacity: 0.7; }
.ficha-vacia strong { color: var(--text); font-weight: 500; }

.ficha-cabeza { position: relative; display: flex; align-items: center; gap: 14px; padding-right: 30px; }
.ficha-cabeza .cerrar { top: -6px; right: -6px; }
.avatar-grande { flex: 0 0 52px; height: 52px; font-size: 17px; }
.ficha-titulo { min-width: 0; }
.ficha-titulo h3 { font-size: 19px; line-height: 1.25; }
.ficha-titulo p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.ficha-acciones { display: flex; gap: 8px; margin: 18px 0; }
.ficha-acciones .btn, .ficha-acciones .btn-sec { flex: 1; }

.ficha-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 22px; }
.ficha-num { min-width: 0; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.ficha-num strong { display: block; font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ficha-num span { font-size: 11.5px; color: var(--muted); }

.ficha h4.seccion { margin: 0 0 10px; }
.ficha h4.seccion small { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ficha-datos { margin: 0 0 22px; }
.ficha-nada { margin: 0 0 22px; color: var(--muted); font-size: 13px; }

.ficha-proximo {
  display: block;
  width: 100%;
  margin-bottom: 22px;
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.ficha-proximo:hover { background: color-mix(in srgb, var(--accent) 13%, transparent); }
.ficha-proximo strong { display: block; font-weight: 500; }
.ficha-proximo span { font-size: 12.5px; color: var(--muted); }

.historial { margin: 0; padding: 0; list-style: none; }
.historial li { padding: 10px 8px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.historial li + li { box-shadow: 0 -1px 0 color-mix(in srgb, var(--tinta) 4%, transparent); }
.historial li:hover, .historial li:focus-visible { background: var(--hover); outline: none; }
.hist-fila { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hist-fecha { font-size: 13px; font-variant-numeric: tabular-nums; }
.hist-serv { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-nota {
  margin: 6px 0 0 84px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--tinta) 12%, transparent);
  font-size: 12.5px;
  color: var(--texto-suave);
}

/* ================= 5c. Configuración ================= */
.conf-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: start; }

/* Pestañas a la izquierda */
.conf-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
.conf-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.conf-nav button svg { width: 18px; height: 18px; flex: 0 0 18px; }
.conf-nav button:hover { color: var(--text); background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.conf-nav button[aria-current] { color: var(--accent); background: var(--sel); }

.conf-contenido { min-width: 0; padding: 28px 30px 0; }
.conf-titulo { font-size: 20px; }
.conf-desc { margin: 6px 0 0; max-width: 640px; color: var(--muted); }
.conf-grupo { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.conf-grupo:first-of-type { border-top: 0; padding-top: 0; }
.conf-grupo > .seccion { margin-bottom: 14px; }
.conf-ayuda { display: block; margin: 5px 0 0; font-size: 12px; color: var(--muted); }
.campo .conf-ayuda { margin-top: 5px; }
.conf-contenido .campo { max-width: 640px; }
.conf-contenido .campo-fila { max-width: 640px; }

/* Pie con "Guardar cambios": sin cambios va al final de la sección;
   con cambios sin guardar (.sucio) se pega al borde de abajo de la pantalla.
   bottom negativo = el relleno de abajo de .contenido (60px), así llega justo al borde. */
.conf-pie {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 28px -30px 0;
  padding: 14px 30px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radio) var(--radio);
  background: var(--panel);
}
.conf-pie .btn:disabled { opacity: 0.4; cursor: default; filter: none; }
.conf-pie.sucio {
  position: sticky;
  bottom: -60px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--panel-hover);
  box-shadow: 0 -12px 30px var(--sombra-fuerte);
  animation: pie-sube 0.3s var(--suave);
}
@keyframes pie-sube { from { transform: translateY(12px); opacity: 0.6; } }
.sin-guardar { margin-right: auto; font-size: 13px; color: var(--aviso-texto); }
.sin-guardar::before { content: '●'; margin-right: 6px; font-size: 9px; vertical-align: 2px; }
.conf-contenido > :last-child:not(.conf-pie) { margin-bottom: 28px; }

/* Interruptor tipo iPhone */
input.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tinta) 15%, transparent);
  cursor: pointer;
  transition: background 0.2s;
}
input.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px color-mix(in srgb, #000 30%, transparent);
  transition: transform 0.25s var(--suave);
}
input.switch:checked { background: var(--accent); }
input.switch:checked::after { transform: translateX(16px); }
input.switch:disabled { opacity: 0.35; cursor: default; }
input.switch:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }

.switch-fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 640px; padding: 12px 0; cursor: pointer; }
.switch-fila + .switch-fila { border-top: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); }
.switch-fila.apagado { cursor: default; }
.switch-textos strong { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.switch-textos small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.chip-prox { --c: var(--aviso); height: 20px; font-size: 11px; }

.link-btn { padding: 4px 0; border: 0; background: none; color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer; }
.link-btn:hover { text-decoration: underline; }
.icono-btn.chico { width: 28px; height: 28px; font-size: 18px; line-height: 1; }

/* Logo */
.logo-fila { display: flex; align-items: center; gap: 18px; }
.logo-vista { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.logo-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.logo-botones .conf-ayuda { flex-basis: 100%; margin: 0; }

/* Horarios: una fila por día */
.dias-tabla { max-width: 640px; }
.dia-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 0; }
.dia-fila + .dia-fila { border-top: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); }
.dia-nombre { display: flex; align-items: center; gap: 12px; height: 38px; font-weight: 500; cursor: pointer; }
.dia-fila.cerrado .dia-nombre span { color: var(--muted); }
.franjas { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dia-cerrado { line-height: 38px; color: var(--muted); font-size: 13px; }
.franja { display: flex; align-items: center; gap: 8px; }
.franja input {
  width: 112px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
  color: var(--text);
  outline: none;
  color-scheme: var(--esquema);
  font-variant-numeric: tabular-nums;
}
.franja input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.franja-a { color: var(--muted); font-size: 13px; }

/* Resumen en vivo: "38 turnos por semana" */
.vista-previa {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin-top: 6px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), #2fd3a714);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}
.vista-previa > strong { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--accent); }
.vista-previa b { display: block; font-weight: 500; }
.vista-previa small { color: var(--muted); font-size: 12.5px; }

/* Servicios */
.serv-tabla { max-width: 720px; margin-bottom: 14px; }
.serv-fila { display: grid; grid-template-columns: minmax(0, 1fr) 104px 130px 52px 30px; align-items: center; gap: 10px; padding: 6px 0; }
.serv-cabeza { padding: 0 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.serv-fila input[type="text"], .serv-fila select, .precio {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
  color: var(--text);
  outline: none;
  color-scheme: var(--esquema);
}
.serv-fila select option { background: var(--elevado); }
.serv-fila input:focus, .serv-fila select:focus, .precio:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.precio { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.precio input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); outline: none; }
.serv-fila.inactivo input[type="text"], .serv-fila.inactivo select, .serv-fila.inactivo .precio { opacity: 0.45; }

/* Bloqueos y formularios en línea */
.bloq-form { display: grid; grid-template-columns: 160px 160px minmax(0, 1fr) auto; align-items: end; gap: 10px; max-width: 760px; }
.bloq-form .campo { margin-bottom: 0; }
.bloq-form .btn { height: 42px; }
.bloq-lista, .usuarios-lista { margin: 0; padding: 0; max-width: 720px; list-style: none; }
.bloq-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 2%, transparent); }
.bloq-lista li + li { margin-top: 6px; }
.bloq-fechas strong { display: block; font-weight: 500; }
.bloq-fechas small { color: var(--muted); font-size: 12.5px; }

/* Valeria */
.valeria-estado {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  margin-top: 22px;
  padding: 6px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ok) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 20%, transparent);
}
.valeria-estado .switch-fila { flex: 1; }
.valeria-estado.pausada { background: color-mix(in srgb, var(--alerta) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--alerta) 25%, transparent); }
.estado-punto { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); animation: latido 2s ease-in-out infinite; }
.pausada .estado-punto { background: var(--alerta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerta) 15%, transparent); animation: none; }
@keyframes latido { 50% { opacity: 0.45; } }
.valeria-estado input.switch:checked { background: var(--ok); }
.contador { float: right; margin-top: -18px; font-size: 11.5px; color: var(--muted); }

/* Puntito naranja en el menú cuando Valeria está en pausa */
.nav-item[data-vista="valeria"] { position: relative; }
.nav-item.pausada::after { content: ''; position: absolute; top: 8px; left: 28px; width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); box-shadow: 0 0 0 2px var(--lateral); }

/* Usuarios */
.usuarios-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto 112px; align-items: center; gap: 12px; padding: 12px 0; }
.usuarios-lista li + li { border-top: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); }
.usuario-txt strong { display: block; font-weight: 500; }
.usuario-txt small { color: var(--muted); font-size: 12.5px; }
.usuario-estado { font-size: 12.5px; color: var(--ok); }
.usuario-estado.pendiente { color: var(--aviso-texto); }
.usuario-vos { justify-self: end; font-size: 12.5px; color: var(--muted); }
.usuarios-lista .btn-sec { justify-self: end; }
.permisos { margin: 0; padding: 0; max-width: 640px; list-style: none; }
.permisos li { position: relative; padding: 5px 0 5px 26px; font-size: 13.5px; }
.permisos li::before { position: absolute; left: 0; font-weight: 700; }
.permisos li.si::before { content: '✓'; color: var(--ok); }
.permisos li.no { color: var(--muted); }
.permisos li.no::before { content: '✕'; color: var(--mal); }

/* Vista previa del mail (en claro, como lo vería el paciente) */
.mail { max-width: 520px; overflow: hidden; border-radius: 12px; background: #fff; color: #1d2b36; box-shadow: 0 10px 30px #0006; transition: opacity 0.2s, filter 0.2s; }
.mail.apagado { opacity: 0.35; filter: grayscale(1); }
.mail-cab { display: flex; flex-direction: column; gap: 2px; padding: 12px 18px; background: #eef3f7; border-bottom: 1px solid #dde6ee; }
.mail-cab small { font-size: 12px; color: #5b6b78; }
.mail-cab strong { margin-top: 4px; font-size: 14.5px; }
.mail-cuerpo { padding: 20px 22px 18px; font-size: 14px; }
.mail-logo { display: block; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 10px; object-fit: contain; }
.mail-cuerpo p { margin: 0 0 12px; }
.mail-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 14px; padding: 14px 16px; border-radius: 10px; background: #f3f8fb; }
.mail-datos dt { color: #5b6b78; }
.mail-datos dd { margin: 0; font-weight: 500; }
.mail-ind { margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: #fff6e0; }
.mail-ind strong { display: block; font-size: 12px; color: #9a6a00; }
.mail-pie { font-size: 12.5px; color: #5b6b78; }

/* ================= 5d. Valeria (llamadas) ================= */
.filtros-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.kpis-5 { grid-template-columns: repeat(5, 1fr); }

.estado-valeria {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--ok);
  font-weight: 500;
  cursor: pointer;
}
.estado-valeria::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: latido 2s ease-in-out infinite; }
.estado-valeria.pausada { background: color-mix(in srgb, var(--alerta) 12%, transparent); color: var(--alerta); }
.estado-valeria.pausada::before { animation: none; }

.tabla .fila-llamada { grid-template-columns: 70px minmax(0, 1fr) 136px 84px; }
.fila-llamada.sel { background: var(--sel); }
.col-cuando strong { display: block; font-family: 'Manrope', sans-serif; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.col-cuando small { display: block; font-size: 12px; color: var(--muted); }
.fila-llamada .col-dur { text-align: right; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.fila-cabeza.fila-llamada .col-dur { font-size: inherit; color: inherit; }
.fila-llamada .col-res { min-width: 0; }

.llamada-quien { margin-top: 8px; }
.seccion-espacio { margin-top: 22px !important; }
.llamada-resumen { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }

.grabacion { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.grab-play { flex: 0 0 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--sobre-acento); cursor: pointer; }
.grab-play svg { width: 16px; height: 16px; margin-left: 2px; }
.grab-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; }
.grab-onda i { flex: 1; min-height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.grab-dur { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Transcripción tipo chat */
.chat { display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; }
.burbuja small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--muted); }
.de-valeria { align-self: flex-start; border-bottom-left-radius: 4px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.de-valeria small { color: var(--accent); }
.de-paciente { align-self: flex-end; border-bottom-right-radius: 4px; background: color-mix(in srgb, var(--tinta) 6%, transparent); }
.chat-nota { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }

/* ================= 5e. Estadísticas ================= */
.kpi-etiqueta { display: block; margin-bottom: 4px; }
.kpi .kpi-delta { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.kpi-delta.bien { color: var(--ok); }
.kpi-delta.mal { color: var(--mal); }

.est-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.est-tarjeta { min-width: 0; padding: 18px 20px 20px; }
.est-tarjeta.ancha { grid-column: 1 / -1; }
.est-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.est-cab h3 { font-size: 14.5px; }
.est-cab-der { display: flex; align-items: center; gap: 16px; }
.leyenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.est-cuerpo { min-width: 0; }
.nota-grafico { margin: 8px 0 0; font-size: 12px; color: var(--muted); }

.est-svg { display: block; overflow: visible; }
.est-svg .grilla { stroke: color-mix(in srgb, var(--tinta) 7%, transparent); stroke-width: 1; }
.est-svg .eje { stroke: color-mix(in srgb, var(--tinta) 18%, transparent); stroke-width: 1; }
.est-svg .tick { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.est-svg .valor { fill: var(--text); font-size: 11.5px; font-weight: 700; }
.est-svg .col { transition: opacity 0.15s; }
.est-svg:hover .col:not(.activa) { opacity: 0.55; }
.est-svg .hit { cursor: default; outline: none; }

/* Mapa de calor */
.calor { display: grid; gap: 3px; align-items: center; }
.calor-hora { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.calor-dia { font-size: 11.5px; color: var(--muted); }
.calor-celda { height: 26px; border-radius: 4px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), transparent); outline: none; transition: transform 0.15s; }
.calor-celda:hover, .calor-celda:focus-visible { transform: scale(1.12); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px color-mix(in srgb, var(--tinta) 50%, transparent); }
.calor-celda.vacia { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 5%, transparent); }
.calor-escala { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11.5px; color: var(--muted); }
.calor-escala i { width: 18px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), transparent); }
.calor-escala span:first-child { margin-right: 4px; }
.calor-escala span:last-child { margin-left: 4px; }

/* Barras horizontales (servicios) */
.barras-h { display: flex; flex-direction: column; gap: 4px; }
.barra-h { display: grid; grid-template-columns: 140px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 7px 6px; border-radius: 8px; outline: none; }
.barra-h:hover, .barra-h:focus-visible { background: var(--hover); }
.barra-h-nombre { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h-riel { height: 12px; }
.barra-h-riel i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #1d9fd2; transform-origin: left; animation: llenar 0.6s var(--suave) both; }
.barra-h-valor { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes llenar { from { transform: scaleX(0); } }

/* Origen de los turnos */
.origen-grande { margin: 4px 0 14px; color: var(--muted); }
.origen-grande strong { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 700; letter-spacing: -1px; color: var(--text); }
.origen-barra { display: flex; gap: 2px; height: 14px; }
.origen-barra i { min-width: 4px; outline: none; }
.origen-barra i:first-child { border-radius: 4px 0 0 4px; }
.origen-barra i:last-child { border-radius: 0 4px 4px 0; }
.origen-barra i:only-child { border-radius: 4px; }
.origen-barra i:hover, .origen-barra i:focus-visible { filter: brightness(1.15); }
.origen-detalle { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: var(--muted); }

/* Pacientes con más ausencias */
.ausencias { margin: 0; padding: 0; list-style: none; }
.ausencias li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 8px; cursor: pointer; outline: none; }
.ausencias li + li { box-shadow: 0 -1px 0 color-mix(in srgb, var(--tinta) 4%, transparent); }
.ausencias li:hover, .ausencias li:focus-visible { background: var(--hover); }
.aus-txt strong { display: block; font-weight: 500; }
.aus-txt small { font-size: 12px; color: var(--muted); }
.aus-n { font-size: 12.5px; color: var(--alerta); }

/* Tabla (versión accesible de cada gráfico) */
.est-tabla-caja { max-height: 260px; overflow-y: auto; }
.est-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.est-tabla th { position: sticky; top: 0; padding: 6px 8px; background: var(--panel); text-align: left; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.est-tabla td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); font-variant-numeric: tabular-nums; }

/* Tooltip de los gráficos */
.est-tip {
  position: fixed;
  z-index: 60;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--elevado-2);
  box-shadow: 0 10px 30px var(--sombra-fuerte);
  pointer-events: none;
  font-size: 12.5px;
}
.est-tip small { display: block; margin-bottom: 4px; color: var(--muted); }
.tip-fila { display: flex; align-items: center; gap: 8px; }
.tip-fila i { width: 12px; height: 3px; border-radius: 2px; }
.tip-fila b { font-size: 14px; }
.tip-fila span { color: var(--muted); }

/* ================= 5f. Clínica: profesionales, roles y auditoría ================= */

/* "Ver como" (solo maqueta) */
.ver-como { display: block; margin: auto 0 10px; padding: 10px 10px 8px; border-radius: 10px; background: color-mix(in srgb, var(--aviso) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 15%, transparent); }
.ver-como span { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--aviso-texto); }
.ver-como select { width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--tinta) 7%, transparent); color: var(--text); font-size: 12.5px; color-scheme: var(--esquema); }
.ver-como select option { background: var(--elevado); }
.menu-plegado .ver-como { display: none; }
.plegar { margin-top: 0; }

/* Puntito de color + nombre del profesional */
.marca-pro { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.marca-pro i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.marca-pro.chico { font-size: 12px; color: var(--muted); }
.marca-pro.sub-pro { display: flex; margin-top: 1px; font-size: 12px; color: var(--muted); }
.compacta .marca-pro.sub-pro { display: flex; }
.tabla:not(.compacta) .turno.con-pro .sub-pro { display: flex; }
.punto-pro { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.avatar-pro { background: var(--pc, var(--accent)); color: #fff; }

/* Hoy: una columna por profesional */
.hoy-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.col-pro { min-width: 0; border-radius: var(--radio); background: var(--panel); border-top: 3px solid var(--pc); overflow: hidden; }
.col-pro-cab { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.col-pro-cab .avatar { flex: 0 0 34px; }
.col-pro-nombre { flex: 1; min-width: 0; }
.col-pro-nombre strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-pro-nombre small { font-size: 12px; color: var(--muted); }
.col-pro-cuenta { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.col-pro-prox { margin: 0 14px 8px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--pc) 14%, transparent); }
.col-pro-prox small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.col-pro-prox strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-pro-prox.clic { cursor: pointer; }
.col-pro-prox.clic:hover { filter: brightness(1.15); }
.col-pro-lista { max-height: 420px; overflow-y: auto; padding: 0 6px 8px; }
.col-pro-lista .turno { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 8px 8px; }
.hoy-nota { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* Agenda: filtro por profesional y resumen del día */
.filtros-pro button { display: inline-flex; align-items: center; }
.cal-pros { display: flex; gap: 3px; margin-top: 5px; }
.cal-pros i { width: 6px; height: 6px; border-radius: 50%; }
.dia-resumen { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 4px 10px; border-radius: 0 !important; }
.dia-pro { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 99px; background: color-mix(in srgb, var(--pc) 16%, transparent); color: var(--text); font-size: 12.5px; cursor: pointer; }
.dia-pro i { width: 8px; height: 8px; border-radius: 50%; background: var(--pc); }
.dia-pro small { color: var(--muted); font-size: 11.5px; }
.dia-pro:hover { filter: brightness(1.2); }

/* Pacientes */
.pac-pros { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: 1px; }
.pac-pros i { width: 7px; height: 7px; border-radius: 50%; }
.ficha-pros { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 22px; font-size: 13px; }
.ficha-aviso { margin: -4px 0 10px; font-size: 12px; color: var(--muted); }
.notas-ocultas { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, transparent); font-size: 13px; color: var(--muted); }
.hist-serv .marca-pro { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Profesionales */
.pro-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pro-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 0;
  border-radius: var(--radio);
  border-top: 3px solid var(--pc);
  background: var(--panel);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.pro-tarjeta:hover { background: var(--panel-hover); }
.pro-tarjeta.sel { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); background: var(--panel-hover); }
.pro-tarjeta.inactivo { opacity: 0.55; }
.pro-tarjeta-cab { display: flex; align-items: center; gap: 10px; }
.pro-tarjeta-cab .avatar { flex: 0 0 38px; height: 38px; }
.pro-tarjeta-nombre { flex: 1; min-width: 0; }
.pro-tarjeta-nombre strong { display: block; font-weight: 600; }
.pro-tarjeta-nombre small { font-size: 12.5px; color: var(--muted); }
.pro-dias { display: flex; gap: 4px; }
.pro-dias i { flex: 1; height: 24px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--tinta) 3%, transparent); font-style: normal; font-size: 11px; color: color-mix(in srgb, var(--tinta) 25%, transparent); }
.pro-dias i.si { background: color-mix(in srgb, var(--pc) 28%, transparent); color: var(--text); font-weight: 700; }
.pro-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pro-nums span { display: flex; flex-direction: column; }
.pro-nums b { font-family: 'Manrope', sans-serif; font-size: 18px; }
.pro-nums small { font-size: 11.5px; color: var(--muted); }
.colores { display: flex; gap: 10px; }
.color-op { width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px transparent; }
.color-op.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.color-op:disabled { opacity: 0.25; cursor: not-allowed; }
.pro-servicios { margin: 0 0 8px; padding: 0; list-style: none; }
.pro-servicios li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--tinta) 2%, transparent); font-size: 13px; }
.pro-servicios li + li { margin-top: 4px; }
.pro-servicios li small { color: var(--muted); }
.pro-servicios li.inactivo { opacity: 0.5; }
.ficha .dia-fila { grid-template-columns: 130px minmax(0, 1fr); }
.ficha .franja input { width: 100px; }
.pro-pie { margin: 24px -22px -22px; padding: 14px 22px; border-radius: 0 0 var(--radio) var(--radio); }
.pro-pie.sucio { bottom: -22px; }

/* Configuración en la clínica */
.serv-fila { grid-template-columns: minmax(0, 1fr) 150px 96px 120px 52px 30px; }
.bloq-form.bloq-form-5 { grid-template-columns: 170px 150px 150px minmax(0, 1fr) auto; max-width: 900px; }
.toda-clinica { color: var(--text); }
.permisos-tabla { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 13px; }
.permisos-tabla th, .permisos-tabla td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); text-align: left; }
.permisos-tabla tr:first-child th { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.permisos-tabla th:first-child { font-weight: 500; color: var(--text); }
.permisos-tabla tr:first-child th:first-child { color: var(--muted); }
.permisos-tabla td.si { color: var(--ok); }
.permisos-tabla td.no { color: var(--mal); }
.usuarios-lista li { grid-template-columns: 30px minmax(0, 1fr) auto auto 120px; }

/* Auditoría */
.buscador-chico { flex: 0 1 380px; }
.tabla .fila-aud { grid-template-columns: 76px 190px 170px minmax(0, 1fr); cursor: default; }
.fila-aud .col-quien { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.fila-aud .col-quien span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-aud .col-accion { font-size: 13px; font-weight: 500; }
.fila-aud .col-detalle { min-width: 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-avatar.ia { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); font-size: 10px; }
.fila-aud .mini-avatar { flex: 0 0 26px; height: 26px; font-size: 10.5px; }
.aud-mas { display: flex; justify-content: center; padding: 12px; }

/* ================= 5g. Apariencia (Configuración) ================= */
.apar-arriba { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 22px; }

/* Vista previa grande: se dibuja con las variables reales del tema */
.apar-vista {
  display: flex;
  gap: 8px;
  aspect-ratio: 16 / 10;
  padding: 10px;
  border-radius: 14px;
  background-color: var(--bg);
  background-image: var(--fondo-imagen);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px var(--line), 0 12px 30px color-mix(in srgb, #000 25%, transparent);
}
.av-lat { flex: 0 0 24%; display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; border-radius: 8px; background: var(--lateral); }
.av-logo { width: 34%; aspect-ratio: 1; margin-bottom: 6px; border-radius: 5px; background: var(--accent); }
.av-nav { height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.av-nav.activo { background: color-mix(in srgb, var(--accent) 40%, transparent); }
.av-main { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.av-cab { display: flex; justify-content: space-between; align-items: center; }
.av-titulo { width: 40%; height: 10px; border-radius: 3px; background: var(--text); opacity: 0.85; }
.av-boton { width: 26%; height: 14px; border-radius: 4px; background: var(--cta); }
.av-kpis { display: flex; gap: 6px; }
.av-kpi { flex: 1; height: 30px; padding: 6px; border-radius: 6px; background: var(--panel); }
.av-kpi b { display: block; width: 45%; height: 7px; border-radius: 2px; background: var(--text); opacity: 0.8; }
.av-tabla { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 6px; background: var(--panel); }
.av-fila { display: flex; align-items: center; gap: 6px; height: 14px; }
.av-hora { width: 14%; height: 6px; border-radius: 2px; background: var(--text); opacity: 0.7; }
.av-nombre { flex: 1; height: 6px; border-radius: 2px; background: var(--muted); opacity: 0.7; }
.av-chip { width: 18%; height: 9px; border-radius: 5px; }
.av-chip.ok { background: color-mix(in srgb, var(--ok) 45%, transparent); }
.av-chip.alerta { background: color-mix(in srgb, var(--alerta) 45%, transparent); }
.av-chip.pend { background: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Temas listos */
.apar-presets-caja .seccion { margin-bottom: 10px; }
.apar-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.apar-preset, .apar-op {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px 7px 9px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tinta) 4%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s, transform 0.15s;
}
.apar-preset:hover, .apar-op:hover { background: var(--hover); transform: translateY(-1px); }
.apar-preset.sel, .apar-op.sel { box-shadow: inset 0 0 0 2px var(--accent); background: var(--sel); }
.apar-preset:focus-visible, .apar-op:focus-visible, .apar-acento:focus-visible, .apar-fila-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apar-preset-txt strong, .apar-op-txt { display: block; padding: 0 3px; font-weight: 600; font-size: 13px; }
.apar-preset-txt small { display: block; padding: 0 3px; font-size: 11.5px; color: var(--muted); }

/* Miniaturas */
.mini { position: relative; display: flex; gap: 4px; height: 62px; padding: 5px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--tinta) 10%, transparent); }
.mini-lat { flex: 0 0 22%; border-radius: 3px; }
.mini-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mini-panel { flex: 1; border-radius: 3px; }
.mini-acc { width: 40%; height: 5px; border-radius: 3px; }
.mini-mitad { position: absolute; inset: 0 0 0 50%; border-radius: 0; box-shadow: none; padding-left: 0; }
.mini-mitad .mini-lat { display: none; }

/* Filas desplegables (como Windows) */
.apar-filas { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; }
.apar-fila { border-radius: 12px; background: color-mix(in srgb, var(--tinta) 4%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.apar-fila-cab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-radius: 12px; background: none; color: var(--text); text-align: left; cursor: pointer; }
.apar-fila-cab:hover { background: var(--hover); }
.apar-icono { flex: 0 0 22px; display: grid; color: var(--muted); }
.apar-icono svg { width: 21px; height: 21px; }
.apar-fila-txt { flex: 1; min-width: 0; }
.apar-fila-txt strong { display: block; font-weight: 500; }
.apar-fila-txt small { font-size: 12.5px; color: var(--muted); }
.apar-flecha { display: grid; color: var(--muted); transition: transform 0.2s var(--suave); }
.apar-flecha svg { width: 18px; height: 18px; }
.apar-fila.abierta .apar-flecha { transform: rotate(90deg); }
.apar-fila-cuerpo { padding: 2px 16px 16px 52px; }
.apar-seg { display: inline-flex; }
.apar-opciones { display: grid; gap: 10px; }
.apar-fondos { grid-template-columns: repeat(4, minmax(0, 150px)); }
.apar-grupo-titulo { margin: 4px 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.apar-grupo-titulo:not(:first-child) { margin-top: 16px; }
.apar-acentos { display: flex; flex-wrap: wrap; gap: 10px; }
.apar-acento { width: 34px; height: 34px; border: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sw) 0 55%, var(--sw2, var(--sw)) 55% 100%); cursor: pointer; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px transparent; transition: transform 0.15s; }
.apar-acento:hover { transform: scale(1.08); }
.apar-acento.sel { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.apar-acento.auto { background: conic-gradient(var(--sw) 0 50%, color-mix(in srgb, var(--sw) 45%, var(--panel)) 50% 100%); }
.apar-pie { display: flex; justify-content: flex-end; margin: 18px 0 28px; }

@media (max-width: 1100px) {
  .apar-arriba { grid-template-columns: 1fr; }
  .apar-vista { max-width: 420px; }
}
@media (max-width: 760px) {
  .apar-presets { grid-template-columns: 1fr 1fr; }
  .apar-fondos { grid-template-columns: 1fr 1fr; }
  .apar-fila-cuerpo { padding-left: 16px; }
  .apar-seg { display: flex; width: 100%; }
  .apar-seg button { flex: 1; }
}

/* ================= 6. Pantallas en construcción ================= */
.vacio { max-width: 520px; margin: 60px auto; text-align: center; color: var(--muted); }
.vacio svg { width: 44px; height: 44px; color: var(--accent); margin-bottom: 10px; }
.vacio h3 { color: var(--text); margin-bottom: 6px; font-size: 18px; }
.vacio b { color: var(--text); font-weight: 500; }

/* ================= 7. Ventanas ================= */
.modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #020c16 70%, transparent); animation: aparecer 0.2s; }
@keyframes aparecer { from { opacity: 0; } }
.modal-caja {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 24px;
  border-radius: 16px;
  background: var(--elevado);
  box-shadow: 0 20px 60px var(--sombra-fuerte);
  animation: subir 0.25s var(--suave);
}
@keyframes subir { from { transform: translateY(10px) scale(0.98); } }
.modal-caja h3 { font-size: 18px; margin-bottom: 16px; }
.modal-texto { margin: -8px 0 14px; color: var(--muted); }
.modal-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cerrar { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; }
.cerrar:hover { background: var(--hover); color: var(--text); }

.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 500; color: var(--muted); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: color-mix(in srgb, var(--tinta) 6%, transparent);
  color: var(--text);
  outline: none;
  color-scheme: var(--esquema);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.campo input, .campo select { height: 42px; }
.campo select option { background: var(--elevado); }
.campo textarea { resize: vertical; min-height: 60px; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-error { margin: 4px 0 0; color: var(--mal); font-size: 13px; }
.paciente-nuevo { padding: 12px 12px 0; margin-bottom: 12px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }

/* Detalle del turno */
.turno-caja { width: min(520px, 100%); }
.turno-cabeza h3 { margin: 10px 0 2px; }
.turno-cabeza p { margin: 0; color: var(--muted); }
.turno-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 18px 0; font-size: 13px; }
.turno-datos dt { color: var(--muted); }
.turno-datos dd { margin: 0; overflow-wrap: anywhere; }
.nota-bloque { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--aviso) 10%, transparent); }
.nota-titulo { display: block; font-size: 12px; font-weight: 500; color: var(--aviso-texto); }
.nota-bloque p { margin: 4px 0 0; }
.campo small, .nota-titulo small { font-weight: 400; opacity: 0.75; margin-left: 4px; }
.reprogramar { margin-top: 4px; padding: 14px 14px 12px; border-radius: 10px; background: color-mix(in srgb, var(--tinta) 3%, transparent); }
.reprogramar .btn { width: 100%; }
.turno-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ================= 7b. Pulido: tipografía, logo y animaciones ================= */

/* Tipografía: Manrope para títulos y números, DM Sans para el texto */
body { line-height: 1.5; }
h1, h2, h3, h4 { text-wrap: balance; }
p, small { text-wrap: pretty; }
.cabecera h1 { font-weight: 800; letter-spacing: -0.02em; }
.panel h3, .est-cab h3, .conf-titulo, .ficha-titulo h3, .modal-caja h3, .turno-cabeza h3 { font-weight: 700; letter-spacing: -0.01em; }
.kpi strong { font-weight: 600; letter-spacing: -0.02em; }
.btn, .btn-sec { font-weight: 600; letter-spacing: 0.01em; }
.col-hora, .hist-fecha, .proximo-hora { font-variant-numeric: tabular-nums; }

/* Botón principal con el color complementario */
.btn { background: var(--cta); color: var(--sobre-cta); box-shadow: 0 1px 0 color-mix(in srgb, #fff 18%, transparent) inset, 0 4px 14px color-mix(in srgb, var(--cta) 28%, transparent); }
.btn:hover { filter: brightness(1.07); }
.btn:focus-visible, .btn-sec:focus-visible, .icono-btn:focus-visible, .nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn, .btn-sec, .icono-btn, .nav-item, .filtros button { transition: background 0.2s, filter 0.2s, color 0.2s, transform 0.12s; }
.btn:active, .btn-sec:active, .icono-btn:active, .filtros button:active { transform: scale(0.97); }

/* Logo dibujado en la página: toma los colores del tema */
.marca-svg { flex: 0 0 38px; width: 38px; height: 38px; }
.marca-svg .logo-fondo { fill: var(--panel); }
.marca-svg .logo-borde { fill: none; stroke: url(#logo-grad); stroke-opacity: 0.55; stroke-width: 1.5; }
.marca-svg .logo-cruz { fill: url(#logo-grad); }
.marca-svg .logo-pulso { fill: none; stroke: var(--panel); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 32; stroke-dashoffset: 0; animation: pulso-dibuja 1.1s 0.2s var(--suave) both; }
.marca-svg .grad-1 { stop-color: var(--accent); }
.marca-svg .grad-2 { stop-color: var(--logo-2); }
@keyframes pulso-dibuja { from { stroke-dashoffset: 32; } }
.marca:hover .logo-pulso { animation: pulso-dibuja 0.9s var(--suave); }

/* Pantallas: entran con un fundido corto */
.vista:not([hidden]) { animation: vista-entra 0.22s var(--suave); }
@keyframes vista-entra { from { opacity: 0; transform: translateY(6px); } }

/* Menú: rayita de color en la sección elegida */
.nav-item { position: relative; }
.nav-item[data-vista]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.25s var(--suave);
}
.nav-item.activo::before { height: 18px; }

/* Próximo paciente: degradé sutil del color del tema (antes quedaba una mancha en claro) */
.proximo { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel) 65%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent); }

/* ================= 8. Avisos ================= */
.avisos { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.aviso {
  max-width: 360px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--elevado-2);
  box-shadow: 0 10px 30px var(--sombra-fuerte);
  border-left: 3px solid var(--accent);
  animation: aviso-entra 0.3s var(--suave);
}
.aviso.error { border-left-color: var(--error); }
.aviso.sale { animation: aviso-sale 0.3s ease-in forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-10px) scale(0.97); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(-8px); } }

/* ================= 9. Tablet y celular ================= */
@media (max-width: 1100px) {
  .hoy-layout { grid-template-columns: 1fr; }
  .cal-layout, .cal-layout.sin-panel { grid-template-columns: 1fr; gap: 14px; }
  .cal-layout.sin-panel .cal-dia-col { visibility: visible; }
  .panel-toggle { display: none; }
  .sin-panel .cal-lista { display: none; }
  .sin-panel .cal-dia { min-height: 92px; }
  .pac-layout { grid-template-columns: 1fr; }
  .conf-layout { grid-template-columns: 1fr; }
  .kpis-5 { grid-template-columns: repeat(3, 1fr); }
  .serv-fila { grid-template-columns: minmax(0, 1fr) 130px 90px 110px 46px 28px; }
  .bloq-form.bloq-form-5 { grid-template-columns: 1fr 1fr; }
  .bloq-form.bloq-form-5 .btn { grid-column: 1 / -1; }
  .tabla .fila-aud { grid-template-columns: 70px 160px minmax(0, 1fr); }
  .fila-aud .col-detalle { display: none; }
  .est-grilla { grid-template-columns: 1fr; }
  .conf-nav { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .conf-nav button { flex: 0 0 auto; }
  .ficha {
    position: fixed;
    z-index: 35;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100%);
    max-height: none;
    border-radius: 0;
    box-shadow: -20px 0 60px var(--sombra-fuerte);
    transform: translateX(105%);
    transition: transform 0.35s var(--suave);
  }
  .pac-layout.con-ficha .ficha { transform: none; }
  .cal-dia-col { position: static; }
  .cal-dia-panel { max-height: none; }
}

@media (max-width: 760px) {
  /* El menú lateral pasa a ser una barra de pestañas abajo */
  .app { flex-direction: column-reverse; }
  .lateral { flex: 0 0 auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); }
  .marca, .cuenta, .plegar { display: none; }
  .menu-plegado .lateral { flex-basis: auto; }
  .menu-plegado .nav-item span { opacity: 1; }
  .nav { flex-direction: row; justify-content: space-around; }
  .nav-item { flex-direction: column; gap: 2px; height: auto; padding: 6px 4px; font-size: 10.5px; }
  .contenido { padding: 16px 16px 30px; }
  .cabecera { flex-wrap: wrap; align-items: flex-start; padding-bottom: 16px; margin-bottom: 20px; }
  .cabecera-acciones { width: 100%; justify-content: space-between; }
  .cabecera h1 { font-size: 22px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 14px 16px; }
  .kpi strong { font-size: 24px; }
  .panel { padding: 16px 14px; }
  .panel-tabla { padding: 6px; }
  /* En celular todas las tablas van en versión compacta */
  .fila-cabeza, .turno { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 10px 8px; }
  .col-servicio, .col-origen, .sub-ind { display: none; }
  .col-paciente .sub-servicio { display: block; }
  .libre { padding: 8px; }
  .pac-herramientas { flex-direction: column; align-items: stretch; }
  .filtros button { flex: 1; padding: 0 6px; }
  .tabla .fila-pac { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-pac .col-tel, .fila-pac .col-ultima { display: none; }
  .ficha { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .hist-nota { margin-left: 0; }
  .kpis-5 { grid-template-columns: 1fr 1fr; }
  .filtros-fila .filtros { width: 100%; overflow-x: auto; }
  .filtros-fila .filtros button { flex: 0 0 auto; }
  .tabla .fila-llamada { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .fila-llamada .col-dur { display: none; }
  .barra-h { grid-template-columns: 96px minmax(0, 1fr) 36px; }
  .est-cab { flex-wrap: wrap; }
  .conf-contenido { padding: 20px 16px 0; }
  .conf-pie { margin: 24px -16px 0; padding: 12px 16px; }
  .conf-pie.sucio { bottom: -30px; }
  .dia-fila { grid-template-columns: 1fr; gap: 4px; }
  .franja input { width: 100px; }
  .serv-cabeza { display: none; }
  .serv-fila { grid-template-columns: minmax(0, 1fr) 96px 30px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--tinta) 4%, transparent); }
  .serv-fila .precio { grid-column: 1 / 2; }
  .bloq-form { grid-template-columns: 1fr 1fr; }
  .bloq-form .campo:nth-of-type(3), .bloq-form .btn { grid-column: 1 / -1; }
  .usuarios-lista li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .usuario-estado { grid-column: 2; }
  .vista-previa > strong { font-size: 28px; }
  .hoy-columnas { grid-template-columns: 1fr; }
  .pro-tarjetas { grid-template-columns: 1fr; }
  .tabla .fila-aud { grid-template-columns: 56px minmax(0, 1fr); }
  .fila-aud .col-accion { grid-column: 2; }
  .fila-aud .col-quien { grid-column: 2; grid-row: 1; }
  .serv-fila { grid-template-columns: minmax(0, 1fr) 96px 30px; }
  .serv-fila select:first-of-type { grid-column: 1 / -1; }
  .ver-como { display: none; }
  /* 8 secciones: la barra de abajo se desliza de costado */
  .nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; min-width: 70px; }
  .cal-mes { padding: 8px; }
  .cal-dia { min-height: 62px; padding: 4px; }
  .cal-cant { font-size: 0; }
  .cal-cant b { font-size: 13px; }
  .cal-libre, .cal-bloq { font-size: 0; }
  .cal-dias-semana span { padding-right: 4px; }
  .campo-fila { grid-template-columns: 1fr; gap: 0; }
  .mes-nav strong { min-width: 0; white-space: nowrap; font-size: 14px; }
  .cal-layout > div:first-child .seccion-fila > .seccion { display: none; }
  .cal-layout > div:first-child .seccion-fila { justify-content: center; }
  .nav-item[data-vista]::before { display: none; }
}