/* ============================================================================
   inicio_modern.css — pantalla de inicio (tablero)
   ----------------------------------------------------------------------------
   Se carga DESPUES de custom.css y de sidebar_modern.css.

   TODO esta acotado a  .ifx-inicio , clase que se agrega al
   <div class="right_col"> de las pantallas de inicio. Fuera de ahi este archivo
   no aplica a nada: ninguna otra pantalla del sistema cambia.

   ACABADO: superficies de vidrio sobre un campo azul. Las tarjetas son
   translucidas y desenfocan lo que tienen detras (backdrop-filter), con un
   filo superior iluminado que simula el reflejo especular del borde. Hay
   respaldo solido para navegadores sin backdrop-filter y para quien pide
   menos transparencia.
   ========================================================================== */

/* Los tokens se declaran en las DOS anclas: en el <body> de las pantallas de
   inicio (.ifx-inicio-pagina) y en el .right_col (.ifx-inicio). Se necesita la
   del body porque el <footer> del tema va FUERA de .right_col y tambien tiene
   que poder leerlos. */
/* Estas variables son la paleta de toda la aplicación, no solo del tablero:
   css.php carga esta hoja en TODAS las pantallas, así que aquí es donde vive.
   El nombre del archivo se quedó del primer rediseño y no se cambió para no
   tener que tocar css.php. Cuando una pantalla nueva necesite la paleta, se
   añade su clase a esta lista y ya; duplicar los colores es como se separan. */
.ifx-inicio-pagina,
.ifx-inicio,
.ifx-calendario-pagina,
.ifx-calendario,
.ifx-solicitudes-pagina,
.ifx-solicitudes,
.ifx-ingenieros-pagina,
.ifx-ingenieros,
.ifx-equipos-pagina,
.ifx-equipos,
.ifx-clientes-pagina,
.ifx-clientes,
.ifx-polizas-pagina,
.ifx-polizas,
.ifx-usuarios-pagina,
.ifx-usuarios {
  /* ---- vidrio ---- */
  /* La opacidad del vidrio no es libre: es lo que fija el contraste del texto.
     Medido sobre el render, con menos de ~.76 de blanco las etiquetas chicas
     caen por debajo de 4.5:1 en la parte baja del tablero, donde el campo azul
     es mas oscuro. El efecto se sostiene con el filo iluminado, el desenfoque
     y la sombra, no con la transparencia a ultranza. */
  --ifx-vidrio:        linear-gradient(157deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.80) 55%, rgba(238,242,252,.82) 100%);
  --ifx-vidrio-alto:   linear-gradient(157deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 100%);
  --ifx-filo:          rgba(255, 255, 255, .72);
  --ifx-filo-alto:     rgba(255, 255, 255, .96);
  --ifx-anillo:        rgba(60, 80, 130, .16);
  --ifx-desenfoque:    saturate(180%) blur(22px);

  --ifx-sombra:
      inset 0 1px 0 var(--ifx-filo-alto),
      0 24px 44px -22px rgba(30, 42, 80, .42),
      0 4px 12px -6px rgba(30, 42, 80, .22),
      0 0 0 1px var(--ifx-anillo);

  /* bandeja hundida: lo contrario del vidrio, para las lecturas */
  --ifx-bandeja:       linear-gradient(180deg, rgba(190,213,236,.34) 0%, rgba(228,240,251,.18) 100%);
  --ifx-bandeja-borde: inset 0 1px 3px rgba(20, 42, 70, .15), inset 0 0 0 1px rgba(255,255,255,.60);

  /* lineas de division: sobre vidrio hay que subirles el tono, porque la
     superficie translucida se las come */
  --ifx-division:      rgba(96, 116, 168, .42);   /* entre celdas de lectura */
  --ifx-borde-suave:   rgba(96, 116, 168, .34);   /* bordes de seccion */
  --ifx-renglon:       rgba(96, 116, 168, .24);   /* entre renglones de lista */

  /* ---- tinta ----
     Medido sobre el render, no a ojo. Sobre la superficie de vidrio mas oscura
     del tablero dan 8.5:1 / 6.2:1 / 4.6:1. El #73879C del tema daba 3.70:1
     incluso sobre blanco puro, debajo del minimo AA de 4.5:1. */
  /* Marina, no gris azulado: es la tinta de la referencia. Sobre el vidrio
     mas oscuro del tablero dan 9.4:1 / 7.1:1 / 4.8:1. */
  --ifx-tinta-fuerte: #25304A;   /* titulos   */
  --ifx-tinta:        #3E4B66;   /* cuerpo    */
  --ifx-tinta-suave:  #5D6B85;   /* etiquetas */

  /* ---- contraste ---- */
  /* Turquesa (el cian del tema, un paso mas apagado y mas verde) para
     rellenos y datos; y un azul electrico para lo activo y lo elegido: son
     los dos acentos de la referencia. Los tonos "hondo" son para texto chico
     sobre blanco (4.8:1 y 5.3:1). */
  --ifx-cian:         #2FB5C9;
  --ifx-cian-claro:   #5FD0DF;
  --ifx-cian-hondo:   #137E8F;
  --ifx-azul:         #4C7BE0;
  --ifx-azul-claro:   #7FA3F2;
  --ifx-azul-hondo:   #2F5FC4;
  --ifx-azul-halo:    rgba(76, 123, 224, .18);
  /* La familia que faltaba. No es un estado —no dice como esta algo— sino
     de que lado esta: en Usuarios el azul es la gente de la casa y el
     violeta la del cliente. Se eligio por descarte de significados ya
     tomados: el verde es 'vigente/aprobado', el ambar 'falta el dato', el
     naranja 'urge' y el ladrillo 'vencido'. Medido: 6.34:1 sobre blanco,
     entre el ladrillo (6.26) y el verde. */
  --ifx-violeta: #6B4FA8;  --ifx-violeta-halo: rgba(107, 79, 168, .20);
  /* marina: la tarjeta oscura de bienvenida y lo que va sobre ella */
  --ifx-marino:       #25304A;
  --ifx-marino-hondo: #1A2238;
  --ifx-marino-tinta: #EEF2FA;
  --ifx-marino-suave: #A9B6D0;

  /* ---- estado ----
     Tonos apagados y oscurecidos para que el texto sobre su propio fondo
     teñido siga pasando AA. */
  --ifx-ok:      #1A8A63;  --ifx-ok-halo:     rgba(26, 138, 99, .22);
  --ifx-aviso:   #9C6D12;  --ifx-aviso-halo:  rgba(156, 109, 18, .24);
  /* El peldaño que le faltaba a la escalera, entre el ambar y el ladrillo.
     Lo pide el vencimiento de polizas, que no son tres estados sino cinco
     (vigente / 6 meses / 3 meses / 1 mes / vencida) y con solo verde-ambar-rojo
     dos de ellos tendrian que compartir color. Medido: 4.99:1 sobre blanco,
     entre el 4.56:1 del ambar y el 6.26:1 del ladrillo, asi que la escalera
     tambien sube en contraste y no solo en tono. */
  --ifx-naranja: #B2551A;  --ifx-naranja-halo: rgba(178, 85, 26, .20);
  --ifx-alerta:  #A93B30;  --ifx-alerta-halo: rgba(169, 59, 48, .22);
  --ifx-gris:    #64798E;  --ifx-gris-halo:   rgba(100, 121, 142, .22);

  --ifx-radio: 18px;
  --ifx-radio-chico: 12px;

  /* Alto fijo del area de listado. Es EL numero a mover si se quieren paneles
     mas altos o mas bajos: lo usan los tres paneles en tercios y el de eventos,
     y de ahi sale que todos midan igual. */
  --ifx-alto-lista: 460px;

  color: var(--ifx-tinta);
}

/* El campo azul: es lo que el vidrio desenfoca y deja ver.
   Se pinta en .main_container y NO en .right_col, porque el <footer> del tema
   va fuera de .right_col: pintando solo el contenido, el pie se quedaba con su
   "background: #F7F7F7" y aparecia como una franja blanca pegada abajo, sobre
   todo al colapsar los paneles. Pintando el contenedor comun no hay costura. */
.ifx-inicio-pagina .main_container,
.ifx-calendario-pagina .main_container,
.ifx-solicitudes-pagina .main_container,
.ifx-ingenieros-pagina .main_container,
.ifx-equipos-pagina .main_container,
.ifx-clientes-pagina .main_container,
.ifx-polizas-pagina .main_container,
.ifx-usuarios-pagina .main_container {
  /* red de seguridad: el tema estira .right_col por JS (setContentHeight en
     build/js/custom.js), pero hasta que ese script corre el campo no llegaria
     al borde inferior y se veria el azul oscuro del <body>. */
  min-height: 100vh;
  background-color: #CBD5E6;
  background-image:
      radial-gradient(1100px 620px at 16% -12%, rgba(76, 123, 224, .26), transparent 60%),
      radial-gradient(900px 680px at 96%  -4%, rgba(47, 181, 201, .22), transparent 58%),
      /* base vertical: sin esto el color se lava a media pagina, porque los
         radiales de arriba no alcanzan a cubrir un tablero largo */
      linear-gradient(180deg,
          rgba(37, 48, 74, 0)   0%,
          rgba(37, 48, 74, .06) 38%,
          rgba(37, 48, 74, .12) 100%);
  background-repeat: no-repeat;
}
/* el contenido y el pie se vuelven transparentes para dejar pasar el campo.
   El selector va largo a proposito: custom.css trae
   "body .container.body .right_col { background: #F7F7F7 }", que gana por
   especificidad a un simple .ifx-inicio. */
body .container.body .right_col.ifx-inicio,
body .container.body .right_col.ifx-calendario,
body .container.body .right_col.ifx-solicitudes,
body .container.body .right_col.ifx-ingenieros,
body .container.body .right_col.ifx-equipos,
body .container.body .right_col.ifx-clientes,
body .container.body .right_col.ifx-polizas,
body .container.body .right_col.ifx-usuarios { background: transparent; }

.ifx-inicio-pagina footer,
.ifx-calendario-pagina footer,
.ifx-solicitudes-pagina footer,
.ifx-ingenieros-pagina footer,
.ifx-equipos-pagina footer,
.ifx-clientes-pagina footer,
.ifx-polizas-pagina footer,
.ifx-usuarios-pagina footer {
  background: transparent;
  border-top: 1px solid var(--ifx-borde-suave);
  color: var(--ifx-tinta-suave);
  font-size: 12px;
}
.ifx-inicio-pagina footer a,
.ifx-calendario-pagina footer a,
.ifx-solicitudes-pagina footer a,
.ifx-ingenieros-pagina footer a,
.ifx-equipos-pagina footer a,
.ifx-clientes-pagina footer a,
.ifx-polizas-pagina footer a,
.ifx-usuarios-pagina footer a { color: var(--ifx-azul-hondo); text-decoration: none; }
.ifx-inicio-pagina footer a:hover,
.ifx-calendario-pagina footer a:hover,
.ifx-solicitudes-pagina footer a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================ ENCABEZADO ================================= */

.ifx-inicio .page-title.ifx-page-title,
.ifx-calendario .page-title.ifx-page-title,
.ifx-solicitudes .page-title.ifx-page-title,
.ifx-ingenieros .page-title.ifx-page-title,
.ifx-equipos .page-title.ifx-page-title,
.ifx-clientes .page-title.ifx-page-title,
.ifx-polizas .page-title.ifx-page-title,
.ifx-usuarios .page-title.ifx-page-title {
  height: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 6px 0 0;
  margin-bottom: 20px;
}
.ifx-inicio .ifx-page-title .title_left,
.ifx-calendario .ifx-page-title .title_left,
.ifx-solicitudes .ifx-page-title .title_left,
.ifx-ingenieros .ifx-page-title .title_left,
.ifx-equipos .ifx-page-title .title_left,
.ifx-clientes .ifx-page-title .title_left,
.ifx-polizas .ifx-page-title .title_left,
.ifx-usuarios .ifx-page-title .title_left { width: auto; float: none; margin-bottom: 0; }
.ifx-inicio .ifx-page-title h1,
.ifx-inicio .ifx-page-title h3,
.ifx-calendario .ifx-page-title h1,
.ifx-calendario .ifx-page-title h3,
.ifx-solicitudes .ifx-page-title h1,
.ifx-solicitudes .ifx-page-title h3,
.ifx-ingenieros .ifx-page-title h1,
.ifx-ingenieros .ifx-page-title h3,
.ifx-equipos .ifx-page-title h1,
.ifx-equipos .ifx-page-title h3,
.ifx-clientes .ifx-page-title h1,
.ifx-clientes .ifx-page-title h3,
.ifx-polizas .ifx-page-title h1,
.ifx-polizas .ifx-page-title h3,
.ifx-usuarios .ifx-page-title h1,
.ifx-usuarios .ifx-page-title h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ifx-tinta-fuerte) !important;
}
.ifx-inicio .ifx-resumen { margin-top: 5px; font-size: 12.5px; color: var(--ifx-tinta); }
.ifx-inicio .ifx-resumen b { font-weight: 600; color: var(--ifx-tinta-fuerte); }
.ifx-inicio .ifx-resumen .ifx-sep { color: rgba(126,152,178,.55); margin: 0 6px; }
.ifx-inicio .ifx-resumen .ifx-rojo  b { color: var(--ifx-alerta); }
.ifx-inicio .ifx-resumen .ifx-ambar b { color: var(--ifx-aviso); }
.ifx-inicio .ifx-fecha { font-size: 12.5px; color: var(--ifx-tinta-suave); white-space: nowrap; }
/* en clientes_index.php la fecha va dentro del bloque del titulo, porque a la
   derecha del encabezado va el logotipo del cliente */
.ifx-inicio .ifx-page-title .title_left .ifx-fecha { margin-top: 4px; }

/* ---- la tarjeta de bienvenida --------------------------------------------
   Solo en el inicio (el calendario conserva su titulo claro). Es la tarjeta
   marina de la referencia: fondo profundo con dos luces, una linea de luz
   arriba y los indicadores como fichas. El marcado es el mismo de siempre
   (.page-title > .title_left > h3 + .ifx-resumen, y .ifx-fecha); lo unico
   que cambia es que ifx_pinta_resumen() ahora escribe fichas .ifx-kpi en vez
   de una linea de texto. */
.ifx-inicio .page-title.ifx-page-title {
  position: relative;
  align-items: center;
  padding: 22px 26px 20px;
  margin-bottom: 22px;
  border-radius: var(--ifx-radio);
  background:
      radial-gradient(720px 260px at 8% 0%, rgba(76,123,224,.42), transparent 62%),
      radial-gradient(520px 220px at 96% 100%, rgba(47,181,201,.30), transparent 60%),
      linear-gradient(160deg, var(--ifx-marino) 0%, var(--ifx-marino-hondo) 100%);
  box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 26px 48px -26px rgba(20, 28, 60, .70),
      0 0 0 1px rgba(255,255,255,.06);
  color: var(--ifx-marino-tinta);
  overflow: hidden;
}
/* la linea de luz de arriba: la firma de las tarjetas oscuras */
.ifx-inicio .page-title.ifx-page-title::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ifx-azul-claro), var(--ifx-cian) 55%, transparent);
  opacity: .9;
}
/* anillos tenues en la esquina, como las curvas de la referencia */
.ifx-inicio .page-title.ifx-page-title::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 0 0 44px rgba(255,255,255,.035), 0 0 0 92px rgba(255,255,255,.02);
  pointer-events: none;
}
.ifx-inicio .ifx-page-title .title_left,
.ifx-inicio .ifx-page-title .ifx-fecha,
.ifx-inicio .ifx-page-title .img-thumbnail { position: relative; z-index: 1; }
.ifx-inicio .ifx-page-title h1,
.ifx-inicio .ifx-page-title h3 { color: #fff !important; font-size: 24px; letter-spacing: -.4px; }
.ifx-inicio .ifx-resumen { margin-top: 6px; font-size: 13px; color: var(--ifx-marino-suave); }
.ifx-inicio .ifx-resumen b { color: #fff; }
.ifx-inicio .ifx-resumen .ifx-sep { color: rgba(255,255,255,.28); }
.ifx-inicio .ifx-resumen .ifx-rojo  b { color: #FF9A8C; }
.ifx-inicio .ifx-resumen .ifx-ambar b { color: #FFCF75; }
.ifx-inicio .ifx-fecha {
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11);
  color: var(--ifx-marino-tinta);
  font-size: 12.5px;
  font-weight: 500;
}
.ifx-inicio .ifx-page-title .title_left .ifx-fecha { display: inline-block; margin-top: 12px; }
.ifx-inicio .ifx-page-title .img-thumbnail {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.6);
}
/* los indicadores: fichas dentro de la tarjeta oscura */
.ifx-inicio #ifx-resumen-estado { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ifx-inicio #ifx-resumen-estado:empty { display: none; }
.ifx-inicio .ifx-kpi {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--ifx-marino-tinta);
}
.ifx-inicio .ifx-kpi b {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.5px;
  font-variant-numeric: tabular-nums;
}
.ifx-inicio .ifx-kpi small { color: var(--ifx-marino-suave); font-size: 11.5px; font-weight: 600; }
.ifx-inicio .ifx-kpi-rojo  b { color: #FF9A8C; }
.ifx-inicio .ifx-kpi-ambar b { color: #FFCF75; }
.ifx-inicio .ifx-kpi-verde b { color: #6FE0AE; }
.ifx-inicio .ifx-kpi-gris  b { color: var(--ifx-marino-suave); }
.ifx-inicio .ifx-page-title .img-thumbnail {
  border: 1px solid var(--ifx-filo);
  border-radius: var(--ifx-radio-chico);
  padding: 4px;
  background: var(--ifx-vidrio-alto);
  box-shadow: var(--ifx-sombra);
}

/* encabezado de bloque: la regla se desvanece hacia la derecha */
.ifx-inicio .ifx-bloque-cab {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  clear: both;
}
.ifx-inicio .ifx-bloque-cab h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ifx-tinta-suave);
}
.ifx-inicio .ifx-bloque-cab .ifx-linea {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ifx-division), rgba(88,124,162,.08));
}
.ifx-inicio .ifx-bloque-cab a {
  font-size: 12px;
  font-weight: 600;
  color: var(--ifx-azul-hondo);
  text-decoration: none;
}
.ifx-inicio .ifx-bloque-cab a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ======================= TARJETA DE VIDRIO (x_panel) ===================== */

.ifx-inicio .x_panel {
  position: relative;
  display: block;
  padding: 0;
  margin-bottom: 18px;
  border: 1px solid var(--ifx-filo);
  border-radius: var(--ifx-radio);
  background: var(--ifx-vidrio);
  -webkit-backdrop-filter: var(--ifx-desenfoque);
  backdrop-filter: var(--ifx-desenfoque);
  box-shadow: var(--ifx-sombra);
  overflow: hidden;
}

/* reflejo diagonal, muy tenue, en la mitad superior */
.ifx-inicio .x_panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 58%;
  pointer-events: none;
  background: linear-gradient(168deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.06) 46%, transparent 100%);
}
.ifx-inicio .x_panel > * { position: relative; }

.ifx-inicio .x_title {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 17px 11px;
  margin: 0;
  border: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.10));
}
/* la division bajo el titulo se ilumina al centro */
.ifx-inicio .x_title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(88,124,162,.18) 0%, var(--ifx-division) 8%, var(--ifx-division) 92%, rgba(88,124,162,.18) 100%);
}
.ifx-inicio .x_title h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  float: none;
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.1px;
  color: var(--ifx-tinta-fuerte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ifx-inicio .x_title h2 strong { font-weight: 700; }
.ifx-inicio .x_title h2 > i {
  flex: 0 0 17px;
  width: 17px;
  text-align: center;
  font-size: 14px;
  color: var(--ifx-azul-hondo);
}
.ifx-inicio .x_title .panel_toolbox { float: none; margin: 0; min-width: 0; flex: 0 0 auto; }
.ifx-inicio .x_title .panel_toolbox > li { padding: 0; }
.ifx-inicio .x_title .panel_toolbox > li > a {
  padding: 3px 5px;
  border-radius: 6px;
  background: none;
  color: var(--ifx-tinta-suave);
  font-size: 13px;
}
.ifx-inicio .x_title .panel_toolbox > li > a:hover {
  background: rgba(255,255,255,.55);
  color: var(--ifx-tinta-fuerte);
}
.ifx-inicio .x_title .clearfix { display: none; }

.ifx-inicio .x_content { padding: 15px 17px; margin-top: 0; float: none; width: auto; }

/* Aquí vivía el orbe de estado (.ifx-orbe), el punto de color que iba delante
   del nombre del equipo. Se quitó: decía lo mismo que la etiqueta de la derecha
   y, desde que los valores llevan color, también lo mismo que la rejilla. Tres
   veces el mismo dato en una sola línea. */

/* etiqueta de estado: pastilla de vidrio teñido */
.ifx-inicio .ifx-etiqueta {
  display: inline-block;
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.45;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.ifx-inicio .ifx-etiqueta.ifx-ok {
  background: rgba(26,138,99,.14); color: var(--ifx-ok);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(26,138,99,.22);
}
.ifx-inicio .ifx-etiqueta.ifx-avi {
  background: rgba(156,109,18,.15); color: var(--ifx-aviso);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(156,109,18,.24);
}
.ifx-inicio .ifx-etiqueta.ifx-ale {
  background: rgba(169,59,48,.14); color: var(--ifx-alerta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(169,59,48,.24);
}
.ifx-inicio .ifx-etiqueta.ifx-neutra {
  background: rgba(100,121,142,.15); color: var(--ifx-gris);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(100,121,142,.24);
}

/* La etiqueta "Alertas personalizadas". El markup trae class="badge badge-green",
   que en custom.css es fondo #05ADD1 con letra blanca: sobre ese cian la letra
   blanca queda en 2.2:1 de contraste y se lee mal. Aquí se le da el mismo
   tratamiento que a las demás pastillas de la ficha —vidrio teñido y la tinta
   del propio color— y sube a más de 6:1. Sólo dentro de .ifx-inicio: badge-green
   se usa en otras pantallas y allí no se toca.
   Los !important son obligados: los de custom.css lo son. */
.ifx-inicio .ifx-ficha-cab .badge-green {
  padding: 3px 9px;
  border: 0 !important;
  border-radius: 6px;
  background: rgba(76, 123, 224, .14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65),
              inset 0 0 0 1px rgba(76, 123, 224, .32);
  color: var(--ifx-azul-hondo);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.45;
  top: 0;
}

/* ============================ FICHA DE EQUIPO ============================ */

.ifx-inicio .ifx-ficha-cuerpo {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 16px 17px;
}

/* align-items: center — la foto y el bloque de identificacion se emparejan
   entre si. Y la foto mide 200px, no 152, porque la mitad derecha (dos filas de
   lecturas + el pie) pasa de 230px de alto: con la foto corta quedaba un hueco
   debajo y la ficha se veia descolgada de un lado. */
.ifx-inicio .ifx-datos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
  width: 470px;
  min-width: 280px;
}

/* el nombre del equipo: una sola vez, en el encabezado de la ficha */
.ifx-inicio .ifx-ficha-cab .ifx-nombre {
  color: var(--ifx-tinta-fuerte);
  text-decoration: none;   /* el subrayado de .caja_subtitulo_verde_liga, fuera */
  overflow: hidden;
  text-overflow: ellipsis;
}
.ifx-inicio .ifx-ficha-cab .ifx-nombre:hover,
.ifx-inicio .ifx-ficha-cab .ifx-nombre:focus {
  color: var(--ifx-azul-hondo);
  text-decoration: none;
}

/* la foto, como baldosa de vidrio */
.ifx-inicio .ifx-foto {
  position: relative;
  width: 200px;
  height: 200px;
  flex: 0 0 200px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid var(--ifx-filo);
  border-radius: var(--ifx-radio-chico);
  background: var(--ifx-vidrio-alto);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px -3px rgba(24,44,68,.30);
}
.ifx-inicio .ifx-foto img,
.ifx-inicio .ifx-foto .img-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(214,228,240,.5);
}
.ifx-inicio .ifx-foto .icono-zoom {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(28, 44, 62, .58);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  color: #fff;
  font-size: 10px;
  opacity: 0;
  transition: opacity .18s ease;
}
.ifx-inicio .ifx-foto:hover .icono-zoom { opacity: 1; }

.ifx-inicio .ifx-ident { min-width: 0; flex: 1; }
.ifx-inicio .ifx-ident .ifx-modalidad {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ifx-tinta-fuerte);
}
.ifx-inicio .ifx-ident dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 18px;
  font-size: 15px;
}
.ifx-inicio .ifx-ident dt { color: var(--ifx-tinta-suave); font-weight: 400; white-space: nowrap; }
.ifx-inicio .ifx-ident dd { margin: 0; color: var(--ifx-tinta-fuerte); font-weight: 500; }

/* --- las seis lecturas: bandeja hundida, en dos filas de tres --- */
.ifx-inicio .ifx-lecturas { flex: 1; min-width: 340px; }

.ifx-inicio .ifx-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--ifx-radio-chico);
  background: var(--ifx-bandeja);
  box-shadow: var(--ifx-bandeja-borde);
  overflow: hidden;
}
.ifx-inicio .ifx-celda {
  position: relative;
  padding: 14px 10px 15px;
  text-align: center;
  transition: background .18s ease;
}
/* division entre lecturas: de arriba a abajo, con apenas un suavizado en las
   puntas para que no se vea como borde de tabla */
.ifx-inicio .ifx-celda + .ifx-celda::before {
  content: "";
  position: absolute;
  left: 0; top: 5%; bottom: 5%;
  width: 1px;
  background: linear-gradient(180deg,
      transparent 0%, var(--ifx-division) 9%, var(--ifx-division) 91%, transparent 100%);
}
/* en 3x2 la primera de cada fila no lleva raya a la izquierda, y la fila de
   arriba lleva una raya por debajo. Se hace con ::after y no con box-shadow
   porque el box-shadow es el que dibuja el filo rojo de .ifx-fuera. */
.ifx-inicio .ifx-celda:nth-child(3n+1)::before { display: none; }
.ifx-inicio .ifx-celda:nth-child(-n+3)::after {
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent 0%, var(--ifx-division) 9%, var(--ifx-division) 91%, transparent 100%);
}
.ifx-inicio .ifx-celda:hover { background: rgba(255,255,255,.42); }
.ifx-inicio .ifx-celda .ifx-et {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ifx-tinta-suave);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* El color del numero lo decide la clase de la celda (.ifx-ok / .ifx-avi /
   .ifx-fuera), que pone el JS. Antes venia en un style= incrustado dentro de un
   <span> y por eso la paleta estaba partida entre el CSS y el script. */
.ifx-inicio .ifx-celda .ifx-va {
  margin: 5px 0 0;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--ifx-tinta-fuerte);
  font-variant-numeric: tabular-nums;
}
.ifx-inicio .ifx-celda .ifx-va span { color: inherit; }
.ifx-inicio .ifx-celda .ifx-lim {
  min-height: 14px;
  margin-top: 2px;
  font-size: 10px;
  color: var(--ifx-tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* ---- semaforo de la lectura ----------------------------------------------
   Verde dentro de rango, ambar cerca de un extremo, rojo fuera. Quien decide
   es ifx_estado_lectura() en equipos_c_script_ficha_equipos.php.

   En verde se tine unicamente el numero: seis celdas con fondo de color a la
   vez no dicen nada, y lo que tiene que saltar a la vista es lo que esta mal.
   El ambar y el rojo si llevan fondo, y ademas apagan el fondo cuando el raton
   pasa por encima para que el aviso no parpadee.

   Los verdes y ambares se ven tal cual en pantalla; para quien no distingue
   esos dos colores queda la etiqueta de la cabecera, que dice lo mismo con
   palabras. El color nunca es el unico portador del dato. */
.ifx-inicio .ifx-celda.ifx-ok .ifx-va { color: var(--ifx-ok); }

/* El ambar va a proposito mas apagado que el rojo: los dos juntos en la misma
   rejilla tienen que leerse en orden, primero el rojo. */
.ifx-inicio .ifx-celda.ifx-avi {
  background:
      radial-gradient(120% 100% at 50% 0%, rgba(156,109,18,.085), rgba(156,109,18,.03) 70%);
  box-shadow: inset 0 0 0 1px rgba(156,109,18,.20);
}
.ifx-inicio .ifx-celda.ifx-avi:hover {
  background: radial-gradient(120% 100% at 50% 0%, rgba(156,109,18,.14), rgba(156,109,18,.06) 70%);
}
.ifx-inicio .ifx-celda.ifx-avi .ifx-va  { color: var(--ifx-aviso); }
.ifx-inicio .ifx-celda.ifx-avi .ifx-et,
.ifx-inicio .ifx-celda.ifx-avi .ifx-lim { color: var(--ifx-aviso); }

.ifx-inicio .ifx-celda.ifx-fuera {
  background:
      radial-gradient(120% 100% at 50% 0%, rgba(169,59,48,.19), rgba(169,59,48,.09) 70%);
  box-shadow: inset 0 0 0 1px rgba(169,59,48,.32);
}
.ifx-inicio .ifx-celda.ifx-fuera:hover {
  background: radial-gradient(120% 100% at 50% 0%, rgba(169,59,48,.20), rgba(169,59,48,.10) 70%);
}
.ifx-inicio .ifx-celda.ifx-fuera .ifx-va  { color: var(--ifx-alerta); }
.ifx-inicio .ifx-celda.ifx-fuera .ifx-et,
.ifx-inicio .ifx-celda.ifx-fuera .ifx-lim { color: var(--ifx-alerta); }

/* 'sin alarma' o rango mal capturado: no hay contra que comparar, asi que el
   numero se queda en la tinta de siempre y no dice nada que no sepamos. */
.ifx-inicio .ifx-celda.ifx-sin .ifx-va { color: var(--ifx-gris); font-weight: 400; }

/* ---- la barra de rango ------------------------------------------------------
   Donde cae la lectura dentro de su rango: el tramo del centro es la zona
   segura y el punto es el valor. Un valor fuera de rango cae en los extremos,
   que son un 25% de holgura a cada lado. La coloca el JS con --pos
   (ifx_pinta_barra); sin rango configurado no se muestra. Convierte
   "4.88, limite 3.5–5.0" en algo que se ve sin leer. */
.ifx-inicio .ifx-barra {
  position: relative;
  height: 5px;
  margin: 9px 6px 0;
  border-radius: 5px;
  background: rgba(96,116,168,.18);
}
.ifx-inicio .ifx-barra[hidden] { display: none; }
.ifx-inicio .ifx-barra-zona {
  position: absolute;
  top: 0; bottom: 0;
  left: 16.7%; right: 16.7%;
  border-radius: 5px;
  background: rgba(76,123,224,.30);
}
.ifx-inicio .ifx-barra-punto {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--ifx-azul);
  box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(20,42,70,.35);
  transition: left .5s cubic-bezier(.2,.8,.2,1);
}
.ifx-inicio .ifx-celda.ifx-ok    .ifx-barra-punto { background: var(--ifx-ok); }
.ifx-inicio .ifx-celda.ifx-avi   .ifx-barra-punto { background: var(--ifx-aviso); }
.ifx-inicio .ifx-celda.ifx-fuera .ifx-barra-punto { background: var(--ifx-alerta); }
.ifx-inicio .ifx-celda.ifx-avi   .ifx-barra-zona  { background: rgba(156,109,18,.24); }
.ifx-inicio .ifx-celda.ifx-fuera .ifx-barra-zona  { background: rgba(169,59,48,.22); }

/* ---- el anillo "N de M en rango" ------------------------------------------
   Un donut chico en el pie de la ficha, con conic-gradient recortado por una
   mascara. --p lo pone el JS (0 a 100). */
.ifx-inicio .ifx-pie-izq { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ifx-inicio .ifx-anillo { display: inline-flex; align-items: center; gap: 10px; color: var(--ifx-tinta-suave); font-size: 13px; }
.ifx-inicio .ifx-anillo[hidden] { display: none; }

/* ---- "Umbrales estándar" --------------------------------------------------
   Solo sale en los equipos SIN alertas personalizadas, que son los que no
   pueden dibujar la barra de rango debajo de cada valor (la API aplica los
   limites en el servidor y no los manda). Es una explicacion, no una alarma:
   va en el tono de las etiquetas y sin color de estado. */
.ifx-inicio .ifx-umbral {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(96, 116, 168, .10);
  box-shadow: inset 0 0 0 1px var(--ifx-renglon);
  color: var(--ifx-tinta-suave);
  font-size: 12px;
  cursor: help;
}
.ifx-inicio .ifx-umbral[hidden] { display: none; }
.ifx-inicio .ifx-umbral .fa { font-size: 11px; opacity: .8; }
.ifx-inicio .ifx-anillo > i {
  --p: 0;
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: conic-gradient(var(--ifx-azul) calc(var(--p) * 1%), rgba(96,116,168,.18) 0);
  -webkit-mask: radial-gradient(circle at center, transparent 57%, #000 59%);
  mask: radial-gradient(circle at center, transparent 57%, #000 59%);
}
.ifx-inicio .ifx-anillo.ifx-ok  > i { background: conic-gradient(var(--ifx-ok)     calc(var(--p) * 1%), rgba(26,138,99,.18) 0); }
.ifx-inicio .ifx-anillo.ifx-avi > i { background: conic-gradient(var(--ifx-aviso)  calc(var(--p) * 1%), rgba(156,109,18,.22) 0); }
.ifx-inicio .ifx-anillo.ifx-ale > i { background: conic-gradient(var(--ifx-alerta) calc(var(--p) * 1%), rgba(169,59,48,.22) 0); }
.ifx-inicio .ifx-anillo b { color: var(--ifx-tinta-fuerte); font-weight: 700; font-variant-numeric: tabular-nums; }

/* sin lecturas: una franja, no seis N/D gigantes */
.ifx-inicio .ifx-sin-datos {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border-radius: var(--ifx-radio-chico);
  background: var(--ifx-bandeja);
  box-shadow: var(--ifx-bandeja-borde);
}
.ifx-inicio .ifx-sin-datos > i { font-size: 19px; color: var(--ifx-gris); }
.ifx-inicio .ifx-sin-datos .ifx-t { font-size: 13px; font-weight: 600; color: var(--ifx-tinta-fuerte); }
.ifx-inicio .ifx-sin-datos .ifx-s { font-size: 12px; color: var(--ifx-tinta-suave); margin-top: 2px; }

.ifx-inicio .ifx-pie-lect {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 15px;
  font-size: 13.5px;
  color: var(--ifx-tinta-suave);
}
.ifx-inicio .ifx-pie-lect b { color: var(--ifx-tinta-fuerte); font-weight: 600; }

/* boton Actualizar: pildora de vidrio cian con filo iluminado */
.ifx-inicio .ifx-btn-actualizar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  /* cuadrado de esquinas redondeadas, ya no pastilla: a este tamano el radio
     completo lo hacia parecer una etiqueta y no un boton. */
  border-radius: 10px;
  background: linear-gradient(180deg, var(--ifx-azul-claro) 0%, var(--ifx-azul) 52%, var(--ifx-azul-hondo) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48),
              inset 0 -1px 0 rgba(0,0,0,.10),
              0 4px 10px -4px rgba(47, 95, 196, .62);
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease;
}
.ifx-inicio .ifx-btn-actualizar:hover,
.ifx-inicio .ifx-btn-actualizar:focus {
  filter: brightness(1.07);
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55),
              inset 0 -1px 0 rgba(0,0,0,.10),
              0 6px 14px -5px rgba(47, 95, 196, .72);
}
.ifx-inicio .ifx-btn-actualizar:active { transform: translateY(1px); }
.ifx-inicio .ifx-btn-actualizar i { font-size: 13.5px; }

/* el badge de alertas personalizadas que ya existia */
.ifx-inicio .ifx-ficha-cab .badge-green {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}

/* ==================== LOS PANELES DE LISTADO (tablas) ==================== */
/* Se conserva el <table> tal como esta en el PHP; solo cambia el vestido. */

.ifx-inicio .x_content table.table { margin: 0; border: 0; font-size: 13px; background: transparent; }
.ifx-inicio .x_content table.table > thead > tr > th {
  padding: 13px 17px 8px;
  border: 0;
  border-bottom: 1px solid var(--ifx-borde-suave);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ifx-tinta-suave);
  white-space: nowrap;
}
.ifx-inicio .x_content table.table > tbody > tr > td {
  padding: 11px 17px;
  border: 0;
  border-bottom: 1px solid var(--ifx-renglon);
  vertical-align: top;
  line-height: 1.5;
  background: transparent;
  transition: background .16s ease;
}
.ifx-inicio .x_content table.table > tbody > tr:last-child > td { border-bottom: 0; }
/* fuera el rayado de table-striped: estorba a las etiquetas de estado */
.ifx-inicio .x_content table.table-striped > tbody > tr:nth-of-type(odd),
.ifx-inicio .x_content table.table-striped > tbody > tr:nth-of-type(even) { background: transparent; }
.ifx-inicio .x_content table.table > tbody > tr:hover > td { background: rgba(255,255,255,.46); }
/* table-bordered mete un borde por celda; aqui no va */
.ifx-inicio .x_content table.table-bordered,
.ifx-inicio .x_content table.table-bordered > thead > tr > th,
.ifx-inicio .x_content table.table-bordered > tbody > tr > td { border: 0; }
.ifx-inicio .x_content table.table-bordered > thead > tr > th { border-bottom: 1px solid var(--ifx-borde-suave); }
.ifx-inicio .x_content table.table-bordered > tbody > tr > td { border-bottom: 1px solid var(--ifx-renglon); }
.ifx-inicio .x_content table.table-bordered > tbody > tr:last-child > td { border-bottom: 0; }

.ifx-inicio .x_panel.ifx-lista .x_content { padding: 0; }
/* El <br> separador que va antes de la tabla. Iba con :first-child, pero en el
   panel de Ordenes de Servicio hay tres <input type="hidden"> antes del <br>,
   asi que ahi no aplicaba y su encabezado quedaba ~30px mas abajo que el de los
   otros dos paneles. Se ocultan todos los <br> hijos directos: son separadores,
   no contenido. */
.ifx-inicio .x_panel.ifx-lista .x_content > br { display: none; }

/* ---- los tres paneles, todos del mismo alto ----
   El alto NO se pone estirando las tarjetas al renglon: eso hacia que, al
   colapsar una, quedara un cajon de vidrio vacio del alto de la vecina abierta.
   Se le da alto FIJO al area de listado (--ifx-alto-lista). Asi:
     · abiertos, los tres miden exactamente lo mismo (encabezado + alto fijo);
     · si sobra contenido, cada tabla se recorre por dentro;
     · al colapsar, el tema esconde .x_content y la tarjeta se encoge sola
       hasta el encabezado, sin dejar hueco.
   Va en .x_content y no en .x_panel porque al colapsar el tema le mete un
   height:auto EN LINEA al panel (build/js/custom.js:161), que ganaria. */
.ifx-inicio .ifx-tercios { display: flex; flex-wrap: wrap; align-items: flex-start; }
.ifx-inicio .ifx-tercios::before,
.ifx-inicio .ifx-tercios::after { display: none; }   /* clearfix heredado, estorba en flex */
.ifx-inicio .ifx-tercios > [class*="col-"] { float: none; }
.ifx-inicio .ifx-tercios > [class*="col-"] > .x_panel { width: 100%; margin-bottom: 18px; }

.ifx-inicio .x_panel.ifx-lista > .x_content,
.ifx-inicio .x_panel.ifx-eventos > .x_content {
  height: var(--ifx-alto-lista);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;   /* al llegar al final no arrastra la pagina */
  scrollbar-width: thin;
  scrollbar-color: rgba(88, 124, 162, .40) transparent;
}

/* barra de desplazamiento discreta, para no romper el vidrio */
.ifx-inicio .x_panel.ifx-lista > .x_content::-webkit-scrollbar,
.ifx-inicio .x_panel.ifx-eventos > .x_content::-webkit-scrollbar { width: 10px; }
.ifx-inicio .x_panel.ifx-lista > .x_content::-webkit-scrollbar-track,
.ifx-inicio .x_panel.ifx-eventos > .x_content::-webkit-scrollbar-track { background: transparent; }
.ifx-inicio .x_panel.ifx-lista > .x_content::-webkit-scrollbar-thumb,
.ifx-inicio .x_panel.ifx-eventos > .x_content::-webkit-scrollbar-thumb {
  background: rgba(88, 124, 162, .34);
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 8px;
}
.ifx-inicio .x_panel.ifx-lista > .x_content::-webkit-scrollbar-thumb:hover,
.ifx-inicio .x_panel.ifx-eventos > .x_content::-webkit-scrollbar-thumb:hover {
  background: rgba(88, 124, 162, .58);
  background-clip: content-box;
}

/* el encabezado de la tabla se queda fijo mientras se recorre */
.ifx-inicio .x_content table.table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(246, 250, 254, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Debajo de 768px las columnas ya son de ancho completo y se apilan solas. */
@media (max-width: 767px) {
  .ifx-inicio .ifx-tercios > [class*="col-"] { display: block; }
}

/* enlaces dentro del tablero: sin subrayado, tinta fuerte, cian al pasar */
.ifx-inicio .x_content .liga_tablas,
.ifx-inicio .x_content .caja-lateral-liga-verde {
  font-weight: 600;
  text-decoration: none;
  color: var(--ifx-tinta-fuerte) !important;
}
.ifx-inicio .x_content .liga_tablas:hover,
.ifx-inicio .x_content .caja-lateral-liga-verde:hover {
  color: var(--ifx-azul-hondo) !important;
  text-decoration: none;
}
.ifx-inicio .x_content td strong { color: var(--ifx-tinta-suave); font-weight: 600; }
.ifx-inicio .x_content .boton-opciones-tabla { color: var(--ifx-tinta-suave); }

/* pie del panel */
.ifx-inicio .ifx-panel-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 17px;
  border-top: 1px solid var(--ifx-borde-suave);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.42));
  font-size: 11.5px;
  color: var(--ifx-tinta-suave);
}
.ifx-inicio .ifx-panel-pie a { font-weight: 600; color: var(--ifx-azul-hondo); text-decoration: none; }
.ifx-inicio .ifx-panel-pie a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============================ EVENTOS =================================== */

.ifx-inicio .calendario-evento-semana {
  margin: 0;
  padding: 11px 17px;
  border: 0;
  border-bottom: 1px solid var(--ifx-renglon);
  border-radius: 0;
  font-size: 13px;
  transition: background .16s ease;
}
.ifx-inicio .calendario-evento-semana:hover { background: rgba(255,255,255,.46); }
.ifx-inicio .x_content > div:last-child .calendario-evento-semana { border-bottom: 0; }
.ifx-inicio .calendario-evento-semana strong { color: var(--ifx-tinta-fuerte); font-weight: 600; }
.ifx-inicio .calendario-iniciales-circulo {
  width: 30px;
  height: 30px;
  font-size: 11px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 2px 5px -2px rgba(24,44,68,.42);
}
.ifx-inicio .calendario-iniciales { font-size: 11px; font-weight: 700; }
.ifx-inicio .x_panel.ifx-eventos .x_content { padding: 7px 0 0; }

/* ======================== FOCO VISIBLE Y RESPALDOS ====================== */

.ifx-inicio a:focus-visible,
.ifx-inicio button:focus-visible {
  outline: 2px solid var(--ifx-azul-hondo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* navegadores sin backdrop-filter: superficies solidas */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ifx-inicio .x_panel { background: rgba(255,255,255,.95); }
  .ifx-inicio .ifx-foto { background: #fff; }
}

/* quien pide menos transparencia: se quita el vidrio, se conserva el diseño */
@media (prefers-reduced-transparency: reduce) {
  .ifx-inicio-pagina .main_container,
.ifx-calendario-pagina .main_container,
.ifx-solicitudes-pagina .main_container,
.ifx-ingenieros-pagina .main_container,
.ifx-equipos-pagina .main_container,
.ifx-clientes-pagina .main_container,
.ifx-polizas-pagina .main_container,
.ifx-usuarios-pagina .main_container { background-image: none; background-color: #EEF2F6; }
  .ifx-inicio .x_panel {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #DDE4EA;
  }
  .ifx-inicio .x_panel::before { display: none; }
  .ifx-inicio .ifx-rejilla,
  .ifx-inicio .ifx-sin-datos { background: #F4F7FA; }
  .ifx-inicio .page-title.ifx-page-title { background: var(--ifx-marino); }
}

/* ============================ RESPONSIVO ================================ */

/* la rejilla ya es de 3 columnas de base; aqui solo se recorta la columna de
   la izquierda para que las dos partes sigan cabiendo lado a lado. */
@media (max-width: 1180px) {
  .ifx-inicio .ifx-datos { width: 390px; }
  .ifx-inicio .ifx-foto { width: 156px; height: 156px; flex: 0 0 156px; }
  .ifx-inicio .ifx-ident .ifx-modalidad { font-size: 15.5px; }
  .ifx-inicio .ifx-ident dl { gap: 5px 14px; font-size: 13.5px; }
  .ifx-inicio .ifx-celda .ifx-va { font-size: 22px; }
}
@media (max-width: 767px) {
  .ifx-inicio .ifx-datos { width: 100%; }
  .ifx-inicio .ifx-lecturas { min-width: 0; }
  .ifx-inicio .ifx-rejilla { grid-template-columns: repeat(2, 1fr); }
  /* mismos selectores de arriba, no versiones mas cortas: si aqui la regla
     pesa menos que la de base, el navegador se queda con la de base y las
     rayas quedan donde no van. */
  .ifx-inicio .ifx-celda + .ifx-celda::before { display: none; }
  .ifx-inicio .ifx-celda:nth-child(2n)::before { display: block; }
  .ifx-inicio .ifx-celda:nth-child(-n+6)::after { display: none; }
  .ifx-inicio .ifx-celda:nth-child(-n+4)::after { display: block; }
  .ifx-inicio .ifx-page-title { display: block; padding: 18px 18px 16px; }
  /* la cabecera de la ficha: el nombre en su renglon y las pastillas debajo;
     en fila unica las dos pastillas se comian el nombre entero */
  .ifx-inicio .ifx-ficha-cab { flex-wrap: wrap; gap: 8px 10px; }
  .ifx-inicio .ifx-ficha-cab h2 { flex: 1 1 100%; white-space: normal; }
  .ifx-inicio .ifx-etiqueta { white-space: normal; text-align: center; }
  .ifx-inicio .ifx-fecha { display: inline-block; margin-top: 12px; white-space: normal; }
  .ifx-inicio .ifx-kpi b { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .ifx-inicio .ifx-celda,
  .ifx-inicio .ifx-btn-actualizar,
  .ifx-inicio .ifx-foto .icono-zoom,
  .ifx-inicio .calendario-evento-semana,
  .ifx-inicio .x_content table.table > tbody > tr > td { transition: none !important; }
}

@media print {
  .ifx-inicio-pagina .main_container,
.ifx-calendario-pagina .main_container,
.ifx-solicitudes-pagina .main_container,
.ifx-ingenieros-pagina .main_container,
.ifx-equipos-pagina .main_container,
.ifx-clientes-pagina .main_container,
.ifx-polizas-pagina .main_container,
.ifx-usuarios-pagina .main_container { background: #fff; }
  .ifx-inicio-pagina footer,
.ifx-calendario-pagina footer { border-top: 1px solid #DDE4EA; }
  .ifx-inicio .ifx-btn-actualizar,
  .ifx-inicio .x_title .panel_toolbox { display: none !important; }
  .ifx-inicio .x_panel {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid #DDE4EA;
    box-shadow: none;
    break-inside: avoid;
  }
  .ifx-inicio .x_panel::before { display: none; }
  .ifx-inicio .page-title.ifx-page-title { background: #fff; color: #000; box-shadow: none; border: 1px solid #DDE4EA; }
  .ifx-inicio .ifx-page-title h3, .ifx-inicio .ifx-kpi b { color: #000 !important; }
  .ifx-inicio .ifx-kpi { background: #F4F7FA; box-shadow: none; color: #000; }
}
