/* ============================================================
   UI 3D - Capa de profundidad e interaccion
   Sistema de Sanciones Disciplinarias EESTP-PNP
   Respeta la paleta institucional: verde, dorado y blanco.
   Se aplica sobre los estilos existentes sin reemplazarlos.
   ============================================================ */

:root {
  /* Paleta institucional (misma de las paginas) */
  --u3d-green-900: #061209;
  --u3d-green-800: #0b2410;
  --u3d-green-700: #14441e;
  --u3d-green-600: #1e6b2e;
  --u3d-gold-700:  #c9940a;
  --u3d-gold-600:  #c9a020;
  --u3d-gold-500:  #d4a820;
  --u3d-gold-400:  #e8c040;
  --u3d-gold-300:  #f5d040;
  --u3d-gold-200:  #f7e04a;

  /* Profundidad: sombra ambiental + sombra direccional + bisel */
  --u3d-sh-1: 0 1px 2px rgba(6,18,9,.10), 0 2px 6px rgba(6,18,9,.08);
  --u3d-sh-2: 0 2px 4px rgba(6,18,9,.10), 0 8px 18px rgba(6,18,9,.12);
  --u3d-sh-3: 0 4px 8px rgba(6,18,9,.12), 0 18px 38px rgba(6,18,9,.18);
  --u3d-sh-4: 0 8px 16px rgba(6,18,9,.16), 0 32px 64px rgba(6,18,9,.26);

  /* Bisel superior claro + base oscura = volumen */
  --u3d-bevel: inset 0 1px 0 rgba(255,255,255,.55),
               inset 0 -1px 0 rgba(6,18,9,.10);
  --u3d-bevel-dark: inset 0 1px 0 rgba(255,255,255,.14),
                    inset 0 -1px 0 rgba(0,0,0,.35);

  --u3d-ease: cubic-bezier(.22,.61,.36,1);
}

/* El tilt por mouse, el brillo que seguia al cursor (.u3d-sheen) y el
   parallax se retiraron junto con ui3d.js: el 3D de esta hoja es solo
   estatico (sombras, biseles, relieve). En hover, a lo sumo cambia la
   sombra o el color: nada se desplaza ni se inclina. */

/* ============================================================
   TARJETAS
   ============================================================ */
.u3d-card {
  box-shadow: var(--u3d-sh-2), var(--u3d-bevel);
  border-radius: 14px;
  transition: box-shadow .4s var(--u3d-ease), transform .4s var(--u3d-ease);
}
.u3d-card:hover { box-shadow: var(--u3d-sh-3), var(--u3d-bevel); }

/* Tarjeta sobre fondo oscuro (login) */
.u3d-card-dark {
  box-shadow: var(--u3d-sh-4), var(--u3d-bevel-dark);
  border-radius: 18px;
}

/* Filo dorado superior: da sensacion de canto metalico */
.u3d-edge-gold { position: relative; }
.u3d-edge-gold::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg,
    var(--u3d-gold-700), var(--u3d-gold-300),
    var(--u3d-gold-200), var(--u3d-gold-300), var(--u3d-gold-700));
  box-shadow: 0 1px 4px rgba(212,168,32,.55);
  z-index: 2;
}

/* ============================================================
   BOTONES CON RELIEVE Y HUNDIDO AL PULSAR
   ============================================================ */
.u3d-btn {
  position: relative;
  box-shadow: var(--u3d-sh-2), var(--u3d-bevel);
  transition: box-shadow .18s var(--u3d-ease),
              filter .18s var(--u3d-ease);
}
.u3d-btn:hover  { box-shadow: var(--u3d-sh-3), var(--u3d-bevel); filter: brightness(1.05); }
.u3d-btn:active { box-shadow: var(--u3d-sh-1), inset 0 2px 6px rgba(6,18,9,.30); filter: brightness(.97); }

/* Boton dorado metalico */
.u3d-btn-gold {
  background-image: linear-gradient(180deg,
    var(--u3d-gold-200) 0%, var(--u3d-gold-300) 45%,
    var(--u3d-gold-500) 55%, var(--u3d-gold-700) 100%);
  border: 1px solid var(--u3d-gold-700);
  color: var(--u3d-green-900);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

/* Boton verde institucional */
.u3d-btn-green {
  background-image: linear-gradient(180deg,
    var(--u3d-green-600) 0%, var(--u3d-green-700) 60%, var(--u3d-green-800) 100%);
  border: 1px solid var(--u3d-green-800);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* ============================================================
   CAMPOS DE FORMULARIO HUNDIDOS
   ============================================================ */
.u3d-field {
  box-shadow: inset 0 2px 5px rgba(6,18,9,.14), inset 0 -1px 0 rgba(255,255,255,.55);
  transition: box-shadow .25s var(--u3d-ease), border-color .25s var(--u3d-ease);
}
.u3d-field:focus {
  box-shadow: inset 0 2px 6px rgba(6,18,9,.18),
              0 0 0 3px rgba(212,168,32,.30);
  border-color: var(--u3d-gold-500);
}

/* ============================================================
   ENCABEZADO CON VOLUMEN
   ============================================================ */
.u3d-header {
  box-shadow: var(--u3d-sh-3), inset 0 -1px 0 rgba(212,168,32,.45);
  position: relative;
  z-index: 10;
}

/* ============================================================
   LOGO / ESCUDO FLOTANTE
   ============================================================ */
.u3d-logo {
  filter: drop-shadow(0 10px 18px rgba(6,18,9,.45))
          drop-shadow(0 2px 4px rgba(212,168,32,.30));
  transition: filter .4s var(--u3d-ease);
}
.u3d-logo:hover {
  filter: drop-shadow(0 16px 26px rgba(6,18,9,.55))
          drop-shadow(0 3px 8px rgba(247,224,74,.45));
}

/* ============================================================
   PROFUNDIDAD EN TABLAS
   ============================================================ */
.u3d-table thead th {
  position: sticky; top: 0; z-index: 2;
  box-shadow: 0 2px 6px rgba(6,18,9,.18);
}
.u3d-table tbody tr {
  transition: box-shadow .2s var(--u3d-ease);
}
.u3d-table tbody tr:hover {
  box-shadow: -3px 0 0 0 var(--u3d-gold-500), var(--u3d-sh-1);
}

/* ============================================================
   FONDO CON CAPAS (parallax suave)
   ============================================================ */
.u3d-bg-layers { position: relative; }
.u3d-bg-layers::before {
  content: "";
  position: absolute; inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 15%, rgba(30,107,46,.28), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 80%, rgba(212,168,32,.14), transparent 60%);
  transform: translate3d(var(--u3d-px, 0px), var(--u3d-py, 0px), 0);
  transition: transform .5s var(--u3d-ease);
}

/* ============================================================
   MAPEO A LAS CLASES YA EXISTENTES DEL SISTEMA
   (asi no hay que tocar el HTML de cada pagina)
   ============================================================ */

/* --- login.php --- */
.login-card {
  box-shadow: var(--u3d-sh-4), var(--u3d-bevel-dark) !important;
  border-radius: 18px;
}
.login-card .btn-login {
  background-image: linear-gradient(180deg,
    var(--u3d-gold-200) 0%, var(--u3d-gold-300) 45%,
    var(--u3d-gold-500) 55%, var(--u3d-gold-700) 100%);
  border: 1px solid var(--u3d-gold-700);
  box-shadow: var(--u3d-sh-2), var(--u3d-bevel);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  transition: box-shadow .18s var(--u3d-ease), filter .18s var(--u3d-ease);
}
.login-card .btn-login:hover  { box-shadow: var(--u3d-sh-3), var(--u3d-bevel); filter: brightness(1.06); }
.login-card .btn-login:active { box-shadow: inset 0 2px 6px rgba(6,18,9,.35); }
.login-card .form-control {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.10);
  transition: box-shadow .25s var(--u3d-ease), border-color .25s var(--u3d-ease);
}
.login-card .form-control:focus {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.32), 0 0 0 3px rgba(212,168,32,.32);
  border-color: var(--u3d-gold-500);
}
.brand-panel img, .login-card img, .header-logo img { }

/* --- index.php / registro.php / reportes.php --- */
.glass-card, .info-card, .bienvenida-search-card,
.filter-card, .ranking-card, .stat-card {
  box-shadow: var(--u3d-sh-2), var(--u3d-bevel) !important;
  border-radius: 14px;
  transition: box-shadow .4s var(--u3d-ease);
}
.glass-card:hover, .info-card:hover, .bienvenida-search-card:hover,
.filter-card:hover, .ranking-card:hover, .stat-card:hover {
  box-shadow: var(--u3d-sh-3), var(--u3d-bevel) !important;
}

.card-head {
  position: relative;
  box-shadow: inset 0 -1px 0 rgba(212,168,32,.40);
}
.card-head::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    var(--u3d-gold-700), var(--u3d-gold-300),
    var(--u3d-gold-200), var(--u3d-gold-300), var(--u3d-gold-700));
  box-shadow: 0 1px 4px rgba(212,168,32,.50);
}

.header, .header-pnp {
  box-shadow: var(--u3d-sh-3), inset 0 -1px 0 rgba(212,168,32,.45);
  position: relative;
  z-index: 10;
}

/* Botones del sistema */
.btn-buscar, .btn-registrar, .btn-imprimir, .btn-exportar,
.btn-filtrar, .btn-aplicar, .btn-limpiar, .btn-ver-inst {
  box-shadow: var(--u3d-sh-2), var(--u3d-bevel);
  transition: box-shadow .18s var(--u3d-ease), filter .18s var(--u3d-ease);
}
.btn-buscar:hover, .btn-registrar:hover, .btn-imprimir:hover, .btn-exportar:hover,
.btn-filtrar:hover, .btn-aplicar:hover, .btn-limpiar:hover, .btn-ver-inst:hover {
  box-shadow: var(--u3d-sh-3), var(--u3d-bevel);
  filter: brightness(1.05);
}
.btn-buscar:active, .btn-registrar:active, .btn-imprimir:active, .btn-exportar:active,
.btn-filtrar:active, .btn-aplicar:active, .btn-limpiar:active, .btn-ver-inst:active {
  box-shadow: inset 0 2px 6px rgba(6,18,9,.30);
}

/* Campos hundidos */
.form-control, .form-select {
  box-shadow: inset 0 2px 4px rgba(6,18,9,.10);
  transition: box-shadow .25s var(--u3d-ease), border-color .25s var(--u3d-ease);
}
.form-control:focus, .form-select:focus {
  box-shadow: inset 0 2px 5px rgba(6,18,9,.14), 0 0 0 3px rgba(212,168,32,.28);
  border-color: var(--u3d-gold-500);
}

/* Tablas con relieve */
table tbody tr { transition: box-shadow .2s var(--u3d-ease); }
table tbody tr:hover { box-shadow: -3px 0 0 0 var(--u3d-gold-500); }

/* Logo institucional con profundidad (sin flotacion) */
.brand-panel img, .header-logo img, img[src*="LOGO-EESTP"] {
  filter: drop-shadow(0 10px 18px rgba(6,18,9,.45))
          drop-shadow(0 2px 4px rgba(212,168,32,.30));
  transition: filter .4s var(--u3d-ease);
}
.brand-panel img:hover, .header-logo img:hover, img[src*="LOGO-EESTP"]:hover {
  filter: drop-shadow(0 16px 26px rgba(6,18,9,.55))
          drop-shadow(0 3px 8px rgba(247,224,74,.45));
}

/* ============================================================
   ACCESIBILIDAD: respetar reduccion de movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .u3d-btn, .u3d-logo, .u3d-bg-layers::before, .u3d-table tbody tr {
    animation: none !important;
    transition: none !important;
  }
}