/* =============================================================================
   TMT NormaSuite · relieve de tarjetas y cuadrículas
   -----------------------------------------------------------------------------
   Mismo tratamiento que se le hizo a GestObra, pero con lo de aquí: el naranja
   de allá no pinta nada en TMT NormaSuite. Aquí manda el azul marino de la marca
   --var(--navy)-- y, debajo del encabezado de cada tabla, la línea de cuatro
   colores del PHVA que ya lleva la barra de arriba. Esa línea es la firma de la
   suite y es lo que hace que la cuadrícula se vea de TMT NormaSuite y no de otro.

   Dos ideas, y una advertencia que costó encontrar en GestObra:

   · Las tarjetas dejan de ser rectángulos planos: se apoyan sobre dos hojas y
     giran siguiendo al puntero.

   · Los paneles con tablas tienen profundidad pero NO giran. Una tabla
     inclinada se lee mal.

   LA ADVERTENCIA: un elemento con transform --o con transform-style distinto de
   flat-- se convierte en el bloque contenedor de sus descendientes
   position:fixed. Por eso el giro se enciende con una clase y solo mientras el
   puntero está encima: en reposo la tarjeta no lleva ninguna transformación, y
   así los menús desplegables que abren hacia fuera no salen corridos.

   SE EDITA EN comun/relieve.css Y NADA MÁS. Las copias las pone
   comun/sincronizar.js.
   ============================================================================= */

/* ---------- las tarjetas que giran ---------- */
.kpi, .hub-kpi, .fac-kpi, .plan-kpi, .module-card, .phva-card,
.ind-card, .crit-card, .cons-card, .sec-card, .pts-card, .score-card {
  position: relative;
  transition: box-shadow .32s var(--ease, ease), border-color .28s ease,
              transform .38s cubic-bezier(.2,.7,.3,1);
}

/* Las dos hojas de abajo del taco. En reposo no se ven: aparecen al acercarse. */
.kpi::before, .hub-kpi::before, .fac-kpi::before, .plan-kpi::before,
.module-card::before, .phva-card::before, .ind-card::before, .crit-card::before,
.cons-card::before, .sec-card::before, .pts-card::before, .score-card::before,
.kpi::after, .hub-kpi::after, .fac-kpi::after, .plan-kpi::after,
.module-card::after, .phva-card::after, .ind-card::after, .crit-card::after,
.cons-card::after, .sec-card::after, .pts-card::after, .score-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  border: 1px solid var(--line, #e7ecf3); border-radius: inherit;
  background: var(--card, #fff);
  transition: transform .38s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
.kpi:hover::before, .hub-kpi:hover::before, .fac-kpi:hover::before, .plan-kpi:hover::before,
.module-card:hover::before, .phva-card:hover::before, .ind-card:hover::before,
.crit-card:hover::before, .cons-card:hover::before, .sec-card:hover::before,
.pts-card:hover::before, .score-card:hover::before {
  opacity: .85; transform: translateY(6px) rotate(-1deg) scale(.988);
}
.kpi:hover::after, .hub-kpi:hover::after, .fac-kpi:hover::after, .plan-kpi:hover::after,
.module-card:hover::after, .phva-card:hover::after, .ind-card:hover::after,
.crit-card:hover::after, .cons-card:hover::after, .sec-card:hover::after,
.pts-card:hover::after, .score-card:hover::after {
  opacity: .55; transform: translateY(12px) rotate(1.4deg) scale(.974);
}

/* El realce al acercarse: azul de la casa, no ámbar. */
.kpi:hover, .hub-kpi:hover, .fac-kpi:hover, .plan-kpi:hover, .module-card:hover,
.phva-card:hover, .ind-card:hover, .crit-card:hover, .cons-card:hover,
.sec-card:hover, .pts-card:hover, .score-card:hover {
  border-color: #9dbbdd;
  box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 24px 40px -22px rgba(11,46,79,.5);
}

/* El giro solo mientras el puntero está encima: lo pone y lo quita relieve.js. */
.kpi.girando, .hub-kpi.girando, .fac-kpi.girando, .plan-kpi.girando,
.module-card.girando, .phva-card.girando, .ind-card.girando, .crit-card.girando,
.cons-card.girando, .sec-card.girando, .pts-card.girando, .score-card.girando {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.girando::before { transform: translateZ(-9px) translateY(6px) rotate(-1deg) scale(.988) !important; }
.girando::after  { transform: translateZ(-18px) translateY(12px) rotate(1.4deg) scale(.974) !important; }

/* Con un desplegable abierto dentro, la tarjeta se endereza del todo. Va
   después y con más peso que la regla del giro, para ganarle. */
.kpi:has(details[open]), .hub-kpi:has(details[open]), .fac-kpi:has(details[open]),
.plan-kpi:has(details[open]), .module-card:has(details[open]),
.phva-card:has(details[open]), .ind-card:has(details[open]),
.crit-card:has(details[open]), .cons-card:has(details[open]),
.sec-card:has(details[open]), .pts-card:has(details[open]),
.score-card:has(details[open]) { transform: none !important; transform-style: flat !important; }

/* ---------- los paneles: profundidad, sin giro ---------- */
.card { transition: box-shadow .3s ease, border-color .3s ease; }
.card:hover {
  border-color: #cfdcea;
  box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 18px 34px -24px rgba(11,46,79,.42);
}

/* ---------- cuadrículas ----------
   Encabezado azul marino, fijo al desplazar, y debajo la línea del PHVA. */
.table-wrap { position: relative; }

.table-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #1c5183 0%, #14406a 38%, #0b2e4f 78%, #08243c 100%);
  color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  text-align: left; padding: 12px 13px; white-space: nowrap;
  border: none; border-right: 1px solid rgba(255,255,255,.18);
  text-shadow: 0 1px 1px rgba(4,17,29,.4);
}
.table-wrap thead th:first-child { border-top-left-radius: var(--r-lg, 14px); }
.table-wrap thead th:last-child { border-top-right-radius: var(--r-lg, 14px); border-right: none; }

/* La línea de cuatro colores del PHVA cerrando el encabezado: es la firma de la
   suite, la misma que va bajo la barra de arriba. */
.table-wrap thead th::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--phva, #0b2e4f); opacity: .95;
}

.table-wrap tbody td {
  padding: 11px 13px; font-size: 13px; vertical-align: middle;
  border-bottom: 1px solid var(--line, #e7ecf3);
}
.table-wrap tbody tr:nth-child(even) td { background: #f7fafd; }
.table-wrap tbody tr:hover td { background: #eaf2fb; }
.table-wrap tbody tr:last-child td { border-bottom: none; }

/* ---------- movimiento reducido ----------
   El giro no hace falta apagarlo: relieve.js ni lo enciende. Se retiran las
   hojas de atrás, que son adorno. */
@media (prefers-reduced-motion: reduce) {
  .kpi::before, .hub-kpi::before, .fac-kpi::before, .plan-kpi::before,
  .module-card::before, .phva-card::before, .ind-card::before, .crit-card::before,
  .cons-card::before, .sec-card::before, .pts-card::before, .score-card::before,
  .kpi::after, .hub-kpi::after, .fac-kpi::after, .plan-kpi::after,
  .module-card::after, .phva-card::after, .ind-card::after, .crit-card::after,
  .cons-card::after, .sec-card::after, .pts-card::after, .score-card::after { display: none; }
}