/* ============================================================
   CAPA DE MEJORA (copia experimental) · Servicios Insignia
   Aplica movimiento, micro-interacciones y pulido "craft" de las
   habilidades instaladas (impeccable · emilkowalski · taste-skill),
   preservando la identidad de marca. Es ADITIVA: se puede borrar
   este archivo (y su <link>) para volver al original sin rastro.
   ============================================================ */
:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-std: cubic-bezier(.4,0,.2,1);
}

/* ===== Accesibilidad: respeta "reducir movimiento" ===== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ===== Superficies del navegador (señal de página "construida") ===== */
::selection{ background: rgba(104,197,115,.30); color: var(--ink); }
input, textarea, select{ caret-color: var(--green-700); }
:root{ scrollbar-width: thin; scrollbar-color: var(--green-400) transparent; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--green-400); border-radius:999px; border:3px solid var(--paper); }
::-webkit-scrollbar-thumb:hover{ background:var(--green-500); }
/* Cifras alineadas en montos y tablas */
.k-val, .pr-table td, .pr-table th, table td, table th, .money, .kpi .k-val, .meter{ font-variant-numeric: tabular-nums; }

/* ===== Micro-interacciones (transición suave en lo interactivo) ===== */
a, button, .btn, .service, .aviso, .card, .kpi, .list-item, .side-link, .chip, .tab, .theme-btn, .hero-card, .hero-trust li{
  transition: transform .18s var(--ease-std), box-shadow .22s var(--ease-std), background-color .18s var(--ease-std), border-color .18s var(--ease-std), color .18s var(--ease-std);
}
/* Botones: elevación y "press" con rebote sutil */
.btn:hover{ transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:active{ transform: translateY(0) scale(.985); }
.theme-btn:active{ transform: scale(.96); }

/* Tarjetas de la landing: se elevan con más presencia */
.service:hover{ transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--green-200); }
.hero-card:hover{ transform: translateY(-3px); }

/* Avisos y tarjetas del portal/admin: realce discreto (superficie Operate) */
.aviso:hover, .card:hover, .kpi:hover{ box-shadow: var(--sh-md); }
.list-item:hover{ background: var(--green-100); }

/* Enlaces de navegación con subrayado animado */
.nav a{ position:relative; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--green-700); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .22s var(--ease-out-expo); }
.nav a:hover::after{ transform:scaleX(1); }

/* Enlaces del menú lateral: deslizan un poco al pasar el cursor */
.side-link{ transition: transform .16s var(--ease-std), background-color .15s, color .15s; }
.side-link:hover{ transform: translateX(2px); }

/* ===== Revelado al hacer scroll (solo cuando JS lo activa) ===== */
@media (prefers-reduced-motion: no-preference){
  .has-reveal .reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease-out-expo), transform .7s var(--ease-out-expo); will-change: opacity, transform; }
  .has-reveal .reveal.in{ opacity:1; transform:none; }
  .has-reveal .reveal.r-d1{ transition-delay:.06s; }
  .has-reveal .reveal.r-d2{ transition-delay:.12s; }
  .has-reveal .reveal.r-d3{ transition-delay:.18s; }
  .has-reveal .reveal.r-d4{ transition-delay:.24s; }

  /* Entrada del hero al cargar (landing) */
  .has-hero .hero-copy > *{ opacity:0; transform: translateY(16px); animation: heroIn .7s var(--ease-out-expo) forwards; }
  .has-hero .hero-copy > *:nth-child(1){ animation-delay:.05s; }
  .has-hero .hero-copy > *:nth-child(2){ animation-delay:.12s; }
  .has-hero .hero-copy > *:nth-child(3){ animation-delay:.19s; }
  .has-hero .hero-copy > *:nth-child(4){ animation-delay:.26s; }
  .has-hero .hero-copy > *:nth-child(5){ animation-delay:.33s; }
  .has-hero .hero-single > *{ opacity:0; transform: translateY(16px); animation: heroIn .7s var(--ease-out-expo) forwards; }
  .has-hero .hero-media{ opacity:0; transform: translateY(20px) scale(.985); animation: heroIn .8s var(--ease-out-expo) .2s forwards; }
}
@keyframes heroIn{ to{ opacity:1; transform:none; } }

/* ============================================================
   PASE PARA PANELES (cliente y administración) · conservador
   Selectores que SOLO existen en los paneles, así no toca la
   landing. Solo CSS: no altera la lógica. El movimiento se
   dispara por navegación (cambiar de vista, abrir modal), nunca
   por refresco de datos, para no parpadear en tiempo real.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* Entrada suave al cambiar de vista */
  .view.active{ animation: viewIn .34s var(--ease-out-expo); }
  /* Entrada de modales (fondo + tarjeta) */
  .modal-bg.open{ animation: mbgIn .2s ease; }
  .modal-bg.open .modal{ animation: modalIn .32s var(--ease-out-expo); }
}
@keyframes viewIn{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes mbgIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modalIn{ from{ opacity:0; transform: translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }

/* Pestañas: subrayado activo con transición suave */
.tab{ transition: color .18s var(--ease-std), border-color .22s var(--ease-out-expo); }

/* Menú lateral: barra de acento en el enlace activo */
.side-nav .side-link{ position: relative; }
.side-nav .side-link.active::before{
  content:""; position:absolute; left:3px; top:9px; bottom:9px; width:3px;
  border-radius:2px; background: var(--green-300);
}

/* Filas de tabla: realce discreto al pasar el cursor */
.tbl tbody tr{ transition: background-color .15s var(--ease-std); }
.tbl tbody tr:hover{ background: var(--green-100); }