/*public_html/assets/css/style.css*/
/* =========================
   TOKENS / VARIABLES
   ========================= */
:root{
  /* Brand / UI */
  --ui-brand: #0A2540;
  --ui-brand-hover: #173a65;
  --ui-danger: #b02a37;
  --ui-danger-hover: #8c202a;

  --ui-text: #111827;
  --ui-muted:#6b7280;

  --ui-surface:#ffffff;
  --ui-bg:#ffffff;
  --ui-bd:#d1d5db;
  --ui-bd-hover:#b6bcc6;
  --ui-focus:#0A2540;

  --page-bg:#f6f7fb;     /* fondo general */
  --card-bg:#ffffff;     /* tarjetas/filas */
  --table-bd:#e5e7eb;

  --radius:10px;
}

/* Dark mode */
html[data-theme="dark"]{
  --ui-brand:#1f4fbf;
  --ui-brand-hover:#2960e3;
  --ui-danger:#e05454;
  --ui-danger-hover:#ff6d6d;

  --ui-text:#e5e7eb;
  --ui-muted:#9aa3af;

  --ui-surface:#111827;
  --ui-bg:#0e1520;
  --ui-bd:#293241;
  --ui-bd-hover:#3a4759;
/*  --ui-focus:#7aa2ff;*/
  --ui-focus:#0A2540;

  --page-bg:#0b1220;
  --card-bg:#111827;
  --table-bd:#1f2937;
}

/* =========================
   RESETS / BASE
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif}
body{background:var(--page-bg); color:var(--ui-text); transition:background .25s ease,color .25s ease}
a{color:var(--ui-brand); text-decoration:none}

.container{max-width:1100px; margin-inline:auto; padding:0 16px}
.container-footer{display: flex;justify-content: center; align-items: center; overflow-wrap: break-word; max-width:600px; margin-inline:auto; padding:0 12px;line-height: 0.25%}
.section{padding:22px 0}
.section h3 {
  color: var(--ui-brand);
  font-weight: 700;
  margin-bottom: 12px;
}

.section p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.section p strong {
  color: var(--ui-brand);
}


/* =========================
   BOTONES
   ========================= */
button,
input[type="submit"],
.actions button{
  background:var(--ui-brand);
  color:#fff;
  border:0;
  border-radius:8px;
  padding:6px 14px;
  font-size:.9rem;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
button:hover,
input[type="submit"]:hover,
.actions button:hover{ background:var(--ui-brand-hover) }
button:disabled{ opacity:.6; cursor:not-allowed }

.btn-primary,.btn-ghost{
  display:inline-block; border-radius:10px; padding:10px 18px; font-weight:600
}
.btn-primary{ background:var(--ui-brand); color:#fff }
@media (max-width: 600px){
   .btn-primary{ background-color: transparent}
}
.btn-primary:hover{ background:var(--ui-brand-hover) }
.btn-ghost{ color:var(--ui-text); border:1px solid var(--ui-bd) }
.btn-ghost:hover{ border-color:var(--ui-bd-hover); background:color-mix(in oklab, var(--ui-text) 6%, transparent) }

.btn-action{
  display:inline-block; background:var(--ui-brand); color:#fff;
  padding:5px 12px; border-radius:8px; font-size:.85rem; margin-right:4px;
  transition:background .2s ease;
}
.btn-action:hover{ background:var(--ui-brand-hover) }
.btn-action.danger{ background:var(--ui-danger) }
.btn-action.danger:hover{ background:var(--ui-danger-hover) }

/* =========================
   FORMULARIOS
   ========================= */
form, .filters { gap:12px }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea, select{
  width:100%;
  background:var(--ui-surface);
  border:1px solid var(--ui-bd);
  border-radius:10px;
  padding:10px 12px;
  font-size:.95rem;
  color:var(--ui-text);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  max-width:680px;
}
::placeholder{ color:var(--ui-muted) }
input:focus, textarea:focus, select:focus{
  border-color:var(--ui-focus);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--ui-focus) 25%, transparent);
}
select{
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size:6px 6px,6px 6px,2.5rem 100%;
  background-repeat:no-repeat;
  appearance:none;
  padding-right:2.5rem;
}
.input-file{
  display:inline-flex; align-items:center; gap:10px;
  background:#f3f4f6; border:1px solid var(--ui-bd); border-radius:10px;
  padding:8px 10px; max-width:680px;
}
.input-file input[type="file"]{ border:0; padding:0 }
label{ display:block; font-weight:600; margin:8px 0 6px; color:var(--ui-text) }
.form-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.form-row .grow{ flex:1 1 280px }
.section-divider{ height:1px; background:#e5e7eb; margin:18px 0 }

/* =========================
   TABLAS
   ========================= */
table{width:100%; border-collapse:separate; border-spacing:0 10px}
thead th{
  text-align:left; font-size:.9rem; color:#374151; font-weight:700; padding:10px 12px
}
tbody tr{ background:var(--card-bg); border:1px solid var(--table-bd); border-radius:10px }
tbody td{ padding:12px; border-top:1px solid var(--table-bd) }
tbody tr td:first-child{ border-left:1px solid var(--table-bd); border-top-left-radius:10px; border-bottom-left-radius:10px }
tbody tr td:last-child{ border-right:1px solid var(--table-bd); border-top-right-radius:10px; border-bottom-right-radius:10px }
td.actions{ white-space:nowrap; display:flex; gap:6px; align-items:center }

/* =========================
   ALERTAS / LOGIN BOX
   ========================= */
.alert{ padding:10px; background:#fff3f3; border:1px solid #ffd3d3; color:#b45454; border-radius:10px; margin:10px 0 }
.success{ padding:10px; background:#eafcf1; border:1px solid #c7f1d6; color:#0a7a44; border-radius:10px; margin:10px 0 }
.login-container{ max-width:380px; margin:80px auto; border:1px solid var(--ui-bd); border-radius:14px; padding:26px; background:var(--ui-surface); box-shadow:0 10px 20px rgba(0,0,0,.04) }
.login-container h2{ margin-top:0 }

/* =========================
   HEADER COMPARTIDO (público + panel)
   ========================= */
.app-header{ background:var(--card-bg); border-bottom:1px solid var(--ui-bd) }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ui-text) }
.brand img{ height:126px; display:center }
@media (max-width: 600px){ .brand img{ height:92px } }
.brand span{ font-weight:700; letter-spacing:.2px }

/* nuevo para tratar aspecto de logo*/
/* ====== Marca refinada ====== */
.brand-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--ui-text);
}
.brand-logo{
  height:48px; width:auto; flex-shrink:0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
  transition: transform .25s ease;
}
.brand-link:hover .brand-logo{ transform:scale(1.05); }

.brand-text{
  display:flex; flex-direction:column; line-height:1.1;
}
.brand-name{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--ui-brand);
}
html[data-theme="dark"] .brand-name{ color:var(--ui-brand-hover); }

.brand-sub{
  font-size:.85rem;
  color:var(--ui-muted);
  margin-top:1px;
}

html[data-theme="dark"] .brand-logo{
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.1));
}

/*hasta acá*/

/* nav unificado */
.app-nav,
.dash-nav, .main-nav{ display:flex; gap:14px; align-items:center }
.app-nav a,
.dash-nav a, .main-nav a{
  color:var(--ui-text); text-decoration:none; padding:8px 10px; border-radius:8px;
  transition: background .15s ease, color .15s ease;
}
.app-nav a:hover,
.dash-nav a:hover, .main-nav a:hover{ background:color-mix(in oklab, var(--ui-text) 8%, transparent) }
.app-nav a.active,
.dash-nav a.active, .main-nav a.active{ background:var(--ui-brand); color:#fff }

/* chip usuario + logout */
.userbox{ display:flex; align-items:center; gap:10px }
.userchip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--ui-surface); border:1px solid var(--ui-bd);
  border-radius:999px; padding:4px 10px; color:var(--ui-text)
}
.userchip .avatar{
  width:22px; height:22px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--ui-brand); color:#fff; font-weight:700; font-size:.8rem
}
.userchip em{ color:var(--ui-muted); font-style:normal; font-size:.9em; margin-left:4px }

/* botón ghost (cerrar sesión / contacto / acceso) */
.btn-ghost{ display:inline-block; text-decoration:none; color:var(--ui-text);
  border:1px solid var(--ui-bd); border-radius:999px; padding:6px 12px;
  transition:border-color .15s ease, background .15s ease }
.btn-ghost:hover{ border-color:var(--ui-bd-hover); background:color-mix(in oklab, var(--ui-text) 8%, transparent) }

/* toggle tema */
.theme-toggle{ display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ui-text);
  border:1px solid var(--ui-bd); border-radius:999px; padding:4px 10px; font-size:.9rem; cursor:pointer
}
.theme-toggle:hover{ border-color:var(--ui-bd-hover) }

/* Responsive header (panel y público) */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--ui-bd);
  border-radius:8px; padding:6px 10px; color:var(--ui-text)
}
.nav-toggle:hover{ border-color:var(--ui-bd-hover) }
@media (max-width: 860px){
  .app-nav{ display:none; position:absolute; left:0; right:0; top:68px;
    background:var(--card-bg); border-bottom:1px solid var(--ui-bd);
    padding:10px 16px; flex-direction:column; gap:6px
  }
  .app-header.open .app-nav{ display:flex }
  .nav-toggle{ display:block }
  .userbox{ margin-left:auto }
}

/* =========================
   HERO PÚBLICO + WATERMARK PANEL
   ========================= */
.hero{
  position:relative; min-height:52vh; display:flex; align-items:center; color:#fff
}
.hero-legal{
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(10,37,64,.65), transparent 60%),
    linear-gradient(to bottom, rgba(10,37,64,.75), rgba(10,37,64,.35)),
    url('../img/hero-legal.webp') center/cover no-repeat
}
.hero .hero-inner{ padding:64px 0 }
.hero h1{ color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.35) }
.hero p{ color:#eef2f7; max-width:760px; margin-top:10px }
.hero-ctas{ display:flex; gap:12px; margin-top:22px }
html[data-theme="dark"] .hero-legal{
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(14,20,28,.8), transparent 60%),
    linear-gradient(to bottom, rgba(6,12,20,.85), rgba(6,12,20,.55)),
    url('../img/hero-legal.webp') center/cover no-repeat
}

/* Watermark sutil en home del panel */
.watermark-legal{ position:relative; isolation:isolate }
.watermark-legal::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url('../img/hero-legal.webp') center/cover no-repeat;
  opacity:.055; filter:grayscale(100%) contrast(110%);
  mask-image: radial-gradient(60% 60% at 15% 20%, rgba(0,0,0,.7), transparent 70%);
}
html[data-theme="dark"] .watermark-legal::before{ opacity:.07 }

/* =========================
   CARDS / BLOQUES (público)
   ========================= */
.card{
  background:var(--card-bg);
  border:1px solid var(--table-bd);
  border-radius:14px;
  padding:18px;
  transition: transform .15s ease, box-shadow .15s ease
}
.card:hover{ transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.06) }

/* =========================
   FOOTER
   ========================= */
.site-footer{ background:var(--page-bg); padding:24px 0; margin-top:48px; font-size:12px; color:var(--ui-muted); border-top:1px solid var(--ui-bd) }

/* =========================
   RESPONSIVE EXTRAS
   ========================= */
@media (max-width: 720px){
  .filters{ flex-wrap:wrap }
  .filters input[type="text"]{ max-width:none; flex:1 1 100% }
  table{ font-size:.95rem }
  .hero .hero-inner{ padding:42px 0 }
}
@media (max-width: 600px){
  .brand img{ height:100px }
  .hero h1{ font-size:28px }
}

/* ====== Header compacto y sobrio ====== */

/* altura del header un poco menor */
.header-inner{ min-height:56px }

/* grupo derecho */
.header-actions{
  display:flex; align-items:center; gap:12px;
}

/* chip de usuario más discreto */
.userchip.compact{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0; padding:0; color:var(--ui-text);
}
.userchip.compact .avatar{
  width:26px; height:26px; border-radius:50%;
  display:inline-grid; place-items:center;
  background:var(--ui-brand); color:#fff; font-weight:700; font-size:.85rem;
}
.userchip.compact .name{
  font-weight:600; line-height:1; max-width:160px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.userchip.compact .role{
  color:var(--ui-muted); font-size:.85em; margin-left:2px;
}

/* logout como enlace minimal */
.link-logout{
  color:var(--ui-text); text-decoration:none; font-weight:600;
  padding:0; border:0; border-radius:0;
  opacity:.9; transition:opacity .15s ease, color .15s ease;
}
.link-logout:hover{ color:var(--ui-brand); opacity:1 }

/* botón icono (tema y hamburguesa) */
.icon-btn{
  background:transparent; border:0; padding:6px; border-radius:8px;
  color:var(--ui-text); line-height:1; font-size:1rem; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  border:1px solid var(--ui-bd);
}
.icon-btn:hover{ border-color:var(--ui-bd-hover) }

/* el botón ☰ ya existe, unificamos aspecto */
.nav-toggle{
  background:transparent; border:1px solid var(--ui-bd);
  border-radius:8px; padding:6px 10px; color:var(--ui-text);
}
.nav-toggle:hover{ border-color:var(--ui-bd-hover) }

/* ====== Responsive: ahorrar espacio en móvil ====== */
@media (max-width: 860px){
  /* el menú colapsa (esto ya lo tenías con .app-header.open) */
  .app-nav{ display:none; position:absolute; left:0; right:0; top:100px }
  .app-header.open .app-nav{ display:flex }
}

/* Muy chico: solo avatar + iconos, el nombre/rol y el texto “Cerrar sesión” se ocultan */
@media (max-width: 520px){
  .userchip.compact .name,
  .userchip.compact .role{ display:none }
  .link-logout{ font-size:0; }
  .link-logout::after{
    content:"⎋"; font-size:1rem; color:var(--ui-text);
  }
}

/* Tema oscuro coherente */
html[data-theme="dark"] .link-logout:hover{ color:var(--ui-brand-hover) }

/*------*/

/* ======== menú desplegable de usuario ======== */
.user-menu{ position:relative; }
.user-trigger{
  display:flex; align-items:center; gap:8px;
  background:transparent; border:1px solid var(--ui-bd);
  border-radius:8px; padding:4px 8px; color:var(--ui-text);
  cursor:pointer; transition:border-color .15s ease;
}
.user-trigger:hover{ border-color:var(--ui-bd-hover); }
.user-trigger .avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--ui-brand); color:#fff;
  display:grid; place-items:center;
  font-weight:700; font-size:.85rem;
}
.user-trigger .user-info{ display:flex; flex-direction:column; line-height:1.1; }
.user-trigger .user-info strong{ font-size:.85rem; }
.user-trigger .user-info small{ color:var(--ui-muted); font-size:.75rem; }
.user-trigger .chevron{ margin-left:2px; }

.user-dropdown{
  display:none;
  position:absolute; right:0; top:calc(100% + 6px);
  background:var(--card-bg);
  border:1px solid var(--ui-bd);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  min-width:150px;
  z-index:100;
}
.user-dropdown a{
  display:block; padding:8px 12px; color:var(--ui-text); text-decoration:none;
  font-size:.9rem; transition:background .15s ease;
}
.user-dropdown a:hover{ background:color-mix(in oklab, var(--ui-text) 8%, transparent); }
.user-dropdown a.logout{ color:var(--ui-danger); }

.user-menu.open .user-dropdown{ display:block; }

/* responsive: reduce padding en móvil */
@media (max-width: 600px){
  .user-trigger .user-info{ display:none; }
}

/* ===== Header sticky + sombra suave al hacer scroll ===== */
.app-header{
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in oklab, var(--card-bg) 92%, transparent);
  backdrop-filter: saturate(120%) blur(6px);
  transition: box-shadow .2s ease, background .2s ease;
}

html[data-theme="dark"] .brand-logo{
  filter: drop-shadow(0 2px 3px rgba(255,255,255,.12));
}

.header-shadow .app-header{
  box-shadow: 0 10px 26px rgba(158, 89, 89, 0.08), 0 1px 0 rgba(180, 60, 60, 0.04);
  background: color-mix(in oklab, var(--card-bg) 98%, transparent);
}

/* ===== Modo oscuro un toque más elegante ===== */
html[data-theme="dark"] {
  /* ya tenés variables; afinamos levemente el contraste */
  --page-bg:#183f64; /*fondo de la página*/
  --card-bg:#0f1624;
  --table-bd:#182234;
  --ui-bd:#795902;
  --ui-bd-hover:#2a3550;
  --ui-brand:#6ea2ff;         /* azul sobrio */
  --ui-brand-hover:#8ab4ff;
  --ui-danger:#ff6b6b;
  --ui-danger-hover:#ff8383;
}

/* ===== Botón de tema: icono SVG sol/luna ===== */
.icon-btn.theme-switch{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border:1px solid var(--ui-bd); border-radius:50%;
  background: transparent; color: var(--ui-text);
}
.icon-btn.theme-switch:hover{ border-color: var(--ui-bd-hover); }

/* contenedor de los dos iconos, cruzamos opacidades */
.theme-ico{ position:relative; width:18px; height:18px; }
.theme-ico svg{ position:absolute; inset:0; width:100%; height:100%;
  transition: opacity .18s ease, transform .25s ease;
}

/* estado por defecto (tema claro): sol visible */
.theme-ico .sun{ opacity:1; transform: rotate(0deg); }
.theme-ico .moon{ opacity:0; transform: rotate(-25deg) scale(.92); }

/* en dark: luna visible */
html[data-theme="dark"] .theme-ico .sun{ opacity:0; transform: rotate(25deg) scale(.92); }
html[data-theme="dark"] .theme-ico .moon{ opacity:1; transform: rotate(0deg); }


/*nuevo*/
/* ======= Hero premium (portada) ======= */
:root{
  --ff-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

.hero-premium{
  position: relative;
  min-height: clamp(420px, 60vh, 720px);
  display:flex; align-items:center;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
  /* Imagen legal de fondo */
  background:
    linear-gradient(0deg, rgba(6,12,20,.55), rgba(6,12,20,.35)),
    url('../img/hero-legal.webp') center/cover no-repeat;
}

/* Vignette y texturita suave */
.hero-premium::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 600px at 18% 22%, rgba(10,37,64,.65), transparent 60%),
    radial-gradient(900px 420px at 90% 85%, rgba(10,37,64,.35), transparent 60%);
  mix-blend-mode: screen; pointer-events:none;
}
.hero-premium::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(1200px 500px at 50% 110%, rgba(0,0,0,.55), transparent 70%);
}

html[data-theme="dark"] .hero-premium{
  background:
    linear-gradient(0deg, rgba(6,12,20,.72), rgba(6,12,20,.55)),
    url('../img/hero-legal.webp') center/cover no-repeat;
}
html[data-theme="dark"] .hero-premium::before{
  background:
    radial-gradient(1200px 600px at 18% 22%, rgba(20,30,50,.75), transparent 60%),
    radial-gradient(900px 420px at 90% 85%, rgba(20,30,50,.45), transparent 60%);
}

/* Copys */
.hero-wrap{ padding: clamp(42px, 7vw, 80px) 0; }
.hero-copy{ max-width: 840px; }
.hero-copy .eyebrow{
  display:inline-block; letter-spacing:.18em; text-transform:uppercase;
  font-size:.78rem; background:rgba(255,255,255,.14); padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
}
.hero-copy h1{
  font-family: var(--ff-serif);
  font-size: clamp(30px, 4.8vw, 24px);
  line-height: 1.1;
  margin: 12px 0 10px;
  text-wrap: balance;
}
.hero-copy .accent{ color: #cdb886; } /* dorado sobrio */
html[data-theme="dark"] .hero-copy .accent{ color: #e0cfa0; }

.hero-copy .sub{
  color: #eef2f7; max-width: 720px; margin: 10px 0 16px;
  font-size: clamp(16px, 2.2vw, 18px);
}

/* CTAs (reusa tus botones) */
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* Trust bar: bullets elegantes */
.trustbar{
  display:flex; gap:16px; flex-wrap:wrap;
  list-style:none; padding:0; margin: 18px 0 0;
  color: #e5e9f2;
  font-size: .95rem;
}
.trustbar .dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px;
  background: #cdb886;
}

/* Responsive hero */
@media (max-width: 720px){
  /*.hero-copy h1{ font-size: clamp(28px, 7vw, 26px); }*/
  .hero-copy h1{ font-size: clamp(18px, 4vw, 10px); }
  /*.hero-copy .sub{ font-size: 1rem; }*/
  .hero-copy .sub{ font-size: 12px; }
}
@media (max-width: 600px){
  .hero-copy h1{ font-size: clamp(18px, 4vw, 10px); }
  .hero-copy .sub{ font-size: 12px; }
}
@media (max-width: 640px){
  .hero-copy h1{ font-size: clamp(18px, 4vw, 10px); }
  .hero-copy .sub{ font-size: 12px; }
}
@media (max-width: 420px){
  .hero-copy h1{ font-size: clamp(18px, 4vw, 10px); }
  .hero-copy .sub{ font-size: 12px; }
}
@media (max-width: 420px){
  .hero-ctas{ flex-direction: column; }
  .hero-ctas .btn-ghost{ text-align:center; }
}

/* Respeta accesibilidad: reduce animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .theme-ico svg{ transition: none; }
}
/*Para que el hero no quede “tapado” por el header en móvile*/
@media (max-width: 600px){
  .header-inner{ min-height: 54px; }
}


/*mejora en versión donde el logo quede dentro de un círculo o marco dorado transparente (tipo insignia de estudio jurídico).
También una versión “horizontal compacta” del logo + texto (más adecuada para header fijo en móviles y para el dashboard)*/

/* ===== Insignia dorada para el logo ===== */
:root{
  --gold-1:#cdb886;   /* dorado sobrio */
  --gold-2:#e3d5ad;   /* brillo */
  --gold-3:#a78b55;   /* sombra */
}

.brand-emblem{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:var(--ui-text);
}

/* ===== Insignia dorada ultrasutil (versión refinada) ===== */
:root{
  --gold-1:#d6c18a;   /* base */
  --gold-2:#ede1b5;   /* highlight */
  --gold-3:#b49a63;   /* sombra */
  --gold-alpha: .82;  /* opacidad general del aro */
}

html[data-theme="dark"]{
  --gold-1:#e3d5a2;
  --gold-2:#f2e8bf;
  --gold-3:#a98d57;
  --gold-alpha: .92;
}

.logo-badge{
  position:relative;
  width:120px; height:120px; flex:0 0 120px;
  border-radius:50%;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--card-bg) 88%, transparent);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);  /* sombra muy suave */
  overflow: hidden;
  isolation:isolate; /* asegura capas correctas */
}

/* Aro dorado ultrafino con brillo metálico (conic-gradient + máscara estrecha) */
/*
.logo-badge::before{
  content:"";
  position:absolute; inset:0;
  background:
    conic-gradient(from 230deg,
      color-mix(in oklab, var(--gold-2) 88%, var(--gold-1)),
      var(--gold-1),
      var(--gold-3),
      var(--gold-2),
      var(--gold-1)
    );
  */
  /* grosor del aro: subir  a 82/83 → más fino; bajar a 76/77 → más grueso */
 /*
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73%);
          mask: radial-gradient(closest-side, transparent 92%, #000 93%);
  opacity: var(--gold-alpha);
}
*/
/* Bisel/relieve sutil interior: gradiente radial invertido, muy bajo */
.logo-badge::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:
    radial-gradient(60% 60% at 40% 35%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(70% 70% at 65% 70%, rgba(0,0,0,.05), transparent 75%);
  pointer-events:none;
  mix-blend-mode: soft-light;
  opacity:.7;
}

/* Logo centrado: sin deformar y con micro-sombra */
.logo-badge img{
  width:100%; height:auto; z-index:1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.12));
  transition: transform .22s ease, filter .22s ease;
}

/* Hover sutil: micro-zoom y pulido */
.brand-emblem:hover .logo-badge img{
  transform: scale(1.045);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.14));
}

/* Tamaños compactos (p/headers chicos o dashboard) */
.brand--compact .logo-badge{ width:44px; height:44px; }
.brand--compact .logo-badge img{ width:66%; }

@media (max-width: 640px){
  .brand--compact .logo-badge{ width:40px; height:40px; }
}

/* para agregar el srcoll*/
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.docs{ min-width:640px; }
/*hasta acá*/


/* ======= ENCABEZADO STICKY PARA TABLAS ======= */
.table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Hace que el encabezado quede fijo al hacer scroll horizontal o vertical */
.rwd thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ui-brand, #0A2540) 25%, #ffffff);
  color: var(--ui-brand, #0A2540);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--ui-bd, #e5e7eb);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Sombra sutil cuando se pega al tope */
@media (min-width: 641px) {
  .table-wrap::-webkit-scrollbar {
    height: 8px;
  }
  .table-wrap::-webkit-scrollbar-thumb {
    background: var(--ui-bd-hover, #cbd5e1);
    border-radius: 4px;
  }
  .rwd thead th {
    box-shadow: 0 2px 3px rgba(0,0,0,.05);
  }
}
/* hasta aca ======= ENCABEZADO STICKY PARA TABLAS ======= */

/* ============================================
   TABLAS: sticky header + hover + responsive
   ============================================ */

/* Contenedor para scroll horizontal si hay muchas columnas */
.table-wrap {
  position: relative;
  overflow-x: auto;        /* scroll horizontal */
  overflow-y: auto;        /* 🔹 necesario para sticky vertical */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  max-height: 75vh;        /* 🔹 opcional: limita la altura y activa scroll vertical */
}

/* Encabezado fijo */
.rwd thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ui-brand, #0A2540) 25%, #ffffff);
  color: var(--ui-brand, #0A2540);
  font-weight: 700;
  box-shadow: inset 0 -1px 0 var(--ui-bd, #e5e7eb);
  transition: background 0.3s ease, color 0.3s ease;
}

/* Sombra sutil al quedar fijo */
@media (min-width: 641px) {
  .rwd thead th {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
  }
  .table-wrap::-webkit-scrollbar {
    height: 8px;
  }
  .table-wrap::-webkit-scrollbar-thumb {
    background: var(--ui-bd-hover, #cbd5e1);
    border-radius: 4px;
  }
}

/* Filas con efecto hover */
.rwd tbody tr {
  transition: background-color .2s ease, transform .15s ease;
}
.rwd tbody tr:hover {
  background: color-mix(in srgb, var(--ui-brand, #0A2540) 6%, #fff);
  transform: translateY(-1px);
}

/* En modo cards (móvil), el hover no aplica */
@media (max-width: 640px) {
  .rwd.rwd-cards tbody tr:hover {
    background: var(--ui-surface, #fff);
    transform: none;
  }
}
/* final de TABLAS: sticky header + hover + responsive */


/* ====== Resaltado sutil de fila al pasar el mouse ====== */
.rwd tbody tr {
  transition: background-color 0.25s ease, transform 0.1s ease;
}

.rwd tbody tr:hover {
  background-color: color-mix(in srgb, var(--ui-brand, #0A2540) 12%, #ec6a2d);
  transform: scale(1.002); /* muy leve “realce” visual */
  cursor: default;
}
/* fin de Resaltado sutil de fila al pasar el mouse ====== */

/* ====== Fila activa (seleccionada) ====== */
.rwd tbody tr.active {
  background-color: color-mix(in srgb, var(--ui-brand, #0A2540) 12%, #ec6a2d);
  box-shadow: inset 0 0 0 1px var(--ui-brand, #0A2540);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* fin de Fila activa (seleccionada) ====== */

/* ===== Equipo ===== */
.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.team-card{
  text-align:center;
  padding-top: 22px; /* aire extra sobre la foto */
}

.team-avatar{
  width: 132px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 12px auto;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  border: 2px solid color-mix(in oklab, var(--ui-brand) 14%, transparent);
}

.team-card h3{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin: 6px 0 4px;
}

.team-card p{
  color: var(--ui-muted);
  font-size: .95rem;
  margin: 0;
}

/* fallback si falta imagen */
.team-avatar[src=""], .team-avatar:not([src]){
  background: linear-gradient(135deg,#e5e7eb,#f3f4f6);
  border: 2px dashed var(--ui-bd);
}
/* === Equipo con foto rectangular + modo CV === */
.team-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.team-card{
  padding: 0;               /* la card ya tiene padding; lo movemos al body */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.team-media{
  margin: 0;
  line-height: 0;
  background: color-mix(in oklab, var(--ui-text) 6%, transparent);
}

.team-photo{
  width: 100%;
  aspect-ratio: 4 / 3;      /* rectangulares uniformes */
  object-fit: cover;        /* recorte elegante */
  display: block;
  border-bottom: 1px solid var(--ui-bd);
}

.team-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.team-body h3{
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ui-brand);
  margin: 2px 0 0;
}

.team-body .role{
  color: var(--ui-muted);
  font-size: .95rem;
  margin: 0 0 6px;
}

.team-actions{
  margin-top: auto;         /* empuja acciones al pie de la card */
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-small{
  padding: 6px 10px;
  font-size: .88rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* iconitos inline */
.btn-small .ico{
  width: 16px; height: 16px;
  fill: currentColor;
  display: inline-block;
}

/* Fallback si falta imagen */
.team-photo[src=""], .team-photo:not([src]){
  background: linear-gradient(135deg,#e5e7eb,#f3f4f6);
  aspect-ratio: 4/3;
}

.trustbar {
  list-style: none;
  padding: 0;
  margin: 0;
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: .5em;
  font-size: 1rem;
  line-height: 1.6;
}
.trustbar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
#trayectoria {
  font-weight: 600;
  color: var(--ui-brand, #fff);
  transition: color .3s ease;
  color:#fff;
}

.recursos-juridicos {
  padding: 60px 0;
}

.recursos-juridicos h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--ui-brand);
  text-align: center;
}

.recursos-juridicos .intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 2rem auto;
  color: var(--ui-muted);
}

.grid-recursos {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.recurso-card {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--ui-bd);
}

.recurso-card h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  color: var(--ui-brand);
}

.recurso-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recurso-card ul li {
  margin-bottom: .5rem;
}

.recurso-card a {
  color: var(--ui-brand-hover);
  text-decoration: none;
}

.recurso-card a:hover {
  text-decoration: underline;
}

.download-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.download-list li {
  margin-bottom: 0.5rem;
}

.download-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ui-brand-hover, #0A2540);
  font-weight: 500;
}

.download-list a::before {
  content: "⬇";
  font-size: 0.9rem;
  opacity: .8;
}

.download-list a:hover {
  text-decoration: underline;
}

.page-header {
  margin-bottom: 1.5rem;
}

.page-header p {
  color: var(--ui-muted, #6b7280);
  max-width: 720px;
}

.page-legal .page-header {
  margin-bottom: 2rem;
}

.page-legal .page-header h1 {
  font-size: 2rem;
  margin-bottom: .5rem;
}

.page-legal .page-header .lead {
  max-width: 720px;
  color: var(--ui-muted);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  color: var(--ui-muted);
  margin-bottom: .25rem;
}

.breadcrumb {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--ui-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.breadcrumb a {
  color: var(--ui-brand-hover);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.doc-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.doc-list-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ui-bd);
}

.doc-list-item:last-child {
  border-bottom: none;
}

.doc-meta h3 {
  margin: 0 0 .25rem;
}

.doc-meta p {
  margin: 0;
  color: var(--ui-muted);
}

.doc-tag {
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .15rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--ui-bd);
  margin-bottom: .35rem;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.link-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid var(--ui-bd);
}

.link-list li:last-child {
  border-bottom: none;
}

.link-list span {
  color: var(--ui-text);
}

.link-list a {
  font-size: .9rem;
  text-decoration: none;
  color: var(--ui-brand-hover);
}

.link-list a:hover {
  text-decoration: underline;
}

/* ===== Recursos Jurídicos ===== */

.recursos-wrapper {
  padding: 64px 0 80px;
  background: linear-gradient(
      180deg,
      rgba(10, 37, 64, 0.03),
      rgba(10, 37, 64, 0.01)
    );
}

/* Cabecera con texto + ilustración */
.recursos-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

.recursos-head-text h2 {
  font-size: clamp(1.9rem, 2.5vw, 2.3rem);
  margin-bottom: .5rem;
  color: var(--ui-brand, #0A2540);
  text-align: left;
}

.recursos-head-text .eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ui-muted, #6b7280);
  margin-bottom: .4rem;
}

.recursos-head-text .head-intro {
  color: var(--ui-muted, #6b7280);
  max-width: 34rem;
  margin-bottom: 1rem;
}

.head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.head-chips span {
  font-size: .8rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(6px);
}

/* Ilustración lateral */
.recursos-illu {
  justify-self: end;
}

.recursos-illu img {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .15);
  object-fit: cover;
}

/* Grid de tarjetas */
.recursos-juridicos {
  padding-top: .5rem;
}

.grid-recursos {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Tarjetas */
.recurso-card {
  position: relative;
  background: var(--card-bg, #ffffff);
  border-radius: 18px;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid rgba(148, 163, 184, .4);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.recurso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09);
  border-color: rgba(37, 99, 235, 0.35);
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.02), transparent 55%);
}

/* Tarjeta ancha (Enlaces Institucionales) */
.recurso-card-wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .recurso-card-wide {
    grid-column: span 1;
  }
}

.recurso-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(10, 37, 64, .06);
  backdrop-filter: blur(6px);
}

.recurso-icon svg {
  width: 22px;
  height: 22px;
  color: var(--ui-brand, #0A2540);
  opacity: 0.85;
  transition: opacity .2s ease;
}

.recurso-card:hover .recurso-icon svg {
  opacity: 1;
}



/* Texto dentro de tarjetas */
.recurso-card h3 {
  font-size: 1.1rem;
  margin-bottom: .75rem;
  color: var(--ui-brand, #0A2540);
}

.recurso-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recurso-card ul li + li {
  margin-top: .25rem;
}

.recurso-card a {
  color: var(--ui-brand-hover, #173a65);
  text-decoration: none;
  font-size: .95rem;
}

.recurso-card a:hover {
  text-decoration: underline;
}

.recurso-desc {
  margin-bottom: .75rem;
  font-size: .95rem;
  color: var(--ui-muted, #6b7280);
}

.recurso-link {
  font-size: .9rem;
  font-weight: 500;
}

/* Responsive */
@media (max-width: 900px) {
  .recursos-head {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
  }
  .recursos-illu {
    justify-self: start;
    order: -1;
  }
  .recursos-head-text h2 {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .recursos-wrapper {
    padding: 40px 0 56px;
  }
  .recursos-illu img {
    max-width: 260px;
  }
}



/*El fondo superior tiene una diagonal suave*/
/* ===== Recursos Jurídicos – Hero Diagonal ===== */

.recursos-wrapper {
  position: relative;
  padding: 56px 0 80px;
  overflow: hidden;
}

/* Fondo diagonal sólo en la parte superior (hero) */
.recursos-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 260px; /* altura del bloque rojo que marcaste */
  background: linear-gradient(
    135deg,
    #f5f7fb 0%,
    #f5f7fb 55%,
    #e2e8f0 55%,
    #d5def8 100%
  );
  z-index: -1;
}

/* Cabecera hero: texto + imagen */
.recursos-head {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
  align-items: center;
  gap: 3rem;
  margin-bottom: 2.5rem;
}

.recursos-head-text h2 {
  font-size: clamp(1.9rem, 2.5vw, 2.3rem);
  margin-bottom: .5rem;
  color: var(--ui-brand, #0A2540);
}

.recursos-head-text .eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ui-muted, #6b7280);
  margin-bottom: .4rem;
}

.recursos-head-text .head-intro {
  color: var(--ui-muted, #6b7280);
  max-width: 34rem;
  margin-bottom: 1rem;
}

.head-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.head-chips span {
  font-size: .8rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}

/* Imagen del hero, proporcionada y más compacta */
.recursos-illu {
  justify-self: end;
}

.recursos-illu img {
  display: block;
  max-width: 360px;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
  object-fit: cover;
}

/* ===== Grid de tarjetas ya existente ===== */

.recursos-juridicos {
  padding-top: .5rem;
}

.grid-recursos {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.recurso-card {
  position: relative;
  background: var(--card-bg, #ffffff);
  border-radius: 18px;
  padding: 1.5rem 1.6rem 1.4rem;
  border: 1px solid rgba(148, 163, 184, .4);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.recurso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.09);
  border-color: rgba(37, 99, 235, 0.35);
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.02), transparent 55%);
}

/* Tarjeta ancha (Enlaces) */
.recurso-card-wide {
  grid-column: span 2;
}

@media (max-width: 768px) {
  .recurso-card-wide {
    grid-column: span 1;
  }
}

/* Iconos dentro de las tarjetas (cuando uses los .webp) */
.recurso-icon {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.recurso-icon img {
  width: 90%;
  height: auto;
  display: block;
}

.recurso-card h3 {
  font-size: 1.1rem;
  margin-bottom: .75rem;
  color: var(--ui-brand, #0A2540);
}

.recurso-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recurso-card ul li + li {
  margin-top: .25rem;
}

.recurso-card a {
  color: var(--ui-brand-hover, #173a65);
  text-decoration: none;
  font-size: .95rem;
}

.recurso-card a:hover {
  text-decoration: underline;
}

.recurso-desc {
  margin-bottom: .75rem;
  font-size: .95rem;
  color: var(--ui-muted, #6b7280);
}

.recurso-link {
  font-size: .9rem;
  font-weight: 500;
}

/* Responsive hero */
@media (max-width: 992px) {
  .recursos-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .recursos-illu {
    justify-self: start;
    order: -1; /* imagen arriba en móviles */
    margin-bottom: 1rem;
  }
  .recursos-wrapper::before {
    height: 320px; /* un poco más alto para móviles */
  }
}

/* =============================
   MINI HERO / BANNER INTERNO
   ============================= */

.mini-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.2rem 1.4rem;
  border-radius: 18px;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #f9fafb, #edf2ff);
  border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

/* barrita de color a la izquierda */
.mini-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--mini-accent, #0A2540);
}

/* Icono circular */
.mini-hero-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.mini-hero-icon img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Texto */
.mini-hero-body {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.mini-hero-kicker {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--ui-muted, #6b7280);
}

.mini-hero-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ui-brand, #0A2540);
}

.mini-hero-sub {
  font-size: .9rem;
  color: var(--ui-muted, #6b7280);
}

/* Breadcrumb dentro del banner */
.mini-hero-breadcrumb {
  margin-top: .15rem;
  font-size: .8rem;
  color: var(--ui-muted, #6b7280);
}

.mini-hero-breadcrumb a {
  color: var(--ui-brand-hover, #173a65);
  text-decoration: none;
}

.mini-hero-breadcrumb a:hover {
  text-decoration: underline;
}

/* Variantes de color por área (solo definimos --mini-accent y ajustamos el fondo) */

.mini-hero--intelectual {
  --mini-accent: #4f46e5;
  background: linear-gradient(135deg, #eef2ff, #e0ecff);
}

.mini-hero--familia {
  --mini-accent: #0f766e;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--civil {
  --mini-accent: #2563eb;
  background: linear-gradient(135deg, #eff6ff, #e2e8f0);
}

.mini-hero--comercial {
  --mini-accent: #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

.mini-hero--laboral {
  --mini-accent: #16a34a;
  background: linear-gradient(135deg, #ecfdf3, #dcfce7);
}

.mini-hero--penal {
  --mini-accent: #dc2626;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
}

.mini-hero--mediaciones {
  --mini-accent: #7c3aed;
  background: linear-gradient(135deg, #f5f3ff, #e0e7ff);
}

/* Tratados */
.mini-hero--propiedad {
  --mini-accent: #2563eb;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--humanos {
  --mini-accent: #0f766e;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--penales {
  --mini-accent: #f59e0b;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--comercio {
  --mini-accent: #7c3aed;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--inmigracion {
  --mini-accent: #dc2626;
  background: linear-gradient(135deg, #ecfeff, #e0f2fe);
}

.mini-hero--economia {
  --mini-accent: #0284c7;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

/* Poderes */
.mini-hero--poderes {
  --mini-accent: #c75102;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

/* Enlaces */
.mini-hero--enlaces {
  --mini-accent: #02c76b;
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

/* Responsive */
@media (max-width: 640px) {
  .mini-hero {
    align-items: flex-start;
  }
}


/* Toolbar y filtros en dashboard recursos */
/* Filtros y formularios en dashboard */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 160px;
}

.filter-grow {
  flex: 1 1 220px;
}

.filter-actions {
  display: flex;
  gap: .5rem;
}

.filter-bar label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ui-muted, #6b7280);
}

/* Tabla acciones */
.col-actions {
  width: 160px;
}

.table-actions {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
}

.btn-xs {
  font-size: .75rem;
  padding: .25rem .5rem;
}

/* Formulario recursos */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ui-muted, #6b7280);
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .75rem;
}

.badge-success {
  background: #dcfce7;
  color: #166534;
}

.badge-muted {
  background: #e5e7eb;
  color: #4b5563;
}

/* Alertas en dashboard */

.alert {
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  border: 1px solid transparent;
}

.alert ul {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
}

.alert-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.alert-danger strong {
  display: block;
  margin-bottom: .15rem;
}