/* Web de gestión de Syntaktica.
   Marca: teal #0F7D7B (acciones), navy #1D2B31 (texto y menú), mint #3CC4C0 (Laura y "ahora").
   Fondo porcelana frío; superficies blancas; tipografía del sistema (no se descarga nada de fuera). */

:root {
  --tinta: #1D2B31;
  --tinta-2: #2A3B42;
  --teal: #0F7D7B;
  --teal-oscuro: #0B5F5D;
  --teal-claro: #E2F2F1;
  --menta: #3CC4C0;
  --menta-claro: #DBF4F3;
  --porcelana: #F2F6F5;
  --papel: #FFFFFF;
  --linea: #D5E0DE;
  --linea-suave: #E7EEED;
  --suave: #5A6A70;
  --ambar: #9A6412;
  --ambar-claro: #FBF0DC;
  --rojo: #A93838;
  --rojo-claro: #F9E4E2;
  --radio: 10px;
  --radio-pequeno: 6px;
  --alto-hueco: 3.1rem;
  --letra: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --sombra: 0 1px 2px rgba(29, 43, 49, .06), 0 4px 14px rgba(29, 43, 49, .05);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--porcelana); color: var(--tinta);
  font: 400 1rem/1.5 var(--letra); font-feature-settings: "tnum" 0;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); font-weight: 650; }
h2 { font-size: 1.08rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--teal-oscuro); }
small { color: var(--suave); }
code { font-size: .95em; background: var(--linea-suave); padding: .1em .35em; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 1.25rem 0; }
.num, .lc-hora, .bloque-hora, .rejilla-hora, .cifras dd, .cifra-grande { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--menta); outline-offset: 2px; border-radius: 4px; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Lo que está oculto (atributo hidden) no se ve nunca, aunque otro estilo le dé display (p. ej. las etiquetas de formulario). */
[hidden] { display: none !important; }
.saltar { position: absolute; left: -999px; top: .5rem; background: var(--papel); padding: .5rem 1rem; z-index: 50; }
.saltar:focus { left: .5rem; }
.js .sin-js { display: none; }

/* ------------------------------------------------------------ armazón --- */
.marco { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; min-height: 100dvh; }
.lateral {
  background: var(--tinta); color: #DCE6E5; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; padding: 1.5rem 0 1rem;
}
.lateral-cabeza { padding: 0 1rem 1rem; display: grid; gap: .9rem; }
.marca-lateral { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; padding: 0 .25rem;
  font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.lateral-contexto { margin: 0; display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: var(--radio-pequeno);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.lateral-contexto strong { color: #fff; font-size: .92rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.lateral-etiqueta, .menu-grupo { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7F9799; }
.menu { display: flex; flex-direction: column; padding: .25rem .75rem 1rem; gap: .1rem; flex: 1; }
.menu-grupo { margin: 1rem .75rem .35rem; }
.menu a, .menu-pronto {
  position: relative; display: flex; align-items: center; gap: .7rem; color: #C9D6D5; text-decoration: none;
  padding: .55rem .75rem; border-radius: var(--radio-pequeno); font-weight: 500; font-size: .94rem;
}
.menu .icono { flex: none; opacity: .8; }
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu a:hover .icono { opacity: 1; }
.menu a[aria-current="page"] { background: rgba(60, 196, 192, .14); color: #fff; font-weight: 600; }
.menu a[aria-current="page"] .icono { color: var(--menta); opacity: 1; }
.menu a[aria-current="page"]::before { content: ""; position: absolute; left: -.75rem; top: .45rem; bottom: .45rem; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--menta); }
.menu-volver { margin-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0 !important; padding-top: .9rem !important; }
.menu-pronto { color: #6F8689; cursor: default; }
.menu-pronto small { margin-left: auto; color: #8DA3A5; font-size: .66rem; border: 1px solid #3C5056; border-radius: 99px; padding: 0 .45rem; }
.lateral-pie { margin: .25rem .75rem 0; padding: .45rem; display: flex; align-items: center; gap: .25rem;
  border-radius: var(--radio-pequeno); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); }
.yo { flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none;
  padding: .3rem .35rem; border-radius: var(--radio-pequeno); }
.yo:hover, .yo[aria-current="page"] { background: rgba(255, 255, 255, .07); color: #fff; }
.yo-avatar { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--menta), var(--teal)); color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.yo-datos { display: grid; gap: .1rem; min-width: 0; line-height: 1.25; }
.yo-nombre { color: #fff; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo-permiso { display: flex; align-items: center; gap: .35rem; font-size: .74rem; color: #9DB2B3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yo-permiso::before { content: ""; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: #6F8689; }
.yo-permiso.rol-superadmin::before { background: var(--menta); }
.yo-permiso.rol-admin_clinica::before { background: #F2C14E; }
.yo-permiso.rol-recepcion::before { background: #8FB8F2; }
.yo-rol { justify-self: start; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 99px; padding: .05rem .45rem; background: #2E4248; color: #DCE7E6; }
.yo-rol.rol-superadmin { background: var(--menta); color: var(--tinta); }
.yo-rol.rol-admin_clinica { background: var(--teal-claro); color: var(--teal-oscuro); }
.rol-en-tabla { display: inline-block; margin: 0; font-size: .7rem; }
.salir { flex: none; background: none; border: 0; color: #93A9AA; width: 2.1rem; height: 2.1rem; cursor: pointer; padding: .45rem; border-radius: var(--radio-pequeno); display: grid; place-items: center; }
.salir:hover { color: #fff; background: rgba(229, 83, 83, .25); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.contenido { padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 120rem; width: 100%; }
/* Textos largos y formularios no se estiran de lado a lado en pantallas grandes. */
.contenido p, .formulario { max-width: 75rem; }
.contenido .tabla p { max-width: none; }
.barra-movil { display: none; }

.soporte {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--menta-claro); border-bottom: 2px solid var(--menta); padding: .6rem clamp(1rem, 3vw, 2.5rem);
}
.soporte p { margin: 0; }

/* ----------------------------------------------------------- cabeceras --- */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.cabecera-sub { color: var(--suave); margin: 0; }
.panel {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.25rem; margin-bottom: 1.25rem;
}
.panel h2 + .nota { margin-top: -.15rem; }
.panel-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.panel-cabeza h2 { margin: 0; }
.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 1.25rem; align-items: start; }
.columnas-inicio { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nota { color: var(--suave); font-size: .9rem; }
.vacio { background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--radio); padding: 2rem; text-align: center; }
.vacio-texto { color: var(--suave); margin: .25rem 0; }
.leyenda { display: flex; align-items: center; gap: .4rem 1rem; flex-wrap: wrap; color: var(--suave); font-size: .85rem; margin-top: .75rem; }
.muestra { display: inline-block; width: 1.4rem; height: .9rem; border-radius: 3px; vertical-align: -2px; }

/* -------------------------------------------------------------- avisos --- */
.aviso { border-radius: var(--radio-pequeno); padding: .75rem 1rem; margin: 1rem clamp(1rem, 3vw, 2.5rem) 0; border-left: 4px solid; }
.contenido .aviso, .entrar-caja .aviso { margin: 0 0 1rem; }
.aviso-ok { background: var(--teal-claro); border-color: var(--teal); }
.aviso-error { background: var(--rojo-claro); border-color: var(--rojo); }
.aviso-info { background: var(--ambar-claro); border-color: var(--ambar); }
.aviso-clave p:last-child { margin-bottom: 0; }
.clave code { font-size: 1.3rem; padding: .3rem .6rem; background: var(--papel); border: 1px solid var(--linea); user-select: all; }

/* ------------------------------------------------------------- botones --- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--teal); color: #fff; border: 1px solid var(--teal); border-radius: var(--radio-pequeno);
  padding: .6rem 1.1rem; font: 600 .95rem/1.2 var(--letra); text-decoration: none; cursor: pointer; min-height: 2.6rem;
}
.boton:hover { background: var(--teal-oscuro); border-color: var(--teal-oscuro); color: #fff; }
.boton-claro { background: var(--papel); color: var(--tinta); border-color: var(--linea); }
.boton-claro:hover { background: var(--teal-claro); color: var(--tinta); border-color: var(--teal); }
.boton-peligro { background: var(--papel); color: var(--rojo); border-color: var(--rojo); }
.boton-peligro:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton-pequeno { padding: .35rem .75rem; min-height: 2.2rem; font-size: .9rem; }
.boton-ancho { width: 100%; }
.boton-texto { background: none; border: 0; color: var(--teal); font: 500 .9rem var(--letra); cursor: pointer; padding: .25rem 0; text-decoration: underline; text-underline-offset: 2px; }
.boton-texto:hover { color: var(--teal-oscuro); }

/* -------------------------------------------------------- formularios --- */
.formulario { display: grid; gap: .9rem; }
.formulario > .boton, .formulario > div > .boton { justify-self: start; }
.formulario label { display: grid; gap: .3rem; font-weight: 550; font-size: .92rem; }
.formulario label small { font-weight: 400; }
input, select, textarea {
  font: 400 1rem var(--letra); color: var(--tinta); background: var(--papel);
  border: 1px solid #BFCFCC; border-radius: var(--radio-pequeno); padding: .55rem .7rem; min-height: 2.6rem; width: 100%;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-claro); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--teal); margin: 0; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .9rem; }
legend { font-weight: 650; padding: 0; margin-bottom: .6rem; }
.formulario-cita fieldset + fieldset { border-top: 1px solid var(--linea-suave); padding-top: 1rem; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .9rem; align-items: start; }
.casillas { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.casillas legend { width: 100%; }
.casillas-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.formulario label.casilla, label.casilla { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.acciones { display: flex; gap: .75rem; justify-content: flex-end; }
.formulario-linea { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.formulario-linea input[name="nombre"] { flex: 1 1 12rem; width: auto; }
.filtros { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.filtros input, .filtros select { width: auto; min-height: 2.2rem; padding: .3rem .6rem; font-size: .92rem; }


/* --------------------------------------------- nueva cita: pasos y selector --- */
.pasos-cita { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.paso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1.25rem; }
.paso-ancho { grid-column: 1 / -1; }
.paso h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.paso-num {
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--porcelana); border: 1px solid var(--linea); color: var(--suave); font-size: .9rem; font-weight: 700;
}
.paso.es-hecho .paso-num { background: var(--teal); border-color: var(--teal); color: #fff; }
.paso .buscador { margin-bottom: .75rem; }
.paso-alt { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--suave); margin: .75rem 0 0; }
.paciente-elegido {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap;
  background: var(--teal-claro); border-radius: var(--radio-pequeno); padding: .7rem .9rem;
}
.paciente-elegido strong { margin-right: .5rem; }
.resultados { list-style: none; padding: 0; margin: 0; border: 1px solid var(--linea); border-radius: var(--radio-pequeno); overflow: hidden; }
.resultados li + li { border-top: 1px solid var(--linea-suave); }
.resultados a { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .6rem .8rem; color: var(--tinta); text-decoration: none; }
.resultados a:hover { background: var(--teal-claro); }
.resultados span { color: var(--suave); font-variant-numeric: tabular-nums; }
.resultados .resultado-accion { color: var(--teal); font-weight: 600; font-size: .88rem; }
.resultados-aviso { margin-top: .5rem; background: var(--papel); }
.botonera .boton { white-space: nowrap; }

.selector { display: grid; grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.calendario { border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem; background: var(--papel); }
.cal-cabeza { display: grid; grid-template-columns: 2.4rem 1fr 2.4rem; align-items: center; margin-bottom: .6rem; }
.cal-cabeza h3 { margin: 0; text-align: center; font-size: 1.05rem; }
.cal-cabeza .boton { min-width: 2.4rem; padding: .3rem; font-size: 1.1rem; }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-semana { text-align: center; font-size: .78rem; font-weight: 600; color: var(--suave); padding-bottom: .2rem; }
.cal-dia {
  min-height: 3.3rem; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; text-decoration: none; color: var(--suave); font-variant-numeric: tabular-nums; position: relative;
}
.cal-num { font-weight: 650; font-size: 1rem; line-height: 1; }
.cal-info { font-size: .68rem; line-height: 1.1; }
.cal-dia.es-libre { background: var(--teal-claro); color: var(--teal-oscuro); border: 1px solid #BFE3E0; }
.cal-dia.es-libre .cal-info { color: var(--teal); font-weight: 600; }
a.cal-dia.es-libre:hover { background: #CDEAE8; color: var(--teal-oscuro); border-color: var(--teal); }
.cal-dia.es-elegido, a.cal-dia.es-elegido:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.cal-dia.es-elegido .cal-info { color: var(--menta); }
.cal-dia.es-completo { background: var(--linea-suave); color: #7D8C90; }
.cal-dia.es-cerrado { background: repeating-linear-gradient(135deg, var(--porcelana) 0 4px, var(--papel) 4px 8px); color: #93A3A6; }
.cal-dia.es-pasado { color: #B4C0C2; }
.cal-dia.es-fuera { color: #CBD5D6; background: none; }
.cal-dia.es-fuera .cal-info { display: none; }
.cal-dia.es-hoy::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--menta); }
.cal-leyenda { gap: .3rem .9rem; font-size: .78rem; }
.cal-muestra { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; }
.cal-muestra.es-libre { background: var(--teal-claro); border: 1px solid #BFE3E0; }
.cal-muestra.es-completo { background: var(--linea-suave); }
.cal-muestra.es-cerrado { background: repeating-linear-gradient(135deg, var(--linea) 0 2px, var(--papel) 2px 4px); }
.cal-vacio { width: 2.4rem; }

.huecos-dia h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.huecos-dia h4 { font-size: .95rem; margin: 1rem 0 .5rem; }
.huecos-dia h4 small { font-weight: 400; margin-left: .3rem; }
.huecos-vacio { border: 1px dashed var(--linea); border-radius: var(--radio); padding: 1.5rem; text-align: center; }
.huecos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.hueco-boton {
  display: grid; justify-items: start; gap: .05rem; text-align: left; cursor: pointer; font-family: var(--letra);
  background: var(--papel); border: 1px solid #BFCFCC; border-left: 4px solid var(--teal); border-radius: var(--radio-pequeno);
  padding: .5rem .65rem; color: var(--tinta); min-height: 3.6rem;
}
.hueco-hora { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--teal-oscuro); }
.hueco-quien, .hueco-donde { font-size: .78rem; color: var(--suave); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hueco-boton:hover:not(:disabled), .hueco-boton:focus-visible { background: var(--teal); border-color: var(--teal); color: #fff; }
.hueco-boton:hover:not(:disabled) span, .hueco-boton:focus-visible span { color: #fff; }
.hueco-boton.es-marcado { box-shadow: 0 0 0 3px var(--menta); border-color: var(--teal); }
.hueco-boton:disabled { cursor: not-allowed; opacity: .55; border-left-color: #93A3A6; }
.desplegable-nota { margin: 0 0 .5rem; border-top: 0; padding-top: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.opciones legend { width: 100%; margin-bottom: .3rem; font-weight: 600; font-size: .92rem; }
.confirmar-repetido { background: var(--ambar-claro); padding: .6rem .75rem; border-radius: var(--radio-pequeno); }

/* ------------------------------------------------------------ entrar --- */
.pagina-entrar { background: var(--tinta); }
.entrar { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.1fr 1fr; }
.entrar-marca {
  color: #fff; padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  position: relative; overflow: hidden;
}
.marca { display: flex; align-items: center; gap: .9rem; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 650; letter-spacing: -.02em; }
.entrar-lema { font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); color: #B9CBCB; max-width: 26ch; line-height: 1.35; margin: 0; }
.onda { width: 100%; max-width: 34rem; height: 5rem; }
.onda path { fill: none; stroke: var(--menta); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trazo 2.2s ease-out .2s forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.entrar-caja {
  background: var(--porcelana); padding: clamp(2rem, 6vw, 5rem); display: flex; flex-direction: column; justify-content: center;
}
.entrar-caja > * { width: 100%; max-width: 24rem; }
.marca-pequena { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; font-size: 1.35rem; font-weight: 700; color: var(--tinta); }
.entrar-ayuda, .entrar-pie { color: var(--suave); }
.entrar-pie { font-size: .88rem; margin-top: 1.25rem; }

/* ----------------------------------------------------- listas de citas --- */
.lista-citas { list-style: none; margin: 0; padding: 0; }
.lista-citas li + li { border-top: 1px solid var(--linea-suave); }
.lista-citas a { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .75rem; align-items: center; padding: .65rem .25rem; color: inherit; text-decoration: none; }
.lista-citas a:hover { background: var(--porcelana); }
.lc-hora { font-weight: 650; color: var(--teal); }
.lc-fecha { grid-column: 1 / -1; font-size: .85rem; color: var(--suave); font-weight: 500; margin-bottom: -.5rem; }
.lista-citas .lc-fecha + .lc-quien { grid-column: 1 / 3; }
.lc-quien { display: grid; min-width: 0; }
.lc-quien span { color: var(--suave); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-meta { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }

.estado { font-size: .78rem; font-weight: 600; border-radius: 99px; padding: .1rem .55rem; white-space: nowrap; background: var(--linea-suave); color: var(--suave); }
.estado-confirmada { background: var(--teal-claro); color: var(--teal-oscuro); }
.estado-pendiente_confirmar { background: var(--ambar-claro); color: var(--ambar); }
.estado-cancelada { background: var(--rojo-claro); color: var(--rojo); }
.estado-no_presentado { background: var(--rojo-claro); color: var(--rojo); }
.origen, .origen-laura { font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--suave); }
.origen-laura { color: var(--teal-oscuro); display: inline-flex; align-items: center; gap: .3rem; }
.origen-laura::before, .punto-laura { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px var(--menta-claro); display: inline-block; }

/* ---------------------------------------------------- cinta del día --- */
.cinta-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -.25rem; padding: .5rem .75rem .5rem .25rem; }
.cinta { min-width: 40rem; }
.cinta-regla { position: relative; height: 1.5rem; margin-left: 10rem; color: var(--suave); font-size: .75rem; font-variant-numeric: tabular-nums; }
.cinta-marca { position: absolute; transform: translateX(-50%); }
.cinta-fila { display: grid; grid-template-columns: 10rem 1fr; align-items: center; min-height: 2.6rem; }
.cinta-fila + .cinta-fila { border-top: 1px solid var(--linea-suave); }
.cinta-nombre { font-size: .88rem; font-weight: 550; padding-right: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cinta-pista {
  position: relative; height: 1.9rem; border-radius: 5px;
  background: repeating-linear-gradient(90deg, var(--porcelana) 0 1px, transparent 1px 100%), var(--porcelana);
}
.cinta-cerrado { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--linea-suave) 0 4px, transparent 4px 8px); }
.cinta-cita {
  position: absolute; top: 2px; bottom: 2px; border-radius: 4px; overflow: hidden; text-decoration: none;
  font-size: .72rem; font-weight: 600; color: #fff; background: var(--teal); padding: 0 .3rem; display: flex; align-items: center;
  border: 1px solid var(--papel); white-space: nowrap; min-width: 4px;
}
.cinta-cita span { overflow: hidden; text-overflow: ellipsis; }
.cinta-cita:hover { background: var(--teal-oscuro); color: #fff; z-index: 2; }
.cinta-cita.de-laura { box-shadow: inset 0 3px 0 var(--menta); }
.cinta-cita.cita-pendiente_confirmar { background: var(--ambar-claro); color: var(--ambar); border: 1px dashed var(--ambar); }
.cinta-cita.es-pasada { opacity: .45; }
.cinta-ahora { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--menta); z-index: 3; }
.cinta-ahora::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }

.cifras { margin: 0; display: grid; gap: .25rem; }
.cifras div { display: flex; justify-content: space-between; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--linea-suave); }
.cifras dt { color: var(--suave); }
.cifras dd { margin: 0; font-size: 1.35rem; font-weight: 650; }
.consumo-mini { margin-top: 1rem; }
.consumo-mini p { margin-bottom: .4rem; }
.cifra-grande { font-size: 2.2rem; font-weight: 650; margin-bottom: .5rem; }
.cifra-grande span { font-size: 1rem; color: var(--suave); font-weight: 400; }

.barra { height: .5rem; background: var(--linea-suave); border-radius: 99px; overflow: hidden; margin: .3rem 0 .5rem; min-width: 6rem; }
.barra span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.barra-aviso span { background: #D9A23B; }
.barra-llena span { background: var(--rojo); }

/* ------------------------------------------------------------ agenda --- */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.paginador { display: flex; gap: .35rem; }
.paginador .boton { min-width: 2.4rem; font-size: 1.05rem; }
.conmutador { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio-pequeno); overflow: hidden; margin-left: auto; background: var(--papel); }
.conmutador a { padding: .4rem .9rem; text-decoration: none; color: var(--tinta); font-weight: 550; font-size: .92rem; }
.conmutador a + a { border-left: 1px solid var(--linea); }
.conmutador a[aria-current="page"] { background: var(--tinta); color: #fff; }

.rejilla-scroll { overflow: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); max-height: calc(100vh - 14rem); max-height: calc(100dvh - 14rem); }
.rejilla { display: grid; position: relative; min-width: min-content; }
.rejilla-esquina, .rejilla-columna { position: sticky; top: 0; z-index: 4; background: var(--papel); border-bottom: 1px solid var(--linea); }
.rejilla-esquina { left: 0; z-index: 5; grid-row: 1; grid-column: 1; }
.rejilla-columna { grid-row: 1; padding: .6rem .75rem; font-weight: 650; font-size: .9rem; border-left: 1px solid var(--linea-suave); display: grid; }
.rejilla-columna small { font-weight: 400; }
.rejilla-hora {
  grid-column: 1; position: sticky; left: 0; z-index: 3; background: var(--papel); font-size: .75rem; color: var(--suave);
  padding: .15rem .6rem 0 0; text-align: right; border-top: 1px solid var(--linea-suave);
}
.rejilla-hora.en-punto { color: var(--tinta); font-weight: 600; border-top-color: var(--linea); }
.rejilla-celda { border-top: 1px solid var(--linea-suave); border-left: 1px solid var(--linea-suave); }
.rejilla-celda.cerrada { background: repeating-linear-gradient(135deg, var(--porcelana) 0 5px, var(--papel) 5px 10px); }
a.rejilla-celda.libre { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #D3E3E1; font-size: 1.1rem; font-weight: 600; }
a.rejilla-celda.libre:hover, a.rejilla-celda.libre:focus-visible { background: var(--teal-claro); color: var(--teal); }
.bloque, .tarjeta {
  display: grid; align-content: start; gap: .05rem; text-decoration: none; color: var(--tinta);
  background: var(--teal-claro); border-left: 4px solid var(--teal); border-radius: 5px; padding: .3rem .5rem; overflow: hidden;
  font-size: .82rem; line-height: 1.3; position: relative;
}
.bloque { margin: 2px 4px 2px 3px; z-index: 2; padding: .2rem .5rem; }
.bloque-linea { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .8rem; }
.bloque.es-corto .bloque-pie { display: none; }
.bloque:hover, .tarjeta:hover { background: #CDEAE8; color: var(--tinta); z-index: 3; }
.bloque strong, .tarjeta strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque-hora { font-weight: 650; color: var(--teal-oscuro); font-size: .76rem; }
.bloque-trat, .bloque-pie { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloque-pie { color: var(--suave); font-size: .76rem; }
.cita-pendiente_confirmar.bloque, .cita-pendiente_confirmar.tarjeta, .muestra.cita-pendiente_confirmar { background: var(--ambar-claro); border-left: 4px dashed var(--ambar); }
.cita-pendiente_confirmar .bloque-hora { color: var(--ambar); }
.cita-realizada.bloque, .cita-realizada.tarjeta, .cita-no_presentado.bloque, .cita-no_presentado.tarjeta { background: var(--linea-suave); border-left-color: #93A3A6; }
.muestra.cita-confirmada { background: var(--teal-claro); border-left: 4px solid var(--teal); }
.bloque.es-pasada { opacity: .6; }
.de-laura::after { content: ""; position: absolute; top: .4rem; right: .4rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--menta); box-shadow: 0 0 0 3px rgba(60, 196, 192, .25); }
.rejilla-ahora {
  height: 2px; background: var(--menta); z-index: 4; pointer-events: none; align-self: start;
  margin-top: calc(var(--dentro, 0) * var(--alto-hueco));
}
.rejilla-ahora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--menta); }
.lista-dia { display: none; }

.semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .75rem; }
.semana-dia { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem; min-height: 10rem; display: flex; flex-direction: column; gap: .5rem; }
.semana-dia h2 { margin: 0; font-size: .95rem; }
.semana-dia h2 a { color: var(--tinta); text-decoration: none; display: flex; justify-content: space-between; align-items: baseline; }
.semana-num { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.semana-dia.es-hoy { border-color: var(--teal); box-shadow: inset 0 3px 0 var(--menta); }
.semana-dia.es-hoy .semana-num { color: var(--teal); }
.semana-dia.es-cerrado { background: repeating-linear-gradient(135deg, var(--porcelana) 0 6px, var(--papel) 6px 12px); }
.semana-cerrado { color: var(--suave); font-size: .85rem; margin: 0; }
.semana-dia ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.semana-nueva { font-size: .85rem; font-weight: 600; text-decoration: none; margin-top: auto; }

/* ------------------------------------------------------------- tablas --- */
.tabla-envoltorio { overflow-x: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }
.panel .tabla-envoltorio { border: 0; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--linea-suave); vertical-align: top; }
.tabla thead th { font-size: .85rem; color: var(--suave); font-weight: 600; border-bottom-color: var(--linea); }
.tabla tbody tr:hover { background: var(--porcelana); }
.tabla tfoot th, .tabla tfoot td { font-weight: 650; border-bottom: 0; border-top: 1px solid var(--linea); }
.tabla .num { text-align: right; }
.tabla td .barra { max-width: 10rem; }
.tabla-compacta th, .tabla-compacta td { padding: .45rem 0; }
.tabla-compacta th { font-weight: 500; }
.tabla-compacta td { text-align: right; }
.tabla-horario td, .tabla-horario th { padding: .5rem .5rem .5rem 0; vertical-align: middle; }
.franja { display: inline-flex; align-items: center; gap: .4rem; }
.franja input { width: 7.5rem; }
.negativo { color: var(--rojo); }
tr.inactivo td, li.inactivo { opacity: .6; }

.consent { font-size: .82rem; font-weight: 600; border-radius: 99px; padding: .1rem .6rem; }
.consent-si { background: var(--teal-claro); color: var(--teal-oscuro); }
.consent-no { background: var(--linea-suave); color: var(--suave); }
.consent-baja { background: var(--rojo-claro); color: var(--rojo); }
.consent-nada { color: var(--suave); font-weight: 400; }

.buscador { display: flex; gap: .5rem; margin-bottom: 1rem; max-width: 36rem; }
.buscador-filtros { flex-direction: row; flex-wrap: wrap; align-items: center; max-width: none; }
.buscador-filtros input[type="search"] { flex: 1 1 18rem; max-width: 30rem; }
.buscador-filtros .filtros { flex: 10 1 auto; }
.filtros select.es-activo { border-color: var(--teal); background-color: var(--teal-claro); }
.tabla .tel, .tabla .fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-pacientes th { white-space: nowrap; }
.tabla-pacientes td:first-child { min-width: 11rem; }
.tabla th a.ordenar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.tabla th a.ordenar:hover { color: var(--tinta); }
.tabla th a.es-activa { color: var(--tinta); }
.ordenar .flecha { font-size: .7rem; color: var(--suave); opacity: .6; }
.ordenar.es-activa .flecha { color: var(--teal); opacity: 1; }
.orden-lista { font-size: .9rem; color: var(--suave); margin: 0 0 .5rem; }
.paginacion { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1rem; color: var(--suave); }
.buscador input[type="search"] {
  padding-left: 2.4rem; background-repeat: no-repeat; background-position: .8rem center; background-size: 1.05rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F8689' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
}
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0 0 1rem; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.desplegable { margin-top: 1rem; border-top: 1px solid var(--linea-suave); padding-top: .75rem; }
.desplegable summary, .lista-editable summary { cursor: pointer; font-weight: 600; color: var(--teal); }
.desplegable[open] summary { margin-bottom: .75rem; }
.historial { padding-left: 1.1rem; margin: 0; display: grid; gap: .35rem; font-size: .9rem; }
.pasos { padding-left: 1.2rem; display: grid; gap: .4rem; }
.modulos { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.modulos li::before { content: "○"; color: var(--suave); margin-right: .5rem; }
.modulos li.modulo-si::before { content: "●"; color: var(--teal); }

.pestanas { display: flex; gap: .25rem; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--linea); margin-bottom: 1.25rem; scrollbar-width: thin; }
.pestanas a { padding: .6rem .9rem; text-decoration: none; color: var(--suave); font-weight: 550; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--tinta); }
.pestanas a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--teal); }

.lista-simple, .lista-editable { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linea-suave); }
.lista-simple li > span:first-child { display: grid; min-width: 0; overflow-wrap: anywhere; }
.botonera { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; }
.lista-editable > li { border-bottom: 1px solid var(--linea-suave); padding: .7rem 0; }
.lista-editable summary { color: var(--tinta); list-style-position: outside; }
.lista-editable summary span { color: var(--suave); font-weight: 400; margin-left: .35rem; }
.lista-editable details[open] > summary { margin-bottom: .9rem; }
.lista-editable details > form { padding: 0 0 .5rem 1rem; border-left: 3px solid var(--teal-claro); }
.etiqueta { font-size: .75rem; border: 1px solid var(--linea); border-radius: 99px; padding: 0 .5rem; }

.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 3rem; }
.ver-clave {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); border: 0; background: none;
  color: var(--suave); padding: .4rem; cursor: pointer; border-radius: 6px; display: flex; line-height: 0;
}
.ver-clave:hover, .ver-clave[aria-pressed="true"] { color: var(--teal); background: var(--teal-claro); }

/* Enlace «← Volver a…» encima del título de las pantallas de detalle. */
.volver { display: inline-block; margin-bottom: .5rem; font-size: .92rem; font-weight: 600; text-decoration: none; }
.volver:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- modales --- */
.modal { border: 0; border-radius: var(--radio); padding: 1.25rem 1.5rem 1.5rem; width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); overflow-y: auto; box-shadow: 0 20px 60px rgba(29, 43, 49, .35); color: var(--tinta); background: var(--papel); }
.modal::backdrop { background: rgba(29, 43, 49, .55); }
.modal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-cabeza h2 { margin: 0; }
.modal-cerrar { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--suave); padding: .2rem .5rem; border-radius: 6px; }
.modal-cerrar:hover { background: var(--linea-suave); color: var(--tinta); }
/* Sin JavaScript, el modal se ve como un recuadro normal dentro de la página. */
html:not(.js) .modal { display: block; position: static; box-shadow: none; border: 1px solid var(--linea); margin: 1rem 0; width: auto; }
html:not(.js) .modal-cerrar, html:not(.js) [data-abrir-dialogo], html:not(.js) .modal [data-cerrar-dialogo] { display: none; }

/* ------------------------------------------------------------------ voces --- */
.voz-con-muestra { display: flex; gap: .5rem; align-items: center; }
.voz-con-muestra select { flex: 1; }
.escuchar-voz { white-space: nowrap; min-width: 8rem; }
.nota-campo { color: var(--suave); font-size: .85rem; display: block; margin-top: -.5rem; }
html:not(.js) .escuchar-voz { display: none; }

/* --------------------------------------------------------------- mensajes --- */
.aviso-simulacion { background: var(--ambar-claro); border-color: var(--ambar); }
.barra-envio { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.col-marcar { width: 2.5rem; }
.tabla .col-marcar input { margin-top: .15rem; }
.columnas-mensaje { align-items: start; }
.columnas-mensaje textarea { font: inherit; }
.etiqueta-campo { margin: 1rem 0 .35rem; color: var(--suave); font-size: .9rem; }
.burbuja-whatsapp {
  background: #DCF8C6; color: #1D2B31; border-radius: 12px 12px 12px 3px; padding: .7rem .9rem; max-width: 30rem;
  white-space: pre-line; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); margin-bottom: .75rem;
}
.botones-whatsapp { display: flex; gap: .35rem; margin-top: .6rem; flex-wrap: wrap; white-space: normal; }
.botones-whatsapp span { background: #fff; color: #128C7E; border-radius: 8px; padding: .25rem .6rem; font-size: .85rem; font-weight: 600; }
.llamar-si-no { margin-top: 1rem; }
.llamar-si-no select { width: auto; display: inline-block; min-height: 2rem; padding: .2rem .5rem; margin-left: .25rem; }
.botonera-izquierda { justify-content: flex-start; }
.botones-simular { display: flex; gap: .35rem; flex-wrap: wrap; }
.tipo-mensaje { font-weight: 600; }
.respuesta { font-size: .8rem; font-weight: 600; border-radius: 99px; padding: .1rem .55rem; white-space: nowrap; background: var(--linea-suave); color: var(--suave); }
.respuesta-confirmo, .respuesta-interesa { background: var(--teal-claro); color: var(--teal-oscuro); }
.respuesta-cancelar, .respuesta-baja { background: var(--rojo-claro); color: var(--rojo); }
.respuesta-cambiar { background: var(--ambar-claro); color: var(--ambar); }

/* ---------------------------------------------------- llamadas y recados --- */
.resultado { font-size: .78rem; font-weight: 600; border-radius: 99px; padding: .1rem .55rem; white-space: nowrap; background: var(--linea-suave); color: var(--suave); }
.resultado-cita_reservada, .resultado-cita_cambiada { background: var(--teal-claro); color: var(--teal-oscuro); }
.resultado-cita_cancelada, .resultado-error { background: var(--rojo-claro); color: var(--rojo); }
.resultado-recado { background: var(--ambar-claro); color: var(--ambar); }
.celda-resumen { max-width: 32rem; }
.resumen-llamada { font-size: 1.05rem; margin: 0 0 1rem; }
.transcripcion { display: grid; gap: .5rem; max-height: 70vh; overflow-y: auto; }
.transcripcion p { margin: 0; padding: .5rem .75rem; border-radius: var(--radio); max-width: 90%; }
.transcripcion strong { display: block; font-size: .78rem; color: var(--suave); }
.habla-laura { background: var(--menta-claro); }
.habla-paciente { background: var(--porcelana); justify-self: end; }
.lista-recados li > span:first-child { gap: .2rem; }
.recado-motivo { white-space: pre-line; }

/* ------------------------------------------------------------ tablet --- */

/* ------------------------------------------------------- estadísticas --- */
/* Gráficas hechas con HTML y CSS (geometría en backend/gestion/graficos.py): llamadas en barras verde agua,
   citas del asistente en línea azul noche; el mapa de horas usa cinco tonos del verde de la marca. */
.periodos { margin-bottom: .75rem; }
.periodo-a-medida { margin-bottom: 1.25rem; color: var(--suave); font-size: .92rem; }
.periodo-a-medida.es-activo input { border-color: var(--teal); background-color: var(--teal-claro); }
.texto-error { color: var(--rojo); font-weight: 600; }
.texto-aviso { color: var(--ambar); font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; margin-bottom: 1.25rem; }
.kpi { background: var(--papel); padding: 1rem 1.25rem 1.1rem; }
.kpi p { margin: 0; }
.kpi-cifra { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem); font-weight: 650; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-nombre { margin-top: .3rem !important; font-weight: 550; line-height: 1.3; }
.kpi-detalle { color: var(--suave); font-size: .88rem; margin-top: .2rem !important; min-height: 1.3em; }
.kpi-asistente { box-shadow: inset 4px 0 0 var(--menta); }
.vacio-estadisticas { text-align: center; padding: 2.5rem 1.25rem; }
.vacio-estadisticas .nota { max-width: 36rem; margin: 0 auto; }

.leyenda-arriba { margin: 0; }
.leyenda i, .leyenda-lista i { display: inline-block; flex: none; }
.marca-barra { width: .8rem; height: .8rem; border-radius: 3px; background: #7CC3BF; margin-right: .35rem; vertical-align: -1px; }
.marca-linea { width: 1.2rem; height: 2px; background: var(--tinta); margin-right: .35rem; vertical-align: 3px; position: relative; }
.marca-linea::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--tinta); }

.grafica { display: grid; grid-template-columns: 2rem 1fr; grid-template-rows: 14rem auto; column-gap: .5rem; margin-top: .5rem; }
.grafica-eje { position: relative; font-size: .75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.grafica-eje span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.grafica-zona { position: relative; border-bottom: 1px solid var(--tinta-2); }
.grafica-guia { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linea-suave); }
.grafica-columnas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; }
.columna { position: relative; display: flex; align-items: flex-end; justify-content: center; outline-offset: 0; }
.columna.es-finde { background: rgba(213, 224, 222, .28); }
.columna-barra { width: min(100%, 2.4rem); background: #7CC3BF; border-radius: 4px 4px 0 0; min-height: 0; }
.columna:hover .columna-barra, .columna:focus-visible .columna-barra { background: var(--teal); }
.columna.es-hoy .columna-barra { background: var(--teal); }
.tip { display: none; position: absolute; bottom: calc(100% + .4rem); left: 50%; transform: translateX(-50%); z-index: 5; background: var(--tinta); color: #fff; font-size: .8rem; line-height: 1.35; padding: .4rem .6rem; border-radius: var(--radio-pequeno); white-space: nowrap; pointer-events: none; }
.tip strong { display: block; font-weight: 650; }
.columna { height: 100%; }
.columna .tip { bottom: auto; top: .25rem; }
.columna:hover .tip, .columna:focus-visible .tip { display: block; }
.grafica-columnas .columna:first-child .tip, .grafica-columnas .columna:nth-child(2) .tip { left: 0; transform: none; }
.grafica-columnas .columna:last-child .tip, .grafica-columnas .columna:nth-last-child(2) .tip { left: auto; right: 0; transform: none; }
.grafica-linea { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.grafica-linea polyline { fill: none; stroke: var(--tinta); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.grafica-puntos { position: absolute; inset: 0; pointer-events: none; }
.grafica-puntos span { position: absolute; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 2px var(--papel); }
.grafica-fechas { grid-column: 2; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; font-size: .72rem; color: var(--suave); text-align: center; padding-top: .3rem; font-variant-numeric: tabular-nums; }
.grafica-fechas span { white-space: nowrap; overflow: visible; }

.mapa-scroll { overflow-x: auto; margin: .25rem -.25rem 0; padding: 0 .25rem; }
.mapa { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: calc(3rem + var(--horas) * 1.9rem + 6rem); table-layout: fixed; }
.mapa th { font-size: .75rem; font-weight: 500; color: var(--suave); font-variant-numeric: tabular-nums; }
.mapa thead th { text-align: center; padding: 0 0 .15rem; }
.mapa thead th.mapa-total { text-align: left; padding-left: .5rem; }
.mapa tbody th, .mapa tfoot th { text-align: left; width: 2.6rem; padding-right: .25rem; color: var(--tinta); font-weight: 550; }
.mapa tbody td { height: 2rem; border-radius: 4px; background: var(--porcelana); }
.mapa tbody td.vacia { background: var(--porcelana); box-shadow: inset 0 0 0 1px var(--linea-suave); }
.mapa tbody td:not(.mapa-total):hover { box-shadow: inset 0 0 0 2px var(--tinta); }
.mapa .mapa-total { width: 5.5rem; background: none; box-shadow: none; padding-left: .5rem; font-size: .85rem; }
.mapa td.mapa-total { position: relative; }
.mapa-barra { display: inline-block; height: .55rem; background: #7CC3BF; border-radius: 0 3px 3px 0; max-width: calc(100% - 2rem); margin-right: .35rem; vertical-align: 1px; }
.mapa tfoot td { height: 2.4rem; vertical-align: bottom; padding: 0; }
.mapa-columna { display: block; width: 70%; margin: 0 auto; background: #7CC3BF; border-radius: 3px 3px 0 0; }
.mapa-tono { width: 1.1rem; height: .8rem; border-radius: 3px; }
.leyenda-mapa { gap: .5rem; margin-bottom: .25rem; }
.mapa-tonos { display: inline-flex; gap: 3px; }

.barras-h { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.barras-h li { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr 2.5rem; gap: .75rem; align-items: center; }
.barras-h-nombre { font-size: .92rem; }
.barras-h-pista { height: .7rem; }
.barras-h-pista span { display: block; height: 100%; background: #7CC3BF; border-radius: 0 4px 4px 0; min-width: 2px; }
.barras-h .num { text-align: right; font-weight: 600; }

.apilada { display: flex; gap: 2px; height: 1.1rem; margin: .25rem 0 .6rem; }
.apilada span:first-child { border-radius: 4px 0 0 4px; }
.apilada span:last-child { border-radius: 0 4px 4px 0; }
.apilada span:only-child { border-radius: 4px; }
.p-confirma { background: var(--teal); }
.p-cambia { background: #D9A23B; }
.p-cancela { background: var(--rojo); }
.p-nada { background: var(--linea); }
.leyenda-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; color: var(--suave); }
.leyenda-lista li { display: flex; align-items: center; gap: .35rem; }
.leyenda-lista i { width: .75rem; height: .75rem; border-radius: 3px; }
.leyenda-lista strong { color: var(--tinta); }

.comparar { display: flex; align-items: center; gap: .5rem; min-width: 6.5rem; }
.comparar-barra { display: block; height: .6rem; background: #7CC3BF; border-radius: 0 3px 3px 0; max-width: 4.5rem; flex: none; }
.tabla-comparar td small { display: block; }
.tabla-comparar td:first-child { min-width: 11rem; }
.tabla-comparar td:last-child { min-width: 9rem; }


/* ------------------------------------------- verificación en dos pasos --- */
.campo-codigo { font-size: 1.35rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 12rem; }
.pasos-activar { margin: 0; padding-left: 1.4rem; display: grid; gap: 1.5rem; }
.pasos-activar li::marker { font-weight: 650; color: var(--teal); }
.pasos-activar h2 { margin-bottom: .35rem; }
.qr { display: inline-block; background: #fff; padding: .5rem; border: 1px solid var(--linea); border-radius: var(--radio-pequeno); margin: .25rem 0 .75rem; }
.qr svg { display: block; width: 12rem; height: auto; }
.clave-totp { font-size: 1.05rem; letter-spacing: .06em; overflow-wrap: anywhere; }
.formulario-corto { max-width: 22rem; }
.codigos { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; max-width: 36rem; }
.codigos code { display: block; text-align: center; font-size: 1.05rem; padding: .45rem; letter-spacing: .05em; }

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .columnas-inicio { grid-template-columns: 1fr; }
  .selector { grid-template-columns: 1fr; }
  .calendario { max-width: 30rem; }
}

/* ------------------------------------------------- móvil y tablet vertical --- */
@media (max-width: 860px) {
  .marco { grid-template-columns: 1fr; }
  .pasos-cita { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: min(18rem, 85vw); z-index: 40; transform: translateX(-100%);
    transition: transform .2s ease-out; box-shadow: 0 0 0 100vmax rgba(29, 43, 49, 0);
  }
  .menu-abierto .lateral { transform: none; box-shadow: 0 0 0 100vmax rgba(29, 43, 49, .45); }
  .barra-movil {
    display: flex; align-items: center; gap: .75rem; background: var(--tinta); color: #fff;
    padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 30;
  }
  .barra-movil-icono { flex: none; border-radius: 7px; margin-left: -.25rem; }
  .barra-movil-titulo { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .boton-menu { background: none; border: 0; padding: .5rem; margin: -.25rem 0 -.25rem -.5rem; cursor: pointer; }
  .hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 1.3rem; height: 2px; background: #fff; border-radius: 2px; position: relative; }
  .hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; }
  .hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; }
  .contenido { padding: 1.25rem 1rem 3rem; }
  .cabecera { align-items: flex-start; }
  .conmutador { margin-left: 0; }
}

@media (max-width: 640px) {
  .entrar { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrar-marca { padding: 2rem 1.25rem 1rem; gap: .75rem; }
  .entrar-lema { font-size: 1rem; }
  .onda { height: 3rem; }
  .entrar-caja { padding: 2rem 1.25rem; border-radius: 16px 16px 0 0; justify-content: flex-start; }
  .rejilla-scroll, .filtros select[name="por"] { display: none; }
  .calendario { padding: .6rem; max-width: none; }
  .cal-dia { min-height: 2.9rem; }
  .cal-info-largo { display: none; }
  .huecos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resultados a { grid-template-columns: 1fr auto; }
  .resultados .resultado-accion { grid-column: 1 / -1; }
  .paso { padding: 1rem; }
  .cinta { min-width: 34rem; }
  .cinta-fila { grid-template-columns: 7rem 1fr; }
  .cinta-regla { margin-left: 7rem; }
  .lista-dia { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 .75rem; }
  .lista-dia .lista-citas a { grid-template-columns: 3.2rem 1fr; }
  .lista-dia .lc-meta { grid-column: 2; justify-content: flex-start; }
  .semana { grid-template-columns: 1fr; }
  .semana-dia { min-height: 0; }
  .filtros { width: 100%; }
  .filtros input, .filtros select { flex: 1 1 9rem; }
  .datos { grid-template-columns: 1fr; gap: .1rem; }
  .datos dd { margin-bottom: .5rem; }
  /* Tablas como tarjetas */
  .tabla-envoltorio:not(.panel .tabla-envoltorio) { background: none; border: 0; }
  .tabla thead { display: none; }
  .tabla:not(.tabla-compacta):not(.tabla-horario) tr { display: grid; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: .6rem; padding: .5rem .75rem; }
  .tabla:not(.tabla-compacta):not(.tabla-horario) td, .tabla:not(.tabla-compacta):not(.tabla-horario) tfoot th { border: 0; padding: .2rem 0; text-align: left; }
  .tabla:not(.tabla-compacta):not(.tabla-horario) td[data-titulo]::before { content: attr(data-titulo) ": "; color: var(--suave); font-size: .85rem; }
  .tabla:not(.tabla-compacta):not(.tabla-horario) td:first-child::before { content: none; }
  .tabla-horario thead { display: table-header-group; }
  .tabla-horario th, .tabla-horario td { display: block; padding: .2rem 0; }
  .tabla-horario thead th:not(:first-child) { display: none; }
  .tabla-horario tbody tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--linea-suave); }
  .franja input { width: 100%; }
  .lista-simple li { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .botonera { justify-content: flex-start; }
  .grafica { grid-template-rows: 11rem auto; grid-template-columns: 1.6rem 1fr; column-gap: .35rem; }
  .grafica-columnas, .grafica-fechas { gap: 1px; }
  .kpi { padding: .8rem .9rem .9rem; }
  .kpi-cifra { font-size: 1.6rem; white-space: nowrap; }
  .kpi-nombre { font-size: .92rem; }
  .barras-h li { grid-template-columns: minmax(6rem, 8rem) 1fr 2rem; gap: .5rem; }
  .periodo-a-medida label { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .onda path { stroke-dashoffset: 0; }
}

@media print {
  .lateral, .barra-movil, .herramientas, .soporte, .boton { display: none !important; }
  .marco { display: block; }
  body { background: #fff; }
}

/* Permisos al añadir un usuario: cada opción con su explicación debajo. */
.opciones-rol label.casilla { align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: var(--radio-pequeno); }
.opciones-rol label.casilla:has(input:checked) { border-color: var(--teal); background: var(--teal-claro); }
.opciones-rol label.casilla input { margin-top: .2rem; }
.opciones-rol label.casilla small { display: block; color: var(--suave); margin-top: .1rem; }