/* ---------- Design Tokens & Base ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root{
  --primary-500:#6273FF;
  --primary-50:#EEF0FE;

  --neutral-900:#0F172A;
  --neutral-700:#475569;
  --neutral-200:#E2E8F0;
  --neutral-100:#F1F5F9;
  --neutral-50:#F8FAFC;

  --radius-lg:1rem;         /* ~16px */
  --radius-xl:1.25rem;      /* ~20px */
  --shadow-sm:0 2px 8px rgba(15,23,42,0.06);
  --shadow-md:0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg:0 16px 40px rgba(15,23,42,0.10);

  --h:48px;                 /* altura estándar de control/botón */
  --gap:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',sans-serif;
  background:var(--neutral-50);
  color:var(--neutral-900);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* ---------- Utils ---------- */
.container,
.responsive-container{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
}

.section-title{
  font-size:1.25rem;       /* text-xl */
  font-weight:600;         /* font-semibold */
  color:var(--neutral-900);
  letter-spacing:.2px;
  margin:8px 0 16px;
}

.subtle{
  font-size:.875rem;       /* text-sm */
  color:var(--neutral-700);
}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--neutral-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:24px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:#dce3ef;
}

/* ---------- Inputs (Command Bar style) ---------- */
.input-group{
  position:relative;
  display:flex;
  align-items:center;
  height:var(--h);
  background:#fff;
  border:1px solid var(--neutral-200);
  border-radius:9999px; /* rounded-full */
  padding:0 16px 0 44px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-group:hover{ border-color:#cdd6e5 }
.input-group:focus-within{
  border-color:var(--primary-500);
  box-shadow:0 0 0 3px rgba(98,115,255,.15);
}
.input-group .icon{
  position:absolute; left:14px; width:20px; height:20px; color:var(--neutral-700); pointer-events:none;
}
.input{
  width:100%; height:100%;
  border:0; outline:0; background:transparent;
  font-size:.95rem; color:var(--neutral-900);
}
.input::placeholder{ color:#94A3B8 }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 18px;
  border-radius:9999px; border:1px solid transparent;
  font-weight:600; font-size:.95rem; line-height:1;
  transition:all .25s ease; cursor:pointer; user-select:none;
}
.btn .icon{ width:20px; height:20px }
.btn-primary{
  background:var(--primary-500); color:#fff; box-shadow:var(--shadow-md);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.btn-ghost{
  background:#fff; color:var(--neutral-900);
  border-color:var(--neutral-200);
}
.btn-ghost:hover{
  background:var(--neutral-100); border-color:#cfd7e6; transform:translateY(-1px);
}

/* Back-compat: mantener .btn-ver-pdf para no romper llamadas existentes */
.btn-ver-pdf{ composes: btn btn-primary; } /* si tu build no soporta 'composes', deja ambas clases en el HTML */

/* ---------- Filtros contenedor ---------- */
.filtros-altas{
  display:grid; grid-template-columns:1.5fr 1fr 1fr auto;
  gap:var(--gap); align-items:center;
}
.filtros-card{ padding:16px; }

/* ---------- Data Table ---------- */
.table-container{ border-radius:var(--radius-xl); overflow:hidden; }
.table-wrapper{ overflow:auto; border:1px solid var(--neutral-200); border-radius:var(--radius-xl); background:#fff; box-shadow:var(--shadow-md); }
.altas-table{
  width:100%; border-collapse:separate; border-spacing:0; min-width:760px;
  font-size:.95rem;
}
.altas-table thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg, var(--primary-50), #fff);
  color:var(--neutral-700);
  font-weight:600; text-align:left;
  padding:14px 16px; border-bottom:1px solid var(--neutral-200);
}
.altas-table td{
  padding:14px 16px; vertical-align:middle; color:var(--neutral-900);
  border-bottom:1px solid var(--neutral-200);
}
.altas-table tbody tr:hover{ background:var(--neutral-50) }
.altas-table tbody tr:nth-child(even){ background:#fff }

/* ---------- Mobile table → cards ---------- */
@media (max-width: 768px){
  .container,.responsive-container{ padding:16px }
  .filtros-altas{ grid-template-columns:1fr; }
  .table-wrapper{ border:none; box-shadow:none; overflow:visible }
  .altas-table{ min-width:unset; width:100%; border-spacing:0 12px }
  .altas-table thead{ display:none }
  .altas-table tbody tr{
    display:block; background:#fff; border:1px solid var(--neutral-200);
    border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
    padding:12px 16px; transition:transform .2s ease, box-shadow .2s ease;
  }
  .altas-table tbody tr:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
  .altas-table tbody td{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; border-bottom:1px dashed var(--neutral-200);
  }
  .altas-table tbody td:last-child{ border-bottom:0; padding-top:12px }
  .altas-table tbody td::before{
    content: attr(data-label);
    font-size:.8rem; color:var(--neutral-700); margin-right:12px;
  }
}

/* ---------- Detalle (Ficha) ---------- */
.detalle-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:8px 0 30px;
}
.detalle-item{
  background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-xl);
  padding:16px; box-shadow:var(--shadow-md); transition:transform .25s ease, box-shadow .25s ease;
}
.detalle-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }
.detalle-item strong{ display:block; font-size:.8rem; color:var(--neutral-700); margin-bottom:6px }
.detalle-item span{ font-size:.95rem; color:var(--neutral-900) }
.detalle-folder{ color:var(--primary-500); font-weight:600; }

.archivo-listado .section-subtitle{
  font-size:.95rem; color:var(--neutral-700); margin-bottom:8px;
}
.archivo-listado ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.archivo-listado li{
  background:#fff; border:1px solid var(--neutral-200); border-radius:var(--radius-lg);
  padding:12px; box-shadow:var(--shadow-sm); animation:fadeSlideIn .35s ease both;
}
.archivo-listado img{
  max-width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow-sm); display:block; margin:8px 0;
}
.archivo-listado iframe{
  width:100%; height:320px; border:1px solid var(--neutral-200); border-radius:12px; margin:8px 0;
}

/* Responsive detalle */
@media (max-width:1024px){
  .detalle-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  .detalle-grid{ grid-template-columns:1fr; gap:14px }
}

/* ---------- Animations ---------- */
@keyframes fadeSlideIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
.animate-fadeIn{ animation:fadeSlideIn .4s ease forwards }

/* ---------- Helpers ---------- */
.text-center{ text-align:center }
.text-gray-500{ color:#6B7280 }
.text-red-500{ color:#EF4444 }
.icon-5{ width:20px; height:20px }