/* ============================================================
   INICIO · la mesa «Consola Orvik · Inicio»
   16 de octubre de 2026

   Lo que la mesa pide y el tablero no tenía:

     encabezado   saludo 30/36 con el nombre en degradado, la fecha
                  debajo a 14/20, y los MEDIDORES a la derecha, en fila,
                  no debajo
     medidor      tarjeta de radio 20 · relleno 12 16 12 12 · hueco 12
                  anillo de 48 · el tanto por ciento a 20/26 · 600
                  etiqueta y detalle en un solo renglón de 12/16
     secciones    rótulo 11/14 · 600 · MAYÚSCULAS +6% en el tono tenue,
                  y a la derecha un enlace de 44 de alto en 13/18 · 500
     rejilla      6 columnas, hueco 16

   Las secciones NO se inventan: `tablero_tarjetas` devuelve una lista
   plana sin grupo, así que cada tarjeta se agrupa por el ÁREA a la que
   lleva su botón «Ver», que el panel ya conoce. El enlace de la derecha
   va al tablero de esa misma área.
   ============================================================ */

/* ── El encabezado ──
   Dos columnas y no una fila reordenada: el saludo y la fecha apilados
   a la izquierda, los medidores a la derecha ocupando el alto de los
   dos. Con `flex` y `order` el saludo se me iba a la derecha, porque un
   `flex: 1 1 100%` en la fecha partía la fila y dejaba al título solo
   en la suya. Una rejilla dice lo que quiero sin efectos de lado. */
#app .dash-hola {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo medidor"
    "fecha  medidor";
  align-items: center;
  column-gap: var(--e-5);
  row-gap: var(--e-1);
  margin: 0 0 var(--e-6);
}
#app .dash-hola h1 {
  grid-area: titulo;
  font: var(--t-pantalla);
  letter-spacing: -.01em;
  margin: 0;
  align-self: end;
}
#app .dash-hola h1::before { content: none }
#app .dash-nombre {
  background-image: var(--marca-degradado-texto);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#app .dash-hola > p {
  grid-area: fecha;
  font: var(--t-cuerpo);
  color: var(--texto-2);
  margin: 0;
  align-self: start;
}
#app #ini-medidor { grid-area: medidor; justify-self: end }

/* Bajo 900 no caben al lado: los medidores pasan debajo, a lo ancho. */
@media (max-width: 899px) {
  #app .dash-hola {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titulo" "fecha" "medidor";
    row-gap: var(--e-3);
  }
  #app #ini-medidor { justify-self: stretch }
}

/* ── Los medidores ── */
#app #ini-medidor { display: flex; flex-wrap: wrap; gap: var(--e-3) }
/* TRES COLUMNAS Y NO DOS. Habia puesto la etiqueta y el detalle en la
   MISMA celda --las dos en `grid-area: txt`-- creyendo que asi
   quedarian en un renglon. No: dos hijos en una celda de rejilla se
   apilan UNO ENCIMA DEL OTRO, y en el telefono se leia «Bsdae 5emana»,
   las dos palabras superpuestas. Cada uno necesita su columna. */
#app .med-uno {
  display: grid;
  grid-template-columns: 48px auto 1fr;   /* la 3a toma el sobrante para que el detalle quede pegado a su etiqueta y no al otro extremo */
  grid-template-areas: "aro pct pct" "aro lbl det";
  align-items: center;
  column-gap: var(--e-3);
  padding: var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid var(--linea);
}
#app .med-svg { grid-area: aro; width: 48px; height: 48px }
#app .med-pct { grid-area: pct; font: var(--t-seccion); align-self: end; justify-self: start }
#app .med-lbl,
#app .med-det { font: var(--t-nota); color: var(--texto-3) }
#app .med-lbl { grid-area: lbl; align-self: start; justify-self: start }
/* La mesa junta etiqueta y detalle en un renglón con un punto medio. */
#app .med-lbl::after { content: " ·"; color: var(--texto-3) }
#app .med-det { grid-area: det; align-self: start; justify-self: start; margin-left: var(--e-1) }

/* ── Las secciones ── */
#app .dash-seccion { display: flex; flex-direction: column; gap: var(--e-3); margin: 0 0 var(--e-5) }
#app .dash-seccion > .cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); padding: 0 var(--e-1);
}
#app .dash-seccion > .cab h2 {
  font: var(--t-etiqueta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin: 0;
}
#app .dash-seccion > .cab h2::before { content: none }
#app .dash-seccion > .cab a,
#app .dash-seccion > .cab button {
  min-height: var(--toque);
  display: inline-flex; align-items: center;
  font: var(--t-sec);
  color: var(--marca-principal-texto);
  background: none; border: 0; cursor: pointer; text-decoration: none;
  padding: 0;
}

/* ── La rejilla de 6 ── */
#app .dash-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--e-4) }
#app .dash-grid > .dash-card.p1 { grid-column: span 2 }
#app .dash-grid > .dash-card.p2 { grid-column: span 3 }
#app .dash-grid > .dash-card.p3 { grid-column: span 6 }

@media (max-width: 1023px) {
  #app .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  #app .dash-grid > .dash-card.p1,
  #app .dash-grid > .dash-card.p2 { grid-column: span 1 }
  #app .dash-grid > .dash-card.p3 { grid-column: span 2 }
}
@media (max-width: 768px) {
  #app .dash-grid { grid-template-columns: 1fr }
  #app .dash-grid > .dash-card.p1,
  #app .dash-grid > .dash-card.p2,
  #app .dash-grid > .dash-card.p3 { grid-column: span 1 }
  #app #ini-medidor { width: 100% }
  #app .med-uno { flex: 1 1 100% }
}

/* ════════════════════════════════════════════════════════════════
   EL ENCABEZADO ES EL MISMO EN TODOS LOS TABLEROS
   16 de octubre. El saludo del encabezado ya no se arma como antes:
   se arma como el de «Operación en vivo». Y no es sólo de esta
   pantalla: es un cambio estético general, para todas las áreas, para
   no repetirlo pantalla por pantalla.

   Lo que había: el saludo vivía DENTRO de una tarjeta con degradado de
   fondo navy-teal, texto blanco fijo y peso 800. Tres cosas que el
   anexo prohíbe expresamente --degradado de fondo en tarjetas, peso
   800, y color escrito a mano-- y que además no se parecen a ninguna
   mesa del lienzo.

   Lo que es ahora, y vale para Inicio Y para el tablero de cada área:
   texto plano sobre el fondo de la consola, 30/36 en peso 600, con la
   parte destacada --el nombre, o las últimas palabras-- en degradado de
   TEXTO, y debajo el renglón de contexto a 14/20. Exactamente el
   encabezado de «Operación en vivo».

   Se escribe aquí una sola vez para que ninguna área se quede atrás.
   ════════════════════════════════════════════════════════════════ */

#app .dash-hola {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  overflow: visible !important;
}
#app .dash-hola h1 {
  font: var(--t-pantalla) !important;
  letter-spacing: -.01em !important;
  color: var(--texto) !important;
}
#app .dash-hola > p {
  font: var(--t-cuerpo) !important;
  color: var(--texto-2) !important;
}

/* La parte destacada del título, en degradado de texto. Sólo aquí y
   sólo a 30 px: el anexo lo prohíbe en datos y por debajo de 24. */
#app .dash-nombre,
#app .dash-hola h1 em {
  background-image: var(--marca-degradado-texto);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  font-style: normal;
}

/* ── LA BARRA DE HERRAMIENTAS, EN TODOS LOS TABLEROS ──
   Era de Operación y ya es de todos: la miga de dónde estás, el
   buscador, la campana y el único botón con degradado de la pantalla.
   El estilo vive en `operacion-vivo.css` porque ahí nació; este
   renglón sólo deja constancia de que ya no es de una sola pantalla. */

/* ════════════════════════════════════════════════════════════════
   LO QUE SE VEÍA CORTADO EN LAS TARJETAS
   16 de octubre · «en el inicio me salen muchas cosas cortadas, en PC
   y en móvil».

   Tres causas, las tres de la rejilla nueva:

   1 · LAS TARJETAS NO SE ESTIRABAN. El lienzo lo pide con todas sus
       letras: «en una fila, todas las tarjetas se estiran al alto de la
       más alta». Sin eso, cada una media lo suyo y el texto de la más
       larga se salía por abajo --«Todavía sin datos» cortado a la mitad.

   2 · EL BOTÓN «VER» SE SALÍA. El encabezado de la tarjeta pone el
       título a la izquierda y el botón a la derecha; con un título de
       tres renglones --«Cumplimiento de rondines · 7 días»-- y sin decir
       que el botón no se encoge, el botón se iba fuera del borde.

   3 · LAS COLUMNAS ERAN DEMASIADO ANGOSTAS. Tres tarjetas en seis
       columnas dan 300 px, y ahí un título largo se parte en cuatro
       renglones. La hoja de distribución pide mínimo 200 para un
       indicador, pero una tarjeta con título Y botón Y pie necesita
       más: se le da un mínimo real y la rejilla reparte lo que caben.
   ════════════════════════════════════════════════════════════════ */

/* 1 · todas al alto de la más alta, y nada se recorta */
#app .dash-grid { align-items: stretch }
#app .dash-grid > .dash-card {
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
#app .dash-card .dash-cuerpo { flex: 1; min-height: 0 }

/* 2 · el encabezado: el título se ajusta, el botón no se encoge */
#app .dash-card .dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
}
#app .dash-card .dash-head h3 {
  flex: 1; min-width: 0;
  font: var(--t-tarjeta);
  overflow-wrap: anywhere;
}
#app .dash-card .dash-head .btn { flex: none; white-space: nowrap }

/* 3 · columnas con un mínimo que deje respirar al título */
#app .dash-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
@media (min-width: 1280px) {
  #app .dash-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  #app .dash-grid > .dash-card.p1 { grid-column: span 1 }
  #app .dash-grid > .dash-card.p2 { grid-column: span 2 }
  #app .dash-grid > .dash-card.p3 { grid-column: span 3 }
}
@media (max-width: 1279px) {
  #app .dash-grid > .dash-card.p1,
  #app .dash-grid > .dash-card.p2,
  #app .dash-grid > .dash-card.p3 { grid-column: auto }
}