/* Estilos del panel. Los colores salen de ../assets/css/tema.css (paleta "Azul marino y oro") y, si la clínica eligió los suyos, de tema.php:
   aquí no hay colores fijos, solo variables del tema. */

/* Tipografías locales (licencia OFL, en ../assets/fonts): serif para títulos, sans para textos */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-display: swap; src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-display: swap; src: url("../assets/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-display: swap; src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); }

:root {
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --alto-superior: 70px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14.5px/1.55 var(--sans);
}
a { color: var(--marino); }
a:hover { color: var(--marino-claro); }
h1, h2, h3 { font-family: var(--serif); color: var(--texto); font-weight: 700; letter-spacing: .005em; }
h1 { font-size: 32px; line-height: 1.15; margin: 0 0 20px; }
/* Títulos de página: serif con una línea dorada corta debajo */
h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--dorado); }
h2 { font-size: 22px; line-height: 1.2; margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 8px; }
small { color: var(--texto-suave); }

/* --- Estructura: barra superior blanca con línea dorada + menú lateral azul marino --- */
.superior {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px; padding: 8px 24px; min-height: var(--alto-superior);
  background: var(--blanco); color: var(--texto); border-bottom: 2px solid var(--dorado); box-shadow: var(--sombra);
}
.marca { display: flex; gap: 12px; align-items: center; color: var(--texto); text-decoration: none; min-width: 0; }
.marca:hover { color: var(--texto); }
/* Logo en su círculo: azul marino con aro dorado (el diente del logo es dorado: sobre relleno dorado no se vería) */
.marca img { width: 50px; height: 50px; flex: none; padding: 5px; border-radius: 50%; background: var(--marino); box-shadow: 0 0 0 2px var(--dorado); }
.marca span { font-family: var(--serif); font-size: 23px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.marca small { display: block; font-family: var(--sans); color: var(--texto-suave); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-top: 3px; }
.superior .espacio { flex: 1; }
.usuario { font-size: 13px; display: flex; align-items: center; gap: 12px; text-align: right; }
.usuario strong { display: block; font-weight: 700; }
.usuario small { display: block; color: var(--texto-suave); font-weight: 500; }

.layout { min-height: calc(100vh - var(--alto-superior)); display: grid; grid-template-columns: 230px 1fr; }
.layout > * { min-width: 0; }   /* el menú con scroll horizontal no debe ensanchar la columna en móvil */
.barra {
  background: var(--marino); color: var(--menu-texto);
  padding: 20px 12px; position: sticky; top: var(--alto-superior); height: calc(100vh - var(--alto-superior));
}
.barra nav { display: flex; flex-direction: column; gap: 3px; }
.barra nav a {
  color: var(--menu-texto); text-decoration: none; padding: 10px 12px; border-radius: var(--radio-sm);
  display: flex; gap: 10px; align-items: center; font-weight: 500;
}
.barra nav a:hover { background: var(--marino-claro); color: var(--menu-texto); }
/* Ítem activo: fondo más claro, texto dorado y barrita dorada a la izquierda */
.barra nav a.activo { background: var(--marino-claro); color: var(--dorado-claro); font-weight: 700; box-shadow: inset 4px 0 0 var(--dorado); border-radius: 3px var(--radio-sm) var(--radio-sm) 3px; }
.contenido { padding: 28px 32px 48px; max-width: 1180px; width: 100%; }

@media (max-width: 860px) {
  :root { --alto-superior: 60px; }
  .superior { padding: 6px 12px; gap: 10px; }
  .superior .btn-sm { padding: 6px 9px; font-size: 12px; white-space: nowrap; }
  .marca img { width: 42px; height: 42px; padding: 4px; }
  .marca span { font-size: 19px; white-space: normal; }
  .marca small { letter-spacing: .1em; font-size: 9.5px; }
  .usuario > div { display: none; }
  .layout { grid-template-columns: 1fr; min-height: 0; }
  .barra { position: static; height: auto; padding: 6px 12px; }
  .barra nav { flex-direction: row; overflow-x: auto; gap: 4px; margin: 0 -12px; padding: 0 12px; scrollbar-width: none; }
  .barra nav a { white-space: nowrap; padding: 8px 12px; }
  .barra nav a.activo { box-shadow: inset 0 -3px 0 var(--dorado); border-radius: var(--radio-sm) var(--radio-sm) 3px 3px; }
  .contenido { padding: 18px 16px 40px; }
  h1 { font-size: 26px; }
}

/* --- Componentes --- */
/* Tarjetas, formularios y tablas: blanco con borde gris claro y esquinas de 8px */
.tarjeta { background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; }
.tarjeta > h2:first-child, .seccion-titulo { padding-bottom: 8px; border-bottom: var(--borde) solid var(--borde-color); }
/* Botón principal azul marino; secundario/acento dorado con texto azul marino */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: var(--borde) solid var(--marino); border-radius: var(--radio-sm); padding: 9px 16px; font: inherit; font-weight: 600;
  background: var(--marino); color: var(--texto-sobre-marino); cursor: pointer; text-decoration: none; min-height: 42px;
}
.btn:hover { background: var(--marino-claro); border-color: var(--marino-claro); color: var(--texto-sobre-marino); }
.btn:focus-visible { outline: none; box-shadow: var(--foco); }
.btn-sm { padding: 5px 10px; font-size: 13px; min-height: 34px; }
.btn-sec, .btn-claro { background: var(--dorado); border-color: var(--dorado); color: var(--texto-sobre-dorado); }
.btn-sec:hover, .btn-claro:hover { background: var(--dorado-hover); border-color: var(--dorado-hover); color: var(--texto-sobre-dorado); }
/* Botones de cambio de estado: los colores del estado al que llevan */
.btn-confirmar { background: var(--confirmada-fondo); color: var(--confirmada-texto); border-color: color-mix(in srgb, var(--confirmada-texto) 40%, var(--confirmada-fondo)); }
.btn-atendida  { background: var(--atendida-fondo); color: var(--atendida-texto); border-color: color-mix(in srgb, var(--atendida-texto) 40%, var(--atendida-fondo)); }
.btn-novino    { background: var(--no-asistio-fondo); color: var(--no-asistio-texto); border-color: color-mix(in srgb, var(--no-asistio-texto) 40%, var(--no-asistio-fondo)); }
.btn-cobrar    { background: var(--pendiente-fondo); color: var(--pendiente-texto); border-color: color-mix(in srgb, var(--pendiente-texto) 40%, var(--pendiente-fondo)); }
.btn-peligro, .btn-cancelar { background: var(--cancelada-fondo); color: var(--cancelada-texto); border-color: color-mix(in srgb, var(--cancelada-texto) 40%, var(--cancelada-fondo)); }
.btn-confirmar:hover { background: var(--confirmada-fondo); color: var(--confirmada-texto); border-color: var(--confirmada-texto); }
.btn-atendida:hover  { background: var(--atendida-fondo); color: var(--atendida-texto); border-color: var(--atendida-texto); }
.btn-novino:hover    { background: var(--no-asistio-fondo); color: var(--no-asistio-texto); border-color: var(--no-asistio-texto); }
.btn-cobrar:hover    { background: var(--pendiente-fondo); color: var(--pendiente-texto); border-color: var(--pendiente-texto); }
.btn-peligro:hover, .btn-cancelar:hover { background: var(--cancelada-fondo); color: var(--cancelada-texto); border-color: var(--cancelada-texto); }

.flash { border-radius: var(--radio); padding: 12px 14px; margin-bottom: 14px; font-weight: 500; border-left: 5px solid; }
.flash.ok { background: var(--atendida-fondo); color: var(--atendida-texto); }
.flash.error { background: var(--cancelada-fondo); color: var(--cancelada-texto); }
.flash.aviso { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.flash a { color: inherit; font-weight: 700; }

.barra-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.barra-acciones .espacio { flex: 1; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi { background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px 16px; }
.kpi b { display: block; font-size: 26px; line-height: 1.2; }
.kpi span { color: var(--texto-suave); font-size: 13px; }
@media (max-width: 600px) {
  .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi { padding: 12px; }
  .kpi b { font-size: clamp(15px, 4.4vw, 22px); white-space: nowrap; }   /* "$ 26.844.000" cabe en media columna dentro del marco */
}

/* Estados de cita: los mismos colores en insignias, tarjetas, agenda y botones */
.estado { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.estado.pendiente  { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.estado.confirmada { background: var(--confirmada-fondo); color: var(--confirmada-texto); }
.estado.atendida   { background: var(--atendida-fondo); color: var(--atendida-texto); }
.estado.no_asistio { background: var(--no-asistio-fondo); color: var(--no-asistio-texto); }
.estado.cancelada  { background: var(--cancelada-fondo); color: var(--cancelada-texto); }
.etiqueta { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--no-asistio-fondo); color: var(--no-asistio-texto); }

/* --- Citas --- */
.citas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cita {
  background: var(--blanco); border: var(--borde) solid var(--borde-color); border-left-width: 6px; border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.cita.pendiente { border-left-color: var(--pendiente-texto); }
.cita.confirmada { border-left-color: var(--confirmada-texto); }
.cita.atendida { border-left-color: var(--atendida-texto); }
.cita.no_asistio { border-left-color: var(--no-asistio-texto); }
.cita.cancelada { border-left-color: var(--cancelada-texto); }
.cita.cancelada .cita-paciente { text-decoration: line-through; }
.cita-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cita-hora { font-weight: 700; }
.cita-hora small { display: block; font-weight: 400; }
.cita-paciente { font-weight: 600; font-size: 15.5px; }
.cita-paciente a { color: var(--texto); text-decoration: none; }
.cita-paciente a:hover { text-decoration: underline; }
.cita-detalle, .cita-notas { color: var(--texto-suave); font-size: 13.5px; }
.cita-detalle a { text-decoration: none; }
.origen { color: var(--atendida-texto); }
.acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acciones form { margin: 0; }

.dia { margin-bottom: 22px; }
.dia-cab { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dia-cab h2 { margin: 0; }
.dia-cab .espacio { flex: 1; }
.vacio { background: var(--blanco); border: var(--borde) dashed var(--borde-control); border-radius: var(--radio); padding: 14px 16px; color: var(--texto-suave); }
.bloqueo { background: var(--pendiente-fondo); color: var(--pendiente-texto); border-radius: var(--radio-sm); padding: 8px 12px; font-size: 13.5px; margin-bottom: 8px; }

/* --- Formularios --- */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=date],
input[type=time], input[type=number], input[type=search], input[type=month], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--texto); background: var(--blanco);
  border: var(--borde) solid var(--borde-control); border-radius: var(--radio-sm); padding: 8px 12px; min-height: 42px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marino); box-shadow: var(--foco); }
::placeholder { color: var(--texto-suave); opacity: 1; }
textarea { min-height: 70px; resize: vertical; }
.campo { margin-bottom: 14px; }
.campo .ayuda { font-weight: 400; color: var(--texto-suave); font-size: 12.5px; margin-top: 3px; }
.campo .error-campo { color: var(--cancelada-texto); font-size: 13px; margin-top: 3px; font-weight: 600; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--marino); }
.form-linea { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.form-linea .campo { margin: 0; flex: 1 1 160px; }
.form-linea .campo.angosto { flex: 0 1 110px; }

/* Selección de horas y días como fichas */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; inset: 0; }
.ficha span, a.ficha {
  display: inline-block; padding: 7px 14px; border-radius: 999px; border: var(--borde) solid var(--borde-control);
  background: var(--blanco); cursor: pointer; font-weight: 600; font-size: 14px; color: var(--texto); text-decoration: none;
}
.ficha span:hover, a.ficha:hover { background: var(--superficie-suave); color: var(--texto); }
.ficha input:checked + span, a.ficha.activa { background: var(--marino); border-color: var(--marino); color: var(--texto-sobre-marino); }
.ficha input:focus-visible + span { box-shadow: var(--foco); }

/* --- Listas y tablas --- */
.lista { display: flex; flex-direction: column; }
.fila {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 8px 16px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--borde-color); text-decoration: none; color: var(--texto);
}
.fila:last-child { border-bottom: 0; }
a.fila:hover { background: var(--superficie-suave); border-radius: var(--radio-sm); color: var(--texto); }
.fila .principal { font-weight: 600; }
.fila small { display: block; }
@media (max-width: 700px) {
  .fila { grid-template-columns: 1fr auto; }
  .fila .ocultar-movil { display: none; }
}
table {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanco);
  border: var(--borde) solid var(--borde-color); border-radius: var(--radio); overflow: hidden;
}
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde-color); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 12.5px; color: var(--texto); background: var(--superficie-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-bottom: var(--borde) solid var(--borde-color); }
tbody th { background: var(--blanco); border-bottom: 1px solid var(--borde-color); text-transform: none; letter-spacing: 0; font-size: 14px; }
.tabla-scroll { overflow-x: auto; }
td form { margin: 0; }
td input[type=text], td input[type=number] { min-width: 90px; }

/* --- Login: fondo azul marino, tarjeta blanca con el logo y el formulario --- */
.pagina-simple { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 22px; padding: 28px 16px; background: var(--marino); }
.pagina-simple .tarjeta { width: 100%; max-width: 420px; padding: 26px 26px 28px; border-top: 3px solid var(--dorado); box-shadow: var(--sombra-alta); }
.login-logo { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto 14px; }
.login-marca { text-align: center; margin-bottom: 18px; padding-bottom: 12px; border-bottom: var(--borde) solid var(--borde-color); }
.login-marca h1 { font-size: 26px; margin: 0 0 2px; }
.login-marca h1::after { margin: 8px auto 6px; }
.pagina-simple .btn { width: 100%; }
.pie-login { color: var(--menu-texto); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }

.seccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.seccion-titulo h2 { margin: 0; }
.nota { color: var(--texto-suave); font-size: 13.5px; }
.paciente-resumen { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }

/* --- Cobros y análisis --- */
.cita-cobro { font-size: 13.5px; color: var(--texto-suave); }
.cita-cobro.debe b { color: var(--pendiente-texto); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bloque { display: block; }
.total-grande { font-size: 20px; font-variant-numeric: tabular-nums; }
.campo-pesos { position: relative; }
.campo-pesos span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-suave); font-weight: 600; }
.campo-pesos input { padding-left: 28px; font-variant-numeric: tabular-nums; }
.resumen-cobro { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.resumen-cobro small { display: block; }
.resumen-cobro .principal { font-weight: 700; font-size: 17px; color: var(--texto); text-decoration: none; }
.saldo-caja { text-align: right; background: var(--superficie-suave); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); padding: 8px 14px; }
.saldo-caja b { font-size: 22px; font-variant-numeric: tabular-nums; }
.saldo-caja.debe { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.saldo-caja.debe small { color: var(--pendiente-texto); }
.kpis-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .kpis-3 { grid-template-columns: 1fr; } }
.kpi b { font-variant-numeric: tabular-nums; }
.kpi span, .kpi .variacion { display: block; }
.kpi-debe { box-shadow: inset 5px 0 0 var(--pendiente-texto), var(--sombra); }
.kpi-destacado { box-shadow: inset 5px 0 0 var(--grafica-ganancia), var(--sombra); }   /* ganancia: dorado */
.variacion { font-size: 12.5px; margin-top: 4px; font-weight: 600; }
.variacion.bien { color: var(--atendida-texto); }
.variacion.mal { color: var(--cancelada-texto); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 860px) { .dos-columnas { grid-template-columns: 1fr; } }
.acciones.sin-margen { margin: 0; flex-wrap: nowrap; }
.resumen-categorias { margin-bottom: 12px; }
.fila-actual td { background: var(--superficie-suave); font-weight: 700; }

/* Gráficos (SVG generado en el servidor): ingresos azul marino, gastos rojo, ganancia dorado */
.serie-ingresos { fill: var(--grafica-ingresos); background: var(--grafica-ingresos); }
.serie-gastos { fill: var(--grafica-gastos); background: var(--grafica-gastos); }
.serie-ganancia { fill: var(--grafica-ganancia); background: var(--grafica-ganancia); }
.leyenda { display: flex; gap: 14px; font-size: 13px; color: var(--texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.grafico-caja { overflow-x: auto; }
.grafico { width: 100%; min-width: 560px; height: auto; display: block; }
.grafico .rejilla-linea { stroke: var(--borde-color); stroke-width: 1; }
.grafico .rejilla-linea.base { stroke: var(--borde-control); stroke-width: 1.2; }
.grafico .eje { fill: var(--texto-suave); font-size: 11.5px; }
.grafico .eje.actual { fill: var(--texto); font-weight: 700; }
.grafico .eje.anio { font-size: 10.5px; }
.grafico .objetivo { fill: transparent; }
.grafico .punto:hover .objetivo { fill: var(--superficie-suave); }
.grafico .punto:hover path { opacity: .85; }
.tabla-datos { margin-top: 10px; }
.tabla-datos summary { cursor: pointer; color: var(--marino); font-size: 13.5px; font-weight: 600; }
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.barra-h { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; gap: 10px; align-items: center; font-size: 14px; }
.barra-h svg { width: 100%; height: 12px; display: block; border-radius: 0 4px 4px 0; }
.barra-h-valor { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 120px; }
.barra-h-valor small { font-weight: 400; }
@media (max-width: 500px) {
  .barra-h { grid-template-columns: 1fr auto; }
  .barra-h svg { grid-column: 1 / -1; grid-row: 2; }
}

/* --- Tratamientos y cartera (cuota vencida = colores de "cancelada") --- */
.progreso { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.progreso progress { flex: 1; height: 12px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; background: var(--superficie-suave); overflow: hidden; }
.progreso progress::-webkit-progress-bar { background: var(--superficie-suave); border-radius: 999px; }
.progreso progress::-webkit-progress-value { background: var(--dorado); border-radius: 999px; }
.progreso progress::-moz-progress-bar { background: var(--dorado); border-radius: 999px; }
.progreso span { font-weight: 700; font-size: 13px; color: var(--texto); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.kpi-vencido { box-shadow: inset 5px 0 0 var(--cancelada-texto), var(--sombra); }
.kpi-vencido b { color: var(--cancelada-texto); }
.vencido, .vencido b { color: var(--cancelada-texto); }
.tratamiento { background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px; }
.tratamiento h3 a { color: var(--texto); text-decoration: none; }
.tratamiento h3 a:hover { text-decoration: underline; }
.tratamiento summary, .fila-recordatorio summary { cursor: pointer; color: var(--marino); font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.cifras-tratamiento { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--texto-suave); }
.cifras-tratamiento b { color: var(--texto); font-variant-numeric: tabular-nums; }
.estado-tratamiento { vertical-align: middle; font-family: var(--sans); font-weight: 600; }
.estado-tratamiento.activo { background: var(--atendida-fondo); color: var(--atendida-texto); }
.estado-tratamiento.suspendido { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
table.cuotas tr.cuota-vencida td { background: var(--cancelada-fondo); color: var(--cancelada-texto); font-weight: 600; }
table.cuotas tr.cuota-pagada td { color: var(--texto-suave); }
.insignia-cuota { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.insignia-cuota.pagada { background: var(--atendida-fondo); color: var(--atendida-texto); }
.insignia-cuota.vencida { background: var(--cancelada-fondo); color: var(--cancelada-texto); box-shadow: inset 0 0 0 1.5px var(--cancelada-texto); }
.opciones-destino { display: flex; flex-direction: column; gap: 8px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 10px 12px; cursor: pointer; }
.opcion:has(input:checked) { border-color: var(--marino); background: var(--superficie-suave); }
.opcion input { margin-top: 3px; accent-color: var(--marino); }
.saldo-caja .vencido { display: block; font-weight: 600; }
.tabla-cartera tr.atrasado td { background: var(--cancelada-fondo); }
.tabla-cartera tr.atrasado td, .tabla-cartera tr.atrasado a { color: var(--cancelada-texto); }
.tabla-cartera tr.con-vencido td:nth-child(3), .tabla-cartera tr.con-vencido td:nth-child(5) { color: var(--cancelada-texto); font-weight: 600; }
.tabla-cartera .principal { font-weight: 600; text-decoration: none; }
.tabla-cartera tr:not(.fila-recordatorio) td { border-bottom: 0; }
.fila-recordatorio td { padding-top: 0; }
.fila-recordatorio textarea { margin: 8px 0; font-size: 14px; min-height: 150px; }
table tr.atrasado td { background: var(--cancelada-fondo); }
.campo.angosto-200 { flex: 0 1 200px; }
.plan-previo { background: var(--superficie-suave); border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 10px 14px; margin-bottom: 14px; }
.plan-previo h3 { margin: 0 0 2px; }
.plan-previo .nota { margin: 0; color: var(--texto); }

/* --- Recibos de caja --- */
.cambio-caja { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--radio-sm); background: var(--superficie-suave); border: var(--borde) solid var(--borde-color); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.cambio-caja.falta { background: var(--cancelada-fondo); color: var(--cancelada-texto); border-color: var(--cancelada-texto); font-size: 14px; }
.acciones-pago { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acciones-pago form { margin: 0; }
.numero-recibo { font-variant-numeric: tabular-nums; white-space: nowrap; }
.recibos-anulados { margin-top: 12px; }
.recibos-anulados li { margin: 4px 0; }

/* --- Consultas (asesor humano) --- */
.barra nav a .contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--cancelada-texto); color: var(--blanco); font-size: 12px; font-weight: 700;
}
.resumen-consulta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.resumen-consulta .principal { font-weight: 700; font-size: 17px; color: var(--texto); text-decoration: none; }
.resumen-consulta small { display: block; }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 4px 4px 4px 0; }
.msg {
  max-width: 78%; padding: 8px 12px 9px; border-radius: var(--radio); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45;
  border: var(--borde) solid var(--borde-color); background: var(--blanco); color: var(--texto);
}
.msg small { display: block; font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.msg.paciente { align-self: flex-start; border-top-left-radius: 3px; }
.msg.bot { align-self: flex-end; background: var(--no-asistio-fondo); border-color: var(--no-asistio-fondo); border-top-right-radius: 3px; }
.msg.asesor { align-self: flex-end; background: var(--superficie-suave); border-color: var(--dorado); border-top-right-radius: 3px; }
.cerrar-consulta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.insignia-ejemplo { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.info-bot details { border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 10px 14px; margin-bottom: 10px; background: var(--blanco); }
.info-bot details[open] { border-color: var(--borde-control); }
.info-bot summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-weight: 600; }
.info-bot summary small { font-weight: 400; }
.info-bot form { margin-top: 12px; }
.acciones-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Agenda semanal (tipo Google Calendar) ---
   Citas, bloqueos y la línea de la hora actual se ubican desde panel.js (la CSP no permite style="…"). */
:root {
  --cal-hora: 56px;            /* alto de una hora; múltiplo de 14 para que el rayado de los huecos empalme */
  --cal-margen: 58px;          /* columna de las horas */
  --cal-rayado: linear-gradient(45deg, var(--cerrado-raya) 25%, transparent 25%, transparent 50%, var(--cerrado-raya) 50%, var(--cerrado-raya) 75%, transparent 75%) 0 0 / 7px 7px var(--cerrado-fondo);
}
.cal-barra { gap: 10px 14px; }
.cal-nav { display: flex; gap: 6px; }
/* Botones de navegación: blancos con borde fino (nada de dorado macizo) */
.btn-borde { background: var(--blanco); border-color: var(--borde-color); color: var(--texto); }
.btn-borde:hover { background: var(--superficie-suave); border-color: var(--borde-color); color: var(--texto); }
.cal-rango { margin: 0; font-family: var(--serif); font-size: 25px; color: var(--texto); white-space: nowrap; }
.cal-vistas { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radio-sm); background: var(--blanco); border: var(--borde) solid var(--borde-color); }
.cal-vistas a { padding: 6px 12px; border-radius: 7px; color: var(--texto); text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.cal-vistas a:hover { background: var(--superficie-suave); color: var(--texto); }
.cal-vistas a.activa { background: var(--marino); color: var(--texto-sobre-marino); }

.cal { background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.cal-scroll { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--cal-margen); overscroll-behavior-x: contain; }
.cal-rejilla { display: grid; }
.cal-rejilla.dias-7 { grid-template-columns: var(--cal-margen) repeat(7, minmax(100px, 1fr)); }
.cal-rejilla.dias-3 { grid-template-columns: var(--cal-margen) repeat(3, minmax(0, 1fr)); }
.cal-rejilla.dias-1 { grid-template-columns: var(--cal-margen) minmax(0, 1fr); }
.cal-esquina, .cal-horas { position: sticky; left: 0; z-index: 4; background: var(--blanco); }
.cal-esquina { border-bottom: var(--borde) solid var(--borde-color); }

.cal-cab { text-align: center; padding: 8px 4px 7px; background: var(--blanco); border-bottom: var(--borde) solid var(--cal-linea); border-left: 1px solid var(--cal-linea); scroll-snap-align: start; }
.cal-cab small { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; color: var(--texto-suave); }
.cal-cab b { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font: 700 23px/1 var(--serif); color: var(--texto); }
/* Hoy: nombre en dorado oscuro, número en círculo azul marino, línea dorada bajo el encabezado y columna muy suave */
.cal-cab.hoy { box-shadow: inset 0 -3px 0 var(--dorado); }
.cal-cab.hoy small { color: var(--cal-hoy-texto); font-weight: 700; }
.cal-cab.hoy b { background: var(--marino); color: var(--texto-sobre-marino); }

.cal-horas { display: flex; flex-direction: column; }
/* Cada etiqueta va centrada sobre la línea de su hora (la primera y la última, sin salirse) */
.cal-horas span { flex: none; height: var(--cal-hora); padding-right: 8px; text-align: right; font-size: 11px; line-height: 14px; color: var(--texto-suave); white-space: nowrap; transform: translateY(-7px); }
.cal-horas span:first-child { transform: translateY(2px); }
.cal-horas span:last-child { height: 0; transform: translateY(-16px); }

.cal-dia { position: relative; display: grid; grid-template-rows: repeat(24, calc(var(--cal-hora) / 2)); border-left: 1px solid var(--cal-linea); }
.cal-dia.hoy { background: var(--cal-hoy-fondo); }
/* Línea continua en cada hora y punteada, más clara, en cada media hora */
.hueco { display: block; border-top: 1px dashed var(--cal-linea-media); }
.hueco.en-punto { border-top: 1px solid var(--cal-linea); }
.hueco:first-child { border-top-color: transparent; }
.hueco.cerrado { background: var(--cal-rayado); }
a.hueco { position: relative; }
a.hueco:hover { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--borde-control); }
a.hueco:hover::after { content: "+ " attr(data-hora); position: absolute; left: 6px; top: 5px; font-size: 11.5px; font-weight: 700; color: var(--texto); }

.cal-bloqueo {
  position: absolute; left: 0; right: 0; z-index: 1; overflow: hidden; padding: 4px 6px;
  background: var(--cal-rayado); border-left: 3px solid var(--cerrado-borde); font-size: 11.5px; font-weight: 600; color: var(--cerrado-texto);
}
/* Bloques de cita: fondo suave del estado, borde fino y borde izquierdo de 4px del color del estado;
   nombre del paciente en negrita y la hora en gris */
.evento {
  position: absolute; left: 2px; right: 4px; z-index: 2; overflow: hidden;
  padding: 3px 6px 3px 6px; background: var(--blanco); border: 1px solid var(--borde-color); border-left: 4px solid var(--borde-control);
  border-radius: 6px; font-size: 12px; line-height: 1.3; color: var(--texto); text-decoration: none;
  transition: box-shadow .15s;
}
.evento-nombre { font-weight: 700; color: var(--texto); }
.evento-hora { font-weight: 500; color: var(--texto-suave); }
.evento.corto { white-space: nowrap; text-overflow: ellipsis; padding-top: 1px; padding-bottom: 1px; }
.evento:hover { box-shadow: var(--sombra-suave); z-index: 3; color: var(--texto); }
.evento:focus-visible { outline: 2px solid var(--texto); outline-offset: 1px; }
.evento.confirmada { background: var(--confirmada-fondo); border-left-color: var(--confirmada-borde); }
.evento.pendiente  { background: var(--pendiente-fondo); border-left-color: var(--pendiente-borde); }
.evento.atendida   { background: var(--atendida-fondo); border-left-color: var(--atendida-borde); }
.evento.no_asistio { background: var(--no-asistio-fondo); border-left-color: var(--no-asistio-borde); }
.cal-ahora { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; margin-top: -1px; background: var(--hora-actual); pointer-events: none; }
.cal-ahora::before { content: ""; position: absolute; left: -6px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--hora-actual); }

.cal-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 12px; }
.cal-leyenda > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cal-leyenda .muestra { position: static; width: 14px; height: 14px; padding: 0; border-radius: 4px; box-shadow: none; }
.cal-leyenda .muestra.cerrado { background: var(--cal-rayado); border: 1px solid var(--cerrado-borde); }

.cal-detalle {
  width: min(430px, calc(100vw - 32px)); padding: 18px 20px 20px; border: var(--borde) solid var(--borde-color); border-top: 4px solid var(--dorado);
  border-radius: var(--radio); background: var(--blanco); color: var(--texto); box-shadow: var(--sombra-alta);
}
.cal-detalle::backdrop { background: var(--velo); }
.cal-detalle-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.cal-detalle h2 { margin: 0; }
.cal-detalle h2 a { color: var(--texto); text-decoration: none; }
.cal-detalle h2 a:hover { text-decoration: underline; }
.cal-cerrar { flex: none; min-width: 36px; min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); font-size: 26px; line-height: 1; cursor: pointer; }
.cal-cerrar:hover { background: var(--superficie-suave); color: var(--texto); }
.cal-detalle-cuando { margin: 2px 0 12px; color: var(--texto-suave); }
.cal-detalle dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: center; margin: 0 0 10px; }
.cal-detalle dt { color: var(--texto-suave); font-size: 13px; }
.cal-detalle dd { margin: 0; }
.cal-detalle dd a { text-decoration: none; }

@media (max-width: 860px) {
  .cal-rango { font-size: 21px; }
  .cal-vistas { order: 5; }
}
@media (max-width: 600px) {
  :root { --cal-margen: 48px; }
  .cal-nav-texto { display: none; }
  .cal-barra .espacio { display: none; }
  .cal-rango { flex: 1 1 100%; order: -1; }
  .cal-horas span { padding-right: 5px; font-size: 10px; }
  .evento { padding: 2px 4px 2px 4px; font-size: 11px; line-height: 1.25; }
  .cal-detalle { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; }
}

/* --- Marca de la clínica: iniciales cuando no tiene logo (barra, login, simulador) --- */
.iniciales-marca { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 50%;
  background: var(--marino); color: var(--texto-sobre-marino); box-shadow: 0 0 0 2px var(--dorado); font: 700 18px/1 var(--serif); letter-spacing: .04em; }
.login-iniciales { width: 96px; height: 96px; font-size: 34px; margin: 6px auto 12px; display: flex; }
.login-nombre { margin: 0 0 14px; text-align: center; font: 700 26px/1.15 var(--serif); color: var(--texto); }
.login-nombre small { display: block; margin-top: 4px; font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-suave); }
@media (max-width: 760px) { .marca .iniciales-marca { width: 42px; height: 42px; font-size: 15px; } }

/* --- Configuración → Mi consultorio --- */
.logo-actual { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; margin: 6px 0 14px; }
.logo-actual figure, .logo-vista { margin: 0; text-align: center; }
.logo-actual img, .logo-vista img { display: block; max-width: 220px; max-height: 120px; width: auto; height: auto; margin: 0 auto;
  padding: 8px; background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); }
.logo-actual .logo-actual-icono { width: 72px; height: 72px; border-radius: 50%; background: var(--marino); box-shadow: 0 0 0 2px var(--dorado); }
.logo-actual .logo-actual-pos { max-width: 160px; }
.logo-actual figcaption, .logo-vista figcaption { margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.form-logo { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 10px; }
.colores { display: flex; flex-wrap: wrap; gap: 18px; }
.colores input[type=color] { width: 72px; height: 40px; padding: 2px; border: var(--borde) solid var(--borde-control); border-radius: var(--radio-sm); background: var(--blanco); cursor: pointer; }
.vista-tema { margin: 10px 0 12px; border: var(--borde) solid var(--borde-color); border-radius: var(--radio); overflow: hidden; background: var(--fondo); max-width: 620px; }
.vt-barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--blanco); border-bottom: 3px solid var(--dorado);
  font: 700 17px/1.2 var(--serif); color: var(--texto); }
.vt-barra img, .vt-barra .iniciales-marca { width: 28px; height: 28px; font-size: 11px; border-radius: 50%; background: var(--marino); padding: 2px; }
.vt-cuerpo { display: flex; min-height: 150px; }
.vt-menu { flex: none; width: 140px; padding: 8px 6px; background: var(--marino); display: flex; flex-direction: column; gap: 3px; }
.vt-item { padding: 6px 8px; border-radius: var(--radio-sm); color: var(--menu-texto); font-size: 13px; }
.vt-item.activo { background: var(--marino-claro); color: var(--dorado-claro); font-weight: 700; box-shadow: inset 4px 0 0 var(--dorado); }
.vt-pagina { flex: 1; padding: 10px 14px; }
.vt-titulo { margin: 0 0 8px; font: 700 20px/1.2 var(--serif); color: var(--texto); }
.vt-tarjeta { background: var(--blanco); border: var(--borde) solid var(--borde-color); border-radius: var(--radio); padding: 10px 12px; box-shadow: var(--sombra); color: var(--texto); }
.vt-tarjeta p { margin: 0 0 6px; }
.vt-suave { color: var(--texto-suave); font-size: 13px; }
.vt-btn, .vt-btn-acento { display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: var(--radio-sm); font-weight: 600; font-size: 13px; }
.vt-btn { background: var(--marino); color: var(--texto-sobre-marino); }
.vt-btn-acento { background: var(--dorado); color: var(--texto-sobre-dorado); }
.contrastes { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.contrastes li { padding: 3px 0; }
.contrastes li.ok { color: var(--atendida-texto); }
.contrastes li.falla { color: var(--cancelada-texto); font-weight: 600; }
@media (max-width: 600px) { .vt-menu { width: 104px; } }
/* --- Fase 7: plan, estado de la cuenta y uso (panel de la clínica y superadmin) --- */
.flash.info { background: var(--confirmada-fondo); color: var(--confirmada-texto); }
.aviso-cuenta { font-weight: 500; }
.aviso-cuenta b { font-weight: 700; }
.estado.gracia { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.estado.restringido { background: var(--cancelada-fondo); color: var(--cancelada-texto); }
.estado.suspendido { background: var(--cancelada-texto); color: var(--blanco); }
.estado.cancelado { background: var(--no-asistio-fondo); color: var(--no-asistio-texto); }
.estado.prueba { background: var(--confirmada-fondo); color: var(--confirmada-texto); }
.estado.activo { background: var(--atendida-fondo); color: var(--atendida-texto); }
.uso { margin: 4px 0 14px; }
.uso .uso-cab { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.uso .uso-cab b { font-variant-numeric: tabular-nums; }
.uso.lleno progress::-webkit-progress-value { background: var(--cancelada-texto); }
.uso.lleno progress::-moz-progress-bar { background: var(--cancelada-texto); }
.lista-funciones { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; }
.lista-funciones li::before { content: "✓ "; color: var(--atendida-texto); font-weight: 700; }
.calendario-cuenta { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; }
.aviso-item { border-left: 4px solid var(--borde-control); padding: 8px 12px; margin-bottom: 8px; background: var(--superficie-suave); border-radius: var(--radio-sm); }
.aviso-item.peligro { border-left-color: var(--cancelada-texto); }
.aviso-item.aviso { border-left-color: var(--pendiente-borde); }
.aviso-item.info { border-left-color: var(--confirmada-borde); }
.aviso-item.nuevo { background: var(--blanco); box-shadow: var(--sombra); }
.aviso-item p { margin: 4px 0 0; white-space: pre-line; font-size: 13.5px; }

/* --- Especialidades y servicios (Configuración) --- */
.especialidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 14px; }
.especialidad { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: var(--borde) solid var(--borde-color); border-radius: var(--radio); background: var(--fondo); }
.especialidad.activa { border-color: var(--dorado); background: var(--blanco); box-shadow: inset 4px 0 0 var(--dorado); }
.especialidad .principal { font-weight: 700; }
.especialidad .btn { align-self: flex-start; }
.grupo-servicios { margin-top: 22px; }
details.servicio, details.servicio-nuevo { border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 8px 12px; margin-bottom: 8px; background: var(--blanco); }
details.servicio.inactivo { opacity: .7; }
details.servicio > summary, details.servicio-nuevo > summary { cursor: pointer; font-weight: 600; }
details.servicio[open] > summary, details.servicio-nuevo[open] > summary { margin-bottom: 10px; }
.opciones-servicio { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 10px; }
.etiqueta-bot { background: var(--confirmada-fondo); color: var(--confirmada-texto); }
.catalogo-sin-activar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 4px; }
.catalogo-sin-activar .btn { min-height: 32px; padding: 4px 10px; font-weight: 500; }

/* --- Fases de un tratamiento --- */
.fases { list-style: none; padding: 0; margin: 0 0 14px; counter-reset: fase; }
.fase { counter-increment: fase; position: relative; padding: 10px 12px 10px 46px; border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); margin-bottom: 8px; background: var(--blanco); }
.fase::before { content: counter(fase); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; background: var(--fondo); color: var(--texto); border: 2px solid var(--borde-color); }
.fase.fase-completada::before { content: "✓"; background: var(--atendida-fondo); color: var(--atendida-texto); border-color: var(--atendida-texto); }
.fase.fase-agendada::before { background: var(--confirmada-fondo); color: var(--confirmada-texto); border-color: var(--confirmada-texto); }
.fase.fase-cancelada { opacity: .6; }
.fase-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fase details > summary { cursor: pointer; color: var(--texto-suave); font-size: 13px; margin-top: 6px; }
.insignia-fase { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--no-asistio-fondo); color: var(--no-asistio-texto); }
.insignia-fase.agendada { background: var(--confirmada-fondo); color: var(--confirmada-texto); }
.insignia-fase.completada { background: var(--atendida-fondo); color: var(--atendida-texto); }
.insignia-fase.cancelada { background: var(--cancelada-fondo); color: var(--cancelada-texto); }

/* --- Presupuestos --- */
.estado-presupuesto { font-family: var(--sans); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--no-asistio-fondo); color: var(--no-asistio-texto); vertical-align: middle; }
.estado-presupuesto.presentado { background: var(--pendiente-fondo); color: var(--pendiente-texto); }
.estado-presupuesto.aprobado, .estado-presupuesto.parcial { background: var(--atendida-fondo); color: var(--atendida-texto); }
.estado-presupuesto.rechazado { background: var(--cancelada-fondo); color: var(--cancelada-texto); }
.presupuesto-items tfoot th { text-align: right; font-weight: 600; }
.presupuesto-items .editar-item > summary { cursor: pointer; color: var(--texto-suave); font-size: 13px; }

/* --- Acceso con dominio único y checklist de alta --- */
.centrada { text-align: center; }
.lista-clinicas { display: grid; gap: 8px; margin-bottom: 14px; }
.lista-clinicas .btn[disabled] { opacity: .55; cursor: not-allowed; }
.checklist { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.checklist li { padding: 8px 12px; border-radius: var(--radio-sm); border: var(--borde) solid var(--borde-color); background: var(--blanco); }
.checklist li.ok { background: var(--atendida-fondo); color: var(--atendida-texto); }
.checklist li.falta { background: var(--cancelada-fondo); color: var(--cancelada-texto); }
.estado.alta { background: var(--pendiente-fondo); color: var(--pendiente-texto); }

/* --- Agenda por profesional y consultorio; solicitudes de cita (§15) --- */
.muestra-color { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--prof, var(--borde-color)); vertical-align: middle; }
.evento[class*="prof-"] { border-left: 5px solid var(--prof); }
.cal-cab.recurso b { font-size: 13px; line-height: 1.2; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 10px; }
.cal-rejilla.dias-2 { grid-template-columns: var(--cal-margen) repeat(2, minmax(120px, 1fr)); }
.cal-rejilla.dias-4 { grid-template-columns: var(--cal-margen) repeat(4, minmax(110px, 1fr)); }
.cal-rejilla.dias-5 { grid-template-columns: var(--cal-margen) repeat(5, minmax(110px, 1fr)); }
.cal-rejilla.dias-6 { grid-template-columns: var(--cal-margen) repeat(6, minmax(100px, 1fr)); }
.cal-rejilla.dias-8 { grid-template-columns: var(--cal-margen) repeat(8, minmax(100px, 1fr)); }
.horario-profesional { display: grid; grid-template-columns: auto 1fr 1fr; gap: 6px 10px; align-items: center; max-width: 420px; }
.sala { border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 10px 12px; margin-bottom: 8px; }
.sala.inactivo { opacity: .7; }
.sugerencias { display: grid; gap: 8px; margin-bottom: 14px; }
.sugerencia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 12px; border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); }
.sugerencia .principal { font-weight: 700; }
.sugerencia .btn { margin-left: auto; }
.espera-larga, .fila.espera-larga { color: var(--cancelada-texto); }
.fila.espera-larga { background: var(--cancelada-fondo); }
.datos-solicitud { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.datos-solicitud dt { font-weight: 600; color: var(--texto-suave); }
.datos-solicitud dd { margin: 0; }

/* --- Módulos por clínica y permisos por rol (§16) --- */
.centro { text-align: center; }
.tabla-permisos td, .tabla-permisos th { white-space: nowrap; }
.check-solo { display: inline-flex; justify-content: center; }
.check-solo input { width: 18px; height: 18px; accent-color: var(--marino); }
.lista-modulos { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 14px; }
.lista-modulos li.activo { color: var(--texto); }
.lista-modulos li.inactivo { color: var(--texto-suave); }
.modulo-no-incluido { max-width: 640px; }
.calculo-modulos { border: var(--borde) solid var(--borde-color); border-radius: var(--radio-sm); padding: 10px 12px; margin: 10px 0; }
.calculo-modulos table { width: 100%; }
.calculo-modulos .total td { font-weight: 700; border-top: var(--borde) solid var(--borde-color); }
.modulos-clinica { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 14px; margin: 8px 0; }
.modulos-clinica .check small { display: block; color: var(--texto-suave); font-weight: 400; }
.avisos-modulos { color: var(--cancelada-texto); }