/* Auris Medica · Portal interno
   Misma línea visual que AurisLearning: fondo azul noche, tarjetas redondeadas,
   azul lavanda del logo como color principal y verde agua como acento. */
:root {
  --fondo: #131930;
  --barra: #161d38;
  --panel: #1a2140;
  --panel-alto: #212a4e;
  --linea: #2b3559;
  --texto: #f1f3fb;
  --suave: #a4adc8;
  --azul: #6f82d8;          /* azul del logo */
  --azul-vivo: #6a7fe6;
  --azul-tenue: #2a3364;
  --verde: #86d6c8;
  --verde-boton: #3f8d87;
  --verde-fondo: #1a3440;
  --verde-linea: #2f5a60;
  --rojo: #ffaba3;
  --rojo-fondo: #45232d;
  --radio: 16px;
  --ancho: 1240px;
  --fuente: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--fuente); font-size: 16px; line-height: 1.5; color: var(--texto); background: var(--fondo);
}
main { flex: 1; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

/* --- Barra superior --------------------------------------------------------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 14px max(24px, calc((100vw - var(--ancho)) / 2)); background: var(--barra); border-bottom: 1px solid var(--linea);
}
.barra-izq { display: flex; align-items: center; gap: 28px; }
.marca { display: flex; flex-direction: column; line-height: 1.05; text-decoration: none; letter-spacing: .06em; font-size: 15px; }
.marca span { font-weight: 300; }
.marca b { font-weight: 700; font-size: 16px; }
.barra-titulo { display: flex; flex-direction: column; line-height: 1.3; }
.barra-titulo strong { font-weight: 600; font-size: 16px; }
.barra-titulo span { font-size: 13.5px; color: var(--suave); }
.barra-nav { display: flex; align-items: center; gap: 10px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--suave); background: transparent; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none;
}
a.pastilla:hover, .pastilla-boton:hover { color: var(--texto); border-color: var(--azul); }
.pastilla-boton { cursor: pointer; color: var(--texto); }
.pastilla-usuario { color: var(--texto); border-color: var(--azul); padding-left: 7px; }
.pastilla-usuario i {
  display: grid; place-items: center; width: 22px; height: 22px; font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--azul-vivo); border-radius: 50%;
}
.aviso-demo { padding: 8px 24px; text-align: center; font-size: 14px; background: var(--verde-fondo); color: var(--verde); }

/* --- Piezas comunes --------------------------------------------------------- */
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 32px 24px 72px; }
.tarjeta { padding: 28px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); }
.tarjeta-destacada { background: linear-gradient(135deg, var(--verde-fondo), #17253f 70%); border-color: var(--verde-linea); }
.tarjeta h2 { font-size: 21px; font-weight: 600; }
.tarjeta h2.separado { margin-top: 28px; }
.sobretitulo { margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--verde); }
.sobretitulo a { text-decoration: none; }
.sobretitulo a:hover { text-decoration: underline; }
h1 { font-size: clamp(27px, 3.2vw, 34px); font-weight: 600; line-height: 1.2; }
.bajada { margin-top: 10px; max-width: 62ch; font-size: 17px; font-weight: 300; color: #d5daec; }
.nota { margin-top: 16px; font-size: 14px; color: var(--suave); }
.error { margin-top: 14px; padding: 10px 14px; font-size: 14px; color: var(--rojo); background: var(--rojo-fondo); border-radius: 10px; }

label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 500; color: var(--suave); }
input[type="text"], input[type="password"], input[type="date"] {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--texto);
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px;
}
input:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }

.boton {
  display: inline-block; margin-top: 22px; padding: 12px 22px; font: inherit; font-weight: 600;
  color: #fff; border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: filter .15s, border-color .15s;
}
.boton-primario { background: var(--azul-vivo); }
.boton-secundario { background: transparent; border-color: var(--linea); }
.boton-primario:hover { filter: brightness(1.1); }
.boton-secundario:hover { border-color: var(--azul); }
.boton-ancho { width: 100%; }
.boton:disabled { opacity: .5; cursor: wait; }

/* --- Login ------------------------------------------------------------------ */
.login {
  max-width: var(--ancho); margin: 0 auto; padding: clamp(40px, 12vh, 130px) 24px 72px;
  display: grid; grid-template-columns: 1.2fr minmax(300px, 400px); gap: 64px; align-items: center;
}
.login h1 { font-size: clamp(34px, 4.6vw, 52px); }
.login .tarjeta h2 { margin-bottom: 14px; }

/* --- Menú --------------------------------------------------------------------- */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.contadores { display: flex; gap: 14px; }
.contador {
  min-width: 132px; padding: 16px 20px; text-align: center; background: rgba(19,25,48,.45); border: 1px solid var(--linea); border-radius: 14px;
}
.contador b { display: block; font-size: 26px; font-weight: 700; line-height: 1.2; }
.contador span { font-size: 13.5px; color: var(--suave); }
.titulo-seccion { margin: 36px 0 16px; font-size: 22px; font-weight: 600; }

.grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.app {
  display: flex; flex-direction: column; height: 100%; min-height: 200px; padding: 22px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s;
}
a.app:hover { background: var(--panel-alto); border-color: var(--azul); transform: translateY(-2px); }
.app-cima { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.etiqueta { padding: 3px 10px; font-size: 12.5px; font-weight: 600; color: var(--verde); background: var(--verde-fondo); border-radius: 8px; }
.etiqueta-gris { color: var(--suave); background: var(--panel-alto); }
.estado { padding: 3px 10px; font-size: 12.5px; font-weight: 500; color: var(--suave); background: var(--panel-alto); border-radius: 8px; }
.estado-activo { color: #dfe4ff; background: var(--azul-tenue); }
.app h3 { margin-top: 16px; font-size: 20px; font-weight: 600; }
.app p { margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--suave); }
.app-abrir { margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 500; color: var(--verde); }
.app-vacia { background: transparent; border-style: dashed; }
.app-vacia h3 { color: var(--suave); font-weight: 500; }

/* --- Herramienta de indicaciones ---------------------------------------------- */
.dos-columnas { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; margin-top: 18px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 4px; }
.periodo { margin-top: 8px; font-size: 18px; color: var(--suave); }
.progreso { height: 6px; margin-top: 22px; overflow: hidden; background: var(--panel-alto); border-radius: 3px; }
.progreso span { display: block; width: 35%; height: 100%; background: var(--verde); border-radius: 3px; animation: barrido 1.6s ease-in-out infinite; }
@keyframes barrido { from { transform: translateX(-110%); } to { transform: translateX(300%); } }

.cifra { font-size: 18px; color: var(--suave); }
.cifra b { font-size: 68px; font-weight: 700; line-height: 1.1; color: var(--texto); margin-right: 6px; }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin-top: 16px; font-size: 15px; }
.datos dt { color: var(--suave); }
.datos dd { font-weight: 600; }
.detalle { margin-top: 18px; border-top: 1px solid var(--linea); }
.detalle li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.rangos { margin-top: 12px; }
.rangos li { padding: 9px 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.rangos li.nota { border: 0; margin: 0; }

/* --- Pie ------------------------------------------------------------------------ */
.pie {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 20px max(24px, calc((100vw - var(--ancho)) / 2)); font-size: 13px; color: var(--suave); border-top: 1px solid var(--linea);
}

@media (max-width: 860px) {
  .login, .dos-columnas { grid-template-columns: 1fr; gap: 28px; }
  .grilla { grid-template-columns: 1fr 1fr; }
  .barra-titulo, .pastilla-usuario { display: none; }
}
@media (max-width: 560px) {
  .grilla, .campos { grid-template-columns: 1fr; }
  .contadores { width: 100%; }
  .contador { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}