/* =========================================================
   PR4001 — UI/UX Refresh · STATRIA
   - Paleta viva, gradientes, botones y formularios unificados
   - Password con toggle, inputs con ícono, estados de validación
   - Cards con hover-lift, tablas mejoradas, landing menos plana
========================================================= */

/* ===========================
   🎛️ VARIABLES + THEME
=========================== */
:root{
  /* Brand */
  --brand: #0f62fe;
  --brand-2: #0043ce;
  --accent: #ff385c;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Backgrounds */
  --bg: #f4f6f9;
  --bg-soft: #f7f8fb;
  --card: #ffffff;

  /* Typography */
  --ink: #0f172a;
  --muted: #6b7280;

  /* Decor */
  --ring: rgba(15, 98, 254, .25);
  --radius: 12px;
  --gap: 14px;

  /* Inputs */
  --input-height: 44px;
  --input-radius: 10px;
  --input-border: #e5e7eb;
  --input-padding-y: 10px;
  --input-padding-x: 12px;
  --input-font-size: 15px;

  /* Gradients */
  --brand-grad: linear-gradient(135deg, #1c4ffd, #0f62fe 55%, #0043ce);
  --bg-grad: linear-gradient(180deg, #fff, #f7f9ff 65%, #f3f6ff);
}

/* ===========================
   🎨 GENERALES
=========================== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0; padding:0;
  background: var(--bg-grad);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2{ color:#1f2a44; margin-top:0; }
.hidden{ display:none !important; }

/* ===========================
   📌 SIDEBAR (PANEL)
=========================== */
.sidebar{
  position:fixed; left:0; top:0; width:220px; height:100vh;
  background: var(--brand-2); color:#fff;
  display:flex; flex-direction:column; align-items:center; padding-top:1rem;
  transition:left .3s ease-in-out; z-index:1000;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
.sidebar h2{ color:#fff; font-size:1.3rem; margin-bottom:1rem; }
.sidebar button,.sidebar .logout-btn{
  width:85%; margin:.4rem 0; padding:.7rem; border:none; border-radius:10px;
  background:#0950d0; color:#fff; font-size:.95rem; cursor:pointer; text-align:center;
  transition: transform .05s, background .25s, box-shadow .15s;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.sidebar button:hover,.sidebar .logout-btn:hover{ background:#073b97; }
.sidebar button:focus-visible,.sidebar .logout-btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.28); }
.sidebar button:active,.sidebar .logout-btn:active{ transform:translateY(1px); }
.logout-btn{ text-decoration:none; }

/* ===========================
   📌 CONTENIDO (PANEL)
=========================== */
.content{ margin-left:240px; padding:2rem; max-width:1100px; }
.section{
  background:var(--card); padding:1.25rem; border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(16,24,40,.06); margin-bottom:1.25rem;
}
.section--alt{ background:var(--bg-soft); }
.section--spacious{ padding:3.25rem 0; }
.section-header{ display:flex; align-items:center; gap:10px; margin:0 0 .75rem; }
.section-title{ font-size:1.15rem; font-weight:800; color:var(--ink); }
.section-sub{ margin-left:auto; font-size:.9rem; color:var(--muted); }

/* ===========================
   📊 TABLAS (LISTAS)
=========================== */
.table-test{
  width:100%; border-collapse:separate; border-spacing:0; margin:1rem auto;
  background:#f9f9f9; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 18px rgba(16,24,40,.06);
}
.table-test th,.table-test td{ border:1px solid #e5e7eb; padding:.75rem; text-align:center; font-size:.92rem; }
.table-test th{ background:#eaf1ff; font-weight:800; color:#0f2342; }

/* ===========================
   ✅ BOTONES
=========================== */
.btn{
  --bshadow: 0 6px 18px rgba(15,98,254,.25);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.56rem .98rem; border:1px solid transparent; border-radius:999px;
  cursor:pointer; font-size:.9rem; font-weight:700; line-height:1;
  background:var(--brand-grad); color:#fff;
  transition: transform .05s, box-shadow .15s, filter .2s, background .2s;
  box-shadow: var(--bshadow);
}
.btn:hover{ filter:saturate(1.08) brightness(1.02); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--ring), var(--bshadow); }
.btn.sec{ background:#fff; color:var(--ink); border-color:#e5e7eb; box-shadow:0 3px 10px rgba(16,24,40,.06); }
.btn.sec:hover{ background:#f7f9ff; }
.btn.outline{ background:transparent; color:var(--brand-2); border-color:currentColor; }
.btn.ghost{ background:transparent; color:#0f2342; border-color:transparent; }
.btn.danger{ background:linear-gradient(135deg,#f05252,#ef4444); }
.btn.success{ background:linear-gradient(135deg,#22c55e,#16a34a); }
.btn.small{ padding:.35rem .6rem; font-size:.82rem; }
.btn.btn-lg{ padding:.8rem 1.1rem; font-size:1rem; }

/* ===========================
   🧭 Toolbar / filtros
=========================== */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:10px; }
.pills{ display:flex; gap:8px; flex-wrap:wrap; }
.pill{
  padding:.35rem .7rem; border-radius:999px; border:1px solid #e5e7eb;
  background:#fff; cursor:pointer; font-weight:700; color:#0f2342;
  transition:background .2s, color .2s, transform .05s;
}
.pill:hover{ background:#f5f7ff; }
.pill.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:.25rem .6rem; border-radius:999px; font-size:.8rem; font-weight:800; }
.chip.ok{ background:#ecfdf5; color:#047857; }
.chip.warn{ background:#fff7ed; color:#c2410c; }
.chip.todo{ background:#eef2ff; color:#3730a3; }
.search{ position:relative; flex:1 1 260px; min-width:200px; }
.search input{ width:100%; border:1px solid #e5e7eb; border-radius:999px; padding:10px 38px 10px 14px; background:#fff; }
.search .clear{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:transparent; cursor:pointer; font-size:18px; color:#9ca3af; }

/* ===========================
   📝 FORMULARIO — UNIFICADO (incluye password)
=========================== */
form{
  max-width:900px; margin:auto; background:var(--card); padding:1.25rem;
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(16,24,40,.06);
}
fieldset{ border:1px solid #e5e7eb; border-radius:var(--radius); margin-bottom:1.25rem; padding:1rem; background:#fff; }
legend{ font-weight:800; font-size:1rem; color:#004080; padding:0 .4rem; }
label{ display:inline-block; margin:0 0 .35rem; font-weight:700; line-height:1.2; color:var(--ink); }

/* Inputs normalizados */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea{
  width:100%; min-height:var(--input-height);
  padding: var(--input-padding-y) var(--input-padding-x);
  border:1px solid var(--input-border); border-radius:var(--input-radius);
  font-size:var(--input-font-size); line-height:1.2; outline:none;
  background:#fff; transition: border .15s, box-shadow .15s, background .2s;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
input:focus, select:focus, textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); }

/* Ícono de input + toggle de password */
.field{ position:relative; }
.field .input-addon{
  position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
  color:#9aa4b2; font-size:18px; pointer-events:none;
}
.input-with-icon{ padding-inline-start:38px !important; }
.password-toggle{
  position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:#64748b; cursor:pointer; padding:6px; border-radius:8px;
}
.password-toggle:hover{ color:#0f2342; background:#f3f6ff; }

/* Estados */
.is-error{ border-color:var(--danger) !important; box-shadow:0 0 0 4px rgba(239,68,68,.18) !important; }
.is-success{ border-color:var(--success) !important; box-shadow:0 0 0 4px rgba(34,197,94,.18) !important; }
.hint{ font-size:.82rem; color:var(--muted); margin-top:.3rem; }
.hint.error{ color:#b91c1c; }

/* Layouts del form */
.field-group{ display:flex; gap:.5rem; flex-wrap:wrap; }
.form-grid{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:720px){
  .form-grid.cols-2{ grid-template-columns:1fr 1fr; }
  .form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; }
}

/* Cámara / adjuntos */
.camera-label{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  background:#0077cc; color:#fff; padding:.45rem .6rem; border-radius:8px; cursor:pointer;
  font-size:.85rem; border:1px solid rgba(0,0,0,.05); transition: background .2s, transform .05s;
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}
.camera-label:hover{ background:#005fa3; }
.camera-label:active{ transform:translateY(1px); }
.camera-label .attach-text{ font-size:.75rem; color:#dbeafe; }

/* Textareas auto-grow */
.obs,.obs-auto{ min-height:28px; line-height:1.25; overflow-y:hidden; resize:none; }

/* ===========================
   ✅ TABLA DE RESULTADOS (test)
=========================== */
.test-table{
  width:100%; border-collapse:separate; border-spacing:0; margin-top:1rem; table-layout:fixed;
  font-size:.9rem; border-radius:10px; overflow:hidden; box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.test-table th,.test-table td{ border:1px solid #e5e7eb; padding:.6rem; text-align:center; vertical-align:middle; word-wrap:break-word; }
.test-table th{ background:#f2f6ff; font-weight:800; color:#0f2342; }
.test-table input[type="text"], .test-table input[type="number"], .test-table select{
  width:100%; max-width:100%; box-sizing:border-box; padding:.35rem .45rem; font-size:.86rem; border-radius:8px;
}
.na-btn{
  background:#f8fafc; border:1px dashed #cbd5e1; color:#334155; padding:.35rem .55rem; cursor:pointer; font-size:.8rem;
  margin-bottom:4px; border-radius:8px; transition: background .2s, border-color .2s, color .2s;
}
.na-btn:hover{ background:#eef2f7; }
.na-btn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ===========================
   🧷 Sticky actions
=========================== */
.sticky-actions{
  position:sticky; bottom:0; z-index:5;
  background: linear-gradient(180deg, transparent, rgba(245,247,251,.92) 30%);
  padding-top:10px; margin-top:10px;
}

/* ===========================
   ✨ LANDING / HOME
=========================== */
.landing-body{ background:#fff; color:var(--ink); }
.container{ width:min(1120px,92vw); margin-inline:auto; }
.section-head{ margin-bottom:1rem; }

.site-header{
  position:sticky; top:0; z-index:50; background:#fff;
  box-shadow:0 2px 16px rgba(0,0,0,.04); backdrop-filter:saturate(1.1) blur(2px);
}
.header-row{ display:flex; align-items:center; gap:24px; padding:14px 0; }
.brand-logo{ height:36px; width:auto; display:block; }
.main-nav ul{ display:flex; gap:20px; list-style:none; padding:0; margin:0; }
.main-nav a{ color:var(--ink); text-decoration:none; font-weight:800; }
.main-nav a:hover{ color:var(--brand-2); }
.main-nav .is-active a{ color:var(--brand-2); }
.header-cta{ margin-left:auto; display:flex; gap:10px; align-items:center; }
.nav-toggle{ display:none; background:none; border:0; padding:6px; margin-left:auto; }
.nav-toggle span{ display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; }

/* Hero / Slider */
.hero{ padding:0; background:var(--bg-grad); }
.slider{ position:relative; overflow:hidden; }
.slide{
  display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center;
  min-height:68vh; padding:48px 0; opacity:0; transform:translateX(8%); transition:opacity .5s, transform .5s;
}
.pure-image-slider .slide{
  /* Sliders exclusivamente de imágenes: no forzar grid ni altura fija */
  display:block; min-height:0; padding:0;
}
.pure-image-slider .slide img{
  width:100%; height:auto; object-fit:contain; display:block;
}
.slide.is-active{ opacity:1; transform:none; }
.hero-title{ margin:.2em 0 .4em; font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem); }
.lead{ font-size:clamp(1.02rem, .6vw + 1rem, 1.18rem); color:var(--ink); max-width:60ch; }
.cta-row{ display:flex; gap:12px; margin-top:16px; }
.slide-visual{
  height:48vh; border-radius:16px; box-shadow:0 10px 30px rgba(16,24,40,.12);
  background-size:cover; background-position:center;
}
.slide-1{ background-image: linear-gradient(135deg, rgba(15,98,254,.1), rgba(0,67,206,.1)), url('/uploads/img/index/hero-1.jpg'); }
.slide-2{ background-image: linear-gradient(135deg, rgba(15,98,254,.1), rgba(0,67,206,.1)), url('/uploads/img/index/hero-2.jpg'); }
.slide-3{ background-image: linear-gradient(135deg, rgba(15,98,254,.1), rgba(0,67,206,.1)), url('/uploads/img/index/hero-3.jpg'); }

/* Controles */
.slider-controls{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; z-index:5; }
.slider-controls .prev,.slider-controls .next{
  background:rgba(0,0,0,.5); color:#fff; border:none; width:36px; height:36px; border-radius:50%; cursor:pointer;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.slider-controls .prev:hover,.slider-controls .next:hover{ background:rgba(0,0,0,.7); }
.slider-controls .slider-dots{ display:flex; gap:8px; }
.slider-controls .slider-dots button{ width:10px; height:10px; border-radius:50%; border:none; background:#d1d5db; cursor:pointer; transition:background .2s; }
.slider-controls .slider-dots button[aria-current="true"]{ background:#0f62fe; }

/* Features (cards) */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.feature-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:22px;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover{ transform: translateY(-3px); box-shadow:0 12px 28px rgba(16,24,40,.12); border-color:#dfe7ff; }
.feature-card h3{ margin:.4rem 0 .35rem; }
.feature-icon{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:12px; font-weight:900; color:#fff; background:var(--brand-2); }

/* CTA Banner */
.cta-banner{
  margin-top:28px; padding:22px; border-radius:14px;
  background: linear-gradient(135deg, rgba(15,98,254,.08), rgba(0,67,206,.08));
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}
.cta-banner .cta-text h3{ margin:0 0 6px; }

/* Sponsors */
.sponsor-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; align-items:center; }
.sponsor{ background:#fff; border:1px dashed #d7ddea; border-radius:12px; padding:14px; display:flex; align-items:center; justify-content:center; height:82px; transition: transform .15s, box-shadow .2s; }
.sponsor img{ max-height:40px; width:auto; opacity:.85; filter:grayscale(100%) contrast(1.2); }
.sponsor:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(16,24,40,.12); }
.sponsor:hover img{ filter:none; opacity:1; }

/* Contact/Signup */
.contact-wrap{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }
.contact-form{ border:1px solid #e5e7eb; border-radius:14px; padding:18px; background:#fff; box-shadow:0 6px 18px rgba(16,24,40,.06); }
.contact-side{ align-self:start; }
.contact-side h3{ margin-top:0; }
.contact-side ul{ margin:0 0 10px; padding:0; list-style:none; }
.contact-side li+li{ margin-top:6px; }
.small{ font-size:.9rem; }
.signup-form{ max-width:720px; }

/* Footer */
.site-footer{ margin-top:36px; border-top:1px solid #e5e7eb; background:#fff; }
.footer-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; }
.footer-brand{ display:flex; gap:10px; align-items:center; }
.footer-brand img{ height:24px; width:auto; }

/* ===========================
   🖼️ Media uniforme
=========================== */
.media-wrap{
  width:100%; aspect-ratio: 4/3; border-radius:var(--radius); overflow:hidden;
  background:#f3f4f6; box-shadow:0 2px 10px rgba(16,24,40,.06);
}
.media-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ===========================
   📱 Responsive
=========================== */
.hamburger{ display:none; }
@media (max-width:1024px){
  .content{ margin-left:0; padding:1rem; max-width:100%; }
  .sidebar{ left:-220px; }
  .sidebar.active{ left:0; }
  .hamburger{
    display:block; position:fixed; top:15px; right:15px;
    background:var(--brand-2); color:#fff; border:none; padding:.6rem .8rem;
    border-radius:8px; cursor:pointer; z-index:1300;
  }
}
@media (max-width:980px){
  .slide{ grid-template-columns:1fr; min-height:auto; }
  .slide-visual{ height:38vh; }
  .features{ grid-template-columns:1fr 1fr; }
  .sponsor-grid{ grid-template-columns:repeat(3,1fr); }
  .contact-wrap{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .main-nav{ display:none; }
  .main-nav.is-open{ display:block; position:absolute; top:64px; left:0; right:0; background:#fff; border-top:1px solid #e5e7eb; }
  .main-nav.is-open ul{ flex-direction:column; padding:12px; }
  .nav-toggle{ display:inline-block; }
  .header-cta{ display:none; }
  .features{ grid-template-columns:1fr; }
  .sponsor-grid{ grid-template-columns:repeat(2,1fr); }

  /* Tablas a cards */
  .test-table, .test-table thead, .test-table tbody, .test-table th, .test-table td, .test-table tr{ display:block; width:100%; }
  .test-table thead{ display:none; }
  .test-table tr{ margin-bottom:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px; box-shadow:0 4px 14px rgba(16,24,40,.05); }
  .test-table td{ border:none; display:flex; justify-content:space-between; gap:10px; padding:8px 6px; text-align:left; }
  .test-table td::before{ content:attr(data-label); font-weight:800; color:var(--muted); flex:1; padding-right:10px; }

  .table-test, .table-test thead, .table-test tbody, .table-test th, .table-test td, .table-test tr{ display:block; width:100%; }
  .table-test thead{ display:none; }
  .table-test tr{ margin-bottom:12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; padding:8px; box-shadow:0 4px 14px rgba(16,24,40,.05); }
  .table-test td{ border:none; display:flex; justify-content:space-between; gap:10px; padding:8px 6px; text-align:left; }
  .table-test td::before{ content:attr(data-label); font-weight:800; color:var(--muted); flex:1; padding-right:10px; }

  .toolbar{ gap:8px; }
  .search{ flex:1 1 100%; }
}

/* ===========================
   🔬 Utilidades / Alertas
=========================== */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-1{ margin-bottom:.25rem !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:.75rem !important; }
.text-muted{ color:var(--muted) !important; }
.w-100{ width:100% !important; }

.alert{ border-radius:12px; padding:12px 14px; margin:8px 0; }
.alert-success{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert-danger{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:18px;
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.card:hover{ transform: translateY(-2px); border-color:#dfe7ff; box-shadow:0 10px 26px rgba(16,24,40,.12); }

/* ===========================
   📄 Reportes Profesionales Section (layout alternado)
=========================== */
.reportes-rows{ display:flex; flex-direction:column; gap:34px; margin-top:24px; }
.reporte-row{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
.reporte-row.reverse{ grid-template-columns:.9fr 1.1fr; }
.reporte-col .media-wrap{ aspect-ratio:16/9; }
.text-col h3{ margin:.1rem 0 .5rem; font-size:1.25rem; color:#0f2342; }
.text-col p{ margin:0 0 .6rem; color:#374151; line-height:1.5; }
.bullets{ margin:0; padding-left:1.1rem; }
.bullets li+li{ margin-top:.25rem; }

@media (max-width: 980px){
  .reporte-row,
  .reporte-row.reverse{ grid-template-columns:1fr; }
}