/* ==========================================================================
   Tema THERMO.Lab para el panel AGE (dashboard, proyectos, configuración).

   style.css es la base genérica de la plantilla AGE; este archivo, cargado
   después, le pone la identidad de la aplicación de cálculo: fondo gris claro,
   tarjetas blancas, acento teal, banda navy arriba, Bebas Neue y Lato.
   Paleta tomada de frontend/thermo/thermo.css (claro y oscuro).
   ========================================================================== */

:root {
  --fondo: #EEF2F3;
  --fondo-2: #F5F8F9;
  --fondo-3: #E2F2F5;
  --superficie: #FFFFFF;
  --borde: #D6DEE1;
  --cian: #038298;
  --cian-suave: rgba(3, 130, 152, .10);
  --cian-borde: rgba(3, 130, 152, .45);
  --texto: #0C1F2A;
  --texto-suave: #3D5360;
  --texto-tenue: #566872;
  --ok: #1E7B4C;
  --alerta: #9A6400;
  --error: #B3261E;
  --sombra: 0 4px 14px rgba(12, 31, 42, .06);
  --radio: 10px;
  --ancho: 1240px;

  --tm-navy: #0C1F2A;
  --tm-teal: #038298;
  --tm-hielo: #45bed1;
  --tm-acento-tinta: #FFFFFF;
  --tm-hover: rgba(3, 130, 152, .05);
  --tm-titulo: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --tm-texto: 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #08151C; --fondo-2: #132A36; --fondo-3: #11313C; --superficie: #0F222D; --borde: #1F3644;
    --cian: #3BB4C8; --cian-suave: rgba(59, 180, 200, .12); --cian-borde: rgba(59, 180, 200, .45);
    --texto: #E4EDF0; --texto-suave: #B4C6CD; --texto-tenue: #93A8B1;
    --ok: #5CC48C; --alerta: #E3B04B; --error: #F08A80;
    --sombra: 0 4px 14px rgba(0, 0, 0, .3); --tm-acento-tinta: #06141B; --tm-hover: rgba(59, 180, 200, .06);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #08151C; --fondo-2: #132A36; --fondo-3: #11313C; --superficie: #0F222D; --borde: #1F3644;
  --cian: #3BB4C8; --cian-suave: rgba(59, 180, 200, .12); --cian-borde: rgba(59, 180, 200, .45);
  --texto: #E4EDF0; --texto-suave: #B4C6CD; --texto-tenue: #93A8B1;
  --ok: #5CC48C; --alerta: #E3B04B; --error: #F08A80;
  --sombra: 0 4px 14px rgba(0, 0, 0, .3); --tm-acento-tinta: #06141B; --tm-hover: rgba(59, 180, 200, .06);
  color-scheme: dark;
}

html, body {
  font-family: var(--tm-texto);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.contenido h2 {
  font-family: var(--tm-titulo);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: .03em;
  line-height: 1;
}
.contenido h3 { font-weight: 800; }

/* ------------------------------------------------------------- Barra navy */

.barra {
  min-height: 64px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(115deg, #0C1F2A 0%, #123547 60%, #164559 100%);
  border-bottom: 3px solid var(--tm-teal);
  color: #fff;
}
.barra-inicio {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
}
.barra-inicio:hover { background: none; }
.barra-inicio:focus-visible { outline: 2px solid var(--tm-hielo); outline-offset: 4px; border-radius: 4px; }
.barra-sutrak { height: 36px; width: auto; display: block; }
.barra-logo {
  padding-left: 14px;
  border-left: 1px solid #3a5868;
  font-weight: 900;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}
.barra-logo i { font-style: normal; color: var(--tm-hielo); }

.barra-titulo {
  color: #9fd3dd;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.barra-usuario { color: #d8e6ea; }
.barra-sesion { color: #9fb8c1; }
.barra-sesion.urgente { color: #f0c36a; }
.barra .boton-plano {
  margin: 0;
  border: 1px solid #2c4757;
  background: #163242;
  color: #fff;
  font-weight: 700;
  padding: .35rem .9rem;
}
.barra .boton-plano:hover:not(:disabled) { background: #1d4256; color: #fff; border-color: var(--tm-hielo); }

/* ------------------------------------------------------------------ Panel */

.contenido { padding-top: 1.75rem; }

.tm-eyebrow {
  margin: 0 0 .25rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cian);
}
.panel-encabezado { margin-bottom: 1.5rem; }
.panel-saludo { margin-top: .35rem; }

.tm-grupo { margin-bottom: 2rem; }
.tm-grupo-titulo {
  margin: 0 2px .8rem;
  font-size: .75rem !important;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.tm-rejilla { display: grid; gap: 16px; }
.tm-rejilla-calculo { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tm-rejilla-gestion { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Tarjeta: igual a las de la portada de THERMO.Lab */
.tarjeta-modulo {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(12, 31, 42, .05);
  color: var(--texto);
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-modulo:hover {
  transform: translateY(-2px);
  background: var(--superficie);
  border-color: var(--borde);
  box-shadow: 0 12px 28px rgba(12, 31, 42, .14);
}
.tarjeta-modulo:focus-visible { outline: 3px solid var(--tm-teal); outline-offset: 3px; }
a.tarjeta-modulo { display: flex; }

.tm-arte {
  display: block;
  height: 170px;
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(#f6fafb, #e7f0f3);
}
.tm-arte img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tm-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 20px 18px;
}
.tm-nombre {
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--texto);
}
.tm-nombre span { color: var(--cian); }
.tm-sub {
  margin-top: 5px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.tm-desc {
  flex: 1;
  margin: 8px 0 14px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--texto-tenue);
}
.tm-ir {
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--tm-teal);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

/* Gestión: tarjeta compacta con ícono de línea */
.tm-gestion { flex-direction: row; align-items: stretch; }
.tm-icono {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  margin: 20px 0 0 18px;
  fill: none;
  stroke: var(--tm-teal);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tm-gestion .tm-cuerpo { padding: 18px 18px 16px 16px; }
.tm-gestion .tm-nombre { font-size: 1.15rem; letter-spacing: 0; }
.tm-gestion .tm-desc { margin: 6px 0 12px; font-size: .84rem; }
.tm-gestion .tm-ir {
  padding: 0;
  background: none;
  color: var(--cian);
  font-size: .84rem;
}

/* -------------------------------------------- Tarjetas, métricas y secciones */

.tarjeta, .metrica, details.desplegable {
  background: var(--superficie);
  border-color: var(--borde);
  border-radius: 8px;
  box-shadow: var(--sombra);
}
.tarjeta > h3 { color: var(--cian); font-family: var(--tm-titulo); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; }
.metrica.destacada { background: var(--superficie); border-color: var(--borde); border-top: 3px solid var(--tm-teal); }
.metrica .etiqueta { font-weight: 700; letter-spacing: .1em; }
.metrica .valor { font-weight: 900; }
.seccion-titulo h3 { color: var(--cian); font-family: var(--tm-titulo); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; }

/* ----------------------------------------------------------------- Tablas */

.tabla-envoltura { background: var(--superficie); border-color: var(--borde); border-radius: 8px; }
thead th {
  background: var(--fondo-2);
  color: var(--texto-tenue);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--borde);
}
tbody td { border-bottom: 1px solid var(--borde); }
tbody tr:hover { background: var(--tm-hover); }

/* ------------------------------------------------------ Formularios y botones */

input, select, textarea { background: var(--superficie); border-radius: 6px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 3px var(--cian-suave);
}
.campo > label { font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--texto-tenue); }
/* Filtros en una sola fila: el buscador crece, el resto toma su ancho natural */
.barra-acciones select { width: auto; min-width: 180px; }
.barra-acciones input[type="search"] { flex: 1; min-width: 220px; width: auto; }

.boton {
  background: var(--superficie);
  border-color: var(--borde);
  border-radius: 6px;
  color: var(--texto);
  font-weight: 700;
}
.boton:hover:not(:disabled) { background: var(--fondo-2); border-color: var(--cian-borde); }
.boton-primario, .boton-primario.auto {
  background: var(--cian);
  border-color: var(--cian);
  color: var(--tm-acento-tinta);
}
.boton-primario:hover:not(:disabled) { background: var(--cian); border-color: var(--cian); filter: brightness(1.08); }
.boton-plano { background: none; border-color: transparent; color: var(--texto-tenue); }

/* -------------------------------------------------------- Estados y avisos */

.estado { font-weight: 700; border: 0; padding: .15rem .6rem; }
.estado-ok     { color: #197340; background: #e5f4ea; }
.estado-alerta { color: #8e5c08; background: #fff3db; }
.estado-error  { color: #B3261E; background: #FBEDEC; }
.estado-neutro { color: var(--texto-tenue); background: var(--fondo-2); }

.aviso-error  { color: var(--error);  background: #FBEDEC; }
.aviso-alerta { color: var(--alerta); background: #fff3db; }
.aviso-ok     { color: var(--ok);     background: #e5f4ea; }
.aviso-info   { color: var(--texto);  background: var(--cian-suave); }
.avisos .aviso { background-color: var(--superficie); color: var(--texto); }

.capa-carga { background: rgba(12, 31, 42, .35); }
.girador { border-color: var(--borde); border-top-color: var(--cian); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .estado-ok     { color: #8fe0ad; background: #173a2a; }
  :root:not([data-theme="light"]) .estado-alerta { color: #f0c36a; background: #3a2e12; }
  :root:not([data-theme="light"]) .estado-error  { color: #F08A80; background: #2A1716; }
  :root:not([data-theme="light"]) .aviso-error   { background: #2A1716; }
  :root:not([data-theme="light"]) .aviso-alerta  { background: #3a2e12; }
  :root:not([data-theme="light"]) .aviso-ok      { background: #173a2a; }
  :root:not([data-theme="light"]) .tm-arte       { background: #132A36; }
  :root:not([data-theme="light"]) .tarjeta-modulo:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
}
:root[data-theme="dark"] .estado-ok     { color: #8fe0ad; background: #173a2a; }
:root[data-theme="dark"] .estado-alerta { color: #f0c36a; background: #3a2e12; }
:root[data-theme="dark"] .estado-error  { color: #F08A80; background: #2A1716; }
:root[data-theme="dark"] .aviso-error   { background: #2A1716; }
:root[data-theme="dark"] .aviso-alerta  { background: #3a2e12; }
:root[data-theme="dark"] .aviso-ok      { background: #173a2a; }
:root[data-theme="dark"] .tm-arte       { background: #132A36; }

/* ------------------------------------------------------- Pantallas angostas */

@media (max-width: 640px) {
  .barra-sutrak { height: 28px; }
  .barra-logo { font-size: 1.15rem; padding-left: 10px; }
  /* Fila 1: logo y Salir; fila 2: título del módulo, solo si lo hay */
  .barra-usuario, .barra-sesion { display: none; }
  .barra-derecha { margin-left: auto; }
  .barra-titulo:empty { display: none; }
  .tm-arte { height: 140px; }
  .contenido h2 { font-size: 1.9rem; }
}