/* Grupo A: login, inicio, search, buscar_documentos, consulta_visual. Solo tokens de styles.css. */

/* ---- Login ---- */
/* Panel azul de marca (como el header) + tarjeta de ingreso; el trazo recorre la linea de cajas */
.is-public .container { padding: var(--space-4); max-width: none; }
.is-public .container > .footer { display: none; }
.login-split {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch;
  min-height: calc(100vh - 2 * var(--shell-gap) - 2 * var(--space-4));
}
.login-aside {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-8);
  padding: var(--space-12) clamp(24px, 5vw, 72px);
  background: var(--header-glow), var(--header-bg); color: var(--header-text);
  border-radius: var(--radius-16);
}
.login-aside::before {
  content: ''; position: absolute; right: -90px; bottom: -90px; z-index: -1;
  width: 420px; height: 420px; border-radius: 48px; opacity: .05; background: #fff;
  clip-path: polygon(0 30%, 30% 30%, 30% 0, 100% 0, 100% 70%, 70% 70%, 70% 100%, 0 100%);
}
.login-trazo { position: absolute; left: 0; right: 0; bottom: 7%; z-index: -1; width: 100%; height: 80px; }
.login-mark { width: 44px; height: 44px; padding: 4px; border-radius: var(--radius-10); object-fit: contain; background: #fff; }
.login-headline {
  max-width: 18ch; margin: 0; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.035em;
  color: var(--header-text-strong); text-wrap: balance;
}
.login-headline::after { display: none; }
.login-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); max-width: 460px; }
.login-benefits li { display: flex; align-items: flex-start; gap: var(--space-4); }
.login-benefit-icon {
  flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--header-field); color: #fff; border: 1px solid var(--header-line); border-radius: var(--radius-10);
}
.login-benefits strong { display: block; color: var(--header-text-strong); font-weight: var(--fw-medium); font-size: var(--fs-body); }
.login-benefits span:not(.login-benefit-icon) { display: block; color: var(--header-text); font-size: var(--fs-small); margin-top: 2px; }
.login-card {
  width: 100%; max-width: 400px; align-self: center; justify-self: center; padding: var(--space-8);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16);
  box-shadow: 0 1px 2px rgba(19, 35, 63, .04), 0 12px 32px rgba(19, 35, 63, .08);
}
.login-title { margin: 0 0 var(--space-1); font-size: var(--fs-h1); line-height: var(--lh-h1); }
.login-subtitle { margin: 0 0 var(--space-6); color: var(--text-2); }
.login-card .alert { margin-bottom: var(--space-5); }
.login-form .form-group { margin-bottom: var(--space-4); }
.login-form .btn { margin-top: var(--space-2); }

@media (max-width: 900px) {
  .login-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login-card { order: -1; padding: var(--space-6); margin: var(--space-6) auto; }
  .login-aside { padding: var(--space-6); gap: var(--space-6); }
  .login-benefits, .login-trazo { display: none; }
  .login-headline { font-size: var(--fs-h1); max-width: none; }
}

/* ---- Inicio ---- */
/* Hero azul que continua el header (identidad de prod), con la linea de cajas y su trazo de luz */
.home-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: var(--space-12) var(--space-12) var(--space-14);
  background: var(--header-glow), var(--header-bg);
  border-radius: var(--radius-20);
  box-shadow: 0 18px 40px rgba(0, 30, 97, .18);
  color: var(--header-text);
}
.home-hero::before {
  content: ''; position: absolute; right: -80px; top: -80px; z-index: -1;
  width: 340px; height: 340px; border-radius: 48px; opacity: .05; background: #fff;
  clip-path: polygon(0 30%, 30% 30%, 30% 0, 100% 0, 100% 70%, 70% 70%, 70% 100%, 0 100%);
}
.home-trazo { position: absolute; left: 0; right: 0; bottom: 6px; z-index: -1; width: 100%; height: 72px; opacity: .9; }
.home-greet { margin: 0 0 var(--space-2); color: var(--header-text); font-size: var(--fs-body); }
.home-question {
  margin: 0 0 var(--space-6); max-width: 24ch; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -.03em;
  color: var(--header-text-strong); text-wrap: balance;
}
.home-hero .home-search { max-width: 680px; gap: var(--space-2); }
.home-hero .home-search > .haz-envoltura, .home-field { flex: 1 1 auto; min-width: 0; }
.home-field { position: relative; display: flex; align-items: center; border-radius: var(--radius-12); }
.home-field > .icon { position: absolute; left: var(--space-4); color: var(--text-2); pointer-events: none; z-index: 1; }
.home-hero .home-field input {
  width: 100%; height: var(--space-14); padding-left: var(--space-12); padding-right: 88px;
  font-size: var(--fs-h3); border: 0; border-radius: var(--radius-12);
  box-shadow: 0 10px 30px rgba(0, 16, 52, .28);
}
.home-hero .home-field input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 16, 52, .28); }
.home-kbd { position: absolute; right: var(--space-3); width: auto; padding: 0 var(--space-2); pointer-events: none; }
.home-hero .home-search .btn {
  height: var(--space-14); min-width: 0; padding: 0 var(--space-6); border-radius: var(--radius-12);
  background: var(--brand-green); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 30px rgba(0, 16, 52, .28);
}
.home-hero .home-search .btn:hover { background: #079A66; }

/* Cifras: tarjetas blancas con el acento de color de prod a la izquierda */
.home-figures {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); gap: var(--space-4);
  margin-top: var(--space-5);
}
.home-figures a { color: inherit; text-decoration: none; }
.home-figure-main, .home-figure-strip a {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  height: 100%; padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16);
  box-shadow: var(--shadow-rest);
  transition: box-shadow var(--duration-fast) var(--ease-smooth-out), transform var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast);
}
.home-figure-main::before, .home-figure-strip a::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fig-color, var(--primary));
}
.home-figure-main { --fig-color: var(--accent-line); }
.home-figure-strip li:nth-child(1) a { --fig-color: var(--primary); }
.home-figure-strip li:nth-child(2) a { --fig-color: var(--brand-green); }
.home-figure-strip li:nth-child(3) a { --fig-color: #0891B2; }
.home-figure-main:hover, .home-figure-strip a:hover { box-shadow: var(--shadow-hover); border-color: var(--border-strong); transform: translateY(-2px); }
.home-num {
  font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: var(--fw-semibold);
  color: var(--navy); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.home-fig-label { color: var(--text-2); font-size: var(--fs-small); }
.home-figure-main:hover .home-num, .home-figure-strip a:hover .home-num-sm { color: var(--primary); }
.home-figure-main:focus-visible, .home-figure-strip a:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); }
.home-figure-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.home-num-sm {
  font-size: 30px; line-height: 1.15; font-weight: var(--fw-semibold); color: var(--navy); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; transition: color var(--duration-quick) var(--ease-smooth-out);
}

.home-hint { margin: var(--space-3) 0 0; max-width: 680px; font-size: var(--fs-small); color: var(--header-text); }
.home-hint strong { color: var(--header-text-strong); font-weight: var(--fw-medium); }

/* Paneles debajo de las cifras: ultimas subidas (ancho) + actividad, retiros y atajos */
.home-grid {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-4); align-items: start;
  margin-top: var(--space-4);
}
.home-main, .home-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.home-panel {
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16); box-shadow: var(--shadow-rest);
}
.home-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.home-panel-head h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-h3); line-height: var(--lh-h2); }
.home-panel-head p { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-small); }
.home-panel > .empty-state { padding: var(--space-8) var(--space-4); }

.home-list { list-style: none; margin: 0 calc(-1 * var(--space-3)); padding: 0; }
.home-list li + li { border-top: 1px solid var(--border); }
.home-list-row {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-10); color: inherit; text-decoration: none;
  transition: background-color var(--duration-quick) var(--ease-smooth-out);
}
.home-list-row:hover { background: var(--row-hover); color: inherit; }
.home-list-row:focus-visible { outline-offset: -2px; }
.home-list-icon {
  flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-ink); border-radius: var(--radius-10);
}
.home-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.home-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: var(--fw-medium); }
.home-list-meta { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); color: var(--text-2); font-size: var(--fs-xs); }
.home-list-meta .mono, .home-list-title .mono { font-size: .95em; }
.home-list-date { flex: none; color: var(--text-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.home-list-go { flex: none; color: var(--text-2); opacity: 0; transform: translateX(-4px); transition: opacity var(--duration-quick), transform var(--duration-quick) var(--ease-smooth-out); }
.home-list-row:hover .home-list-go, .home-list-row:focus-visible .home-list-go { opacity: 1; transform: none; }
.home-list-compact .home-list-row { padding: var(--space-2) var(--space-3); }
.home-panel-more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none; }
.home-panel-more .icon { transition: transform var(--duration-quick) var(--ease-smooth-out); }
.home-panel-more:hover .icon { transform: translateX(3px); }
.home-ok { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3); border-radius: var(--radius-10); background: var(--green-50); color: var(--green-ink); font-size: var(--fs-small); }

.home-activity { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; }
.home-activity > div { padding: var(--space-3) var(--space-4); background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-12); }
.home-activity dt { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.home-activity dd { margin: 2px 0 0; color: var(--navy); font-size: 26px; line-height: 32px; font-weight: var(--fw-semibold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.home-shortcuts { list-style: none; margin: 0 calc(-1 * var(--space-2)); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--space-2); }
.home-shortcuts a {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2);
  border-radius: var(--radius-10); color: inherit; text-decoration: none;
  transition: background-color var(--duration-quick) var(--ease-smooth-out);
}
.home-shortcuts a:hover { background: var(--row-hover); color: inherit; }
.home-shortcuts strong { display: block; color: var(--text); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.home-shortcuts small { display: block; color: var(--text-2); font-size: var(--fs-xs); }
.home-sc-icon {
  flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--navy); border-radius: var(--radius-10);
  transition: background-color var(--duration-quick), color var(--duration-quick);
}
.home-shortcuts a:hover .home-sc-icon { background: var(--primary); color: var(--on-primary); }

@media (max-width: 900px) {
  .home-hero { padding: var(--space-8) var(--space-6) var(--space-12); }
  .home-figures { grid-template-columns: minmax(0, 1fr); }
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .home-hero { padding: var(--space-6) var(--space-4) var(--space-12); border-radius: var(--radius-16); }
  .home-hero .home-search { flex-direction: row; align-items: center; }
  .home-hero .home-search .btn { padding: 0 var(--space-4); }
  .home-kbd { display: none; }
  .home-hero .home-field input { padding-right: var(--space-4); }
  .home-figure-strip { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .home-figure-main, .home-figure-strip a { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); }
  .home-num-sm { font-size: var(--fs-h1); }
  .home-list-date { display: none; }
  .home-shortcuts { grid-template-columns: minmax(0, 1fr); }
  .home-panel { padding: var(--space-4); }
}

/* ---- Buscador (search / buscar_documentos) ---- */
.sr-form, .bd-form { display: flex; gap: var(--space-2); margin: 0 0 var(--space-6); max-width: 720px; }
.sr-form .input, .bd-form .input { flex: 1 1 auto; min-width: 0; }
.sr-form .btn, .bd-form .btn { flex: none; }
.sr-lead { margin: 0 0 var(--space-3); }
.sr-note { max-width: 70ch; margin: 0 0 var(--space-3); }
.sr-q, .bd-q { overflow-wrap: anywhere; font-weight: var(--fw-semibold); }
.tab-panel[hidden] { display: none; }
.tab-panel mark { background: var(--blue-50); color: var(--blue-ink); border-radius: 3px; padding: 0 2px; }
.sr-unit { color: var(--blue-ink); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.tab-panel tr.sr-unit-start td { border-top: 1px solid var(--border-strong); }
.tab-panel .alert, .sr-form + .alert, .bd-form + .alert { margin-bottom: var(--space-4); }
.tab:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--primary); border-radius: var(--radius-8); }

/* ---- Buscador ancho (buscar_documentos y search): panel con etiqueta, campo grande y ejemplos ---- */
.bd-form.bd-form--ancho { display: block; max-width: none; margin: 0 0 var(--space-4); }
.bd-form-row { position: relative; display: flex; gap: var(--space-2); }
.bd-form-row .input { flex: 1 1 auto; min-width: 0; max-width: none; height: 48px; padding-left: 44px; font-size: 16px; }
.bd-form-row .btn { flex: none; height: 48px; padding: 0 var(--space-6); }
.bd-form-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-2); pointer-events: none; }

/* Qué entendió el buscador de lo que escribiste */
.bd-entendimos {
  display: flex; gap: var(--space-3); align-items: flex-start; margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-12);
  background: var(--blue-50); border: 1px solid var(--blue-200); color: var(--blue-ink);
}
.bd-entendimos > .icon { flex: none; margin-top: 2px; }
.bd-entendimos > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bd-entendimos span { color: var(--text-3); font-size: var(--fs-small); }
.bd-entendimos code { padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--blue-ink); }
.bd-entendimos-nota { font-style: italic; }

/* Cómo buscar: pasos + un recuadro por tipo de búsqueda */
.bd-ayuda { margin: var(--space-8) 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-16); background: var(--surface); box-shadow: var(--shadow-rest); }
.bd-ayuda > summary {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5);
  cursor: pointer; font-weight: var(--fw-semibold); color: var(--th-text); list-style: none;
  background: var(--filter-head-bg); border-radius: var(--radius-16);
}
.bd-ayuda[open] > summary { border-radius: var(--radius-16) var(--radius-16) 0 0; border-bottom: 1px solid var(--border); }
.bd-ayuda > summary::-webkit-details-marker { display: none; }
.bd-ayuda > summary::after { content: '▾'; margin-left: auto; transition: transform var(--duration-fast) var(--ease-smooth-out); }
.bd-ayuda:not([open]) > summary::after { transform: rotate(-90deg); }
.bd-ayuda > summary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--focus); }
.bd-ayuda-lista { margin: 0; padding: var(--space-4) var(--space-5) var(--space-4) var(--space-10, 48px); display: grid; gap: var(--space-2); color: var(--text-3); font-size: var(--fs-small); }

/* ---- Buscar en documentos ---- */
.bd-lead { max-width: 90ch; margin: 0 0 var(--space-4); }
.bd-blocked {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
  max-width: 720px; padding: var(--space-8);
  background: var(--surface-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-16); color: var(--text-2);
}
.bd-blocked > .icon { padding: 9px; box-sizing: content-box; background: var(--surface-2); color: var(--text-2); border-radius: var(--radius-12); }
.bd-blocked-title { margin: 0; font-size: var(--fs-h2); }
.bd-blocked p { margin: 0; max-width: 62ch; }
.bd-blocked-list strong { display: block; margin-bottom: var(--space-2); color: var(--text-3); font-weight: var(--fw-medium); }
.bd-blocked-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bd-blocked-list li { display: flex; align-items: flex-start; gap: var(--space-2); }
.bd-blocked-list li .icon { flex: none; margin-top: 3px; color: var(--success); }
.bd-blocked .btn { margin-top: var(--space-2); }
.bd-help { max-width: 70ch; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.bd-help-title { margin: 0 0 var(--space-3); font-size: var(--fs-h3); }
.bd-help ul { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-small); }
.bd-results { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.bd-result { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.bd-result:last-child { border-bottom: 1px solid var(--border); }
.bd-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.bd-result-meta { min-width: 0; overflow-wrap: anywhere; }
.bd-snippet { margin: 0; padding: var(--space-3) var(--space-4); background: var(--surface-2); border-radius: var(--radius-8); font-size: var(--fs-body); line-height: 1.6; overflow-wrap: anywhere; }
.bd-snippet mark { background: var(--blue-50); color: var(--blue-ink); border-radius: 3px; padding: 0 2px; }

/* ---- Consulta Visual ---- */
.cv-form { margin: 0 0 var(--space-8); }
.cv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); max-width: 1000px; }
.cv-fields .form-group { margin: 0; }
.cv-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5); }
.cv-results-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-3); font-size: var(--fs-h2); }
.cv-results .alert { margin-bottom: var(--space-4); }

@media (max-width: 640px) {
  .sr-form .btn, .bd-form .btn, .cv-actions .btn { min-height: 44px; }
  .bd-form-row .btn { padding: 0 var(--space-4); }
  .bd-blocked { padding: var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .login-split, .home-hero { animation: none; }
  .home-figure-main:hover, .home-figure-strip a:hover { transform: none; }
}