/* ══════════════════════════════════════════════════════════════════════
   EKā · Tema v2 (rediseño 2026) — OPT-IN
   Se carga SOLO en páginas que definen $temaV2 = true (ver header.php), que
   añaden la clase .tema-v2 al <body>. Así el rediseño se puede ir aplicando
   página por página sin tocar el resto de la app. Cuando todas las páginas
   estén migradas, se puede hacer de esto el estilo por defecto.

   Basado en el mockup "Dashboard Eka.dc.html" (Claude Design):
   · Sidebar clara (#FBFAF6) en vez de verde oscuro
   · Títulos, nav y cifras en Plus Jakarta Sans; cuerpo/datos en IBM Plex Sans
   · Ámbar (#D98A2B) como acento único de urgencia / acción principal
   · Hairlines #EDEBE4, tarjetas blancas redondeadas
   ══════════════════════════════════════════════════════════════════════ */

/* Redefinición de tokens compartidos SOLO dentro del tema v2. Como muchos
   componentes de eka.css ya usan var(--brd)/var(--marfil)/var(--font-h),
   redefinirlos aquí los actualiza en cascada sin duplicar reglas. */
body.tema-v2 {
  --brd:      #EDEBE4;   /* hairline del mockup */
  --marfil:   #FBFAF6;   /* marfil técnico (fondo suave / sidebar) */
  --font-h:   'Plus Jakarta Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --v2-tinta: #14351F;   /* verde profundo — títulos */
  --v2-mute:  #9A988F;   /* gris cálido — etiquetas */
  --v2-soft:  #57564F;   /* gris medio — texto secundario */
  --v2-line:  #F2F0EA;   /* hairline suave interna */
  background: #FFFFFF;
  color: #2A2926;
}

/* ── Shell: layout general ─────────────────────────────────── */
body.tema-v2 .main { background: #FFFFFF; }

/* ── Sidebar clara ─────────────────────────────────────────── */
body.tema-v2 .sidebar {
  background: #FBFAF6;
  border-right: 1px solid #EDEBE4;
}
body.tema-v2 .sidebar-logo {
  background: transparent;
  border-bottom: none;
  padding: 30px 28px 22px;
}
body.tema-v2 .sidebar-logo img { max-width: 150px; }

body.tema-v2 .sidebar-search {
  background: #F1EFE8;
  border: none;
  border-radius: 10px;
  margin: 0 20px 18px;
  padding: 10px 13px;
}
body.tema-v2 .sidebar-search svg { color: #9A988F; }
body.tema-v2 .sidebar-search input { color: #2A2926; }
body.tema-v2 .sidebar-search input::placeholder { color: #9A988F; }

body.tema-v2 .sidebar-nav { padding: 0 14px; }
body.tema-v2 .sidebar-nav a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #57564F;
}
body.tema-v2 .sidebar-nav a svg { opacity: 1; }
body.tema-v2 .sidebar-nav a:hover {
  background: #F1EFE8;
  color: #14351F;
}
body.tema-v2 .sidebar-nav a.active {
  background: #EAF1EC;
  color: #235C37;
  font-weight: 600;
  box-shadow: none;
}
body.tema-v2 .nav-badge {
  background: transparent;
  color: #B7AFA6;
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 12px;
  padding: 0;
}
body.tema-v2 .nav-section {
  color: #B7AFA6;
  font-family: var(--font-h);
  font-weight: 600;
  letter-spacing: .16em;
  font-size: 10px;
  padding: 22px 14px 8px;
}

body.tema-v2 .sidebar-footer {
  border-top: 1px solid #EDEBE4;
  padding: 18px 22px;
}
body.tema-v2 .sidebar-avatar-mark {
  background: #EAF1EC;
  color: #235C37;
  border-radius: 50%;
}
body.tema-v2 .sidebar-footer strong { color: #14351F; }
body.tema-v2 .sidebar-rol { color: #9A988F; }
body.tema-v2 .sidebar-logout { color: #B7AFA6; }
body.tema-v2 .sidebar-logout:hover { color: #235C37; }

/* ── Cabecera de página (eyebrow + título grande) ──────────── */
body.tema-v2 .topbar {
  height: auto;
  align-items: flex-start;
  padding: 34px 44px 6px;
  background: transparent;
  border-bottom: none;
  position: static;
}
body.tema-v2 .tv2-head-left {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
body.tema-v2 .tv2-eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #D98A2B;
  font-weight: 600;
}
body.tema-v2 .tv2-title {
  font-family: var(--font-h);
  font-size: 34px;
  font-weight: 700;
  color: #14351F;
  letter-spacing: -.02em;
  margin-top: 9px;
  line-height: 1.05;
}
body.tema-v2 .tv2-title span { color: #D98A2B; }
body.tema-v2 .tv2-sub { font-size: 14px; color: #6E6E6B; margin-top: 6px; }

/* Nota informativa (banda azul con icono) — Plantillas y Usuarios */
body.tema-v2 .v2-note {
  display: flex; align-items: center; gap: 12px;
  background: #EEF2F7; border: 1px solid #E1E7F0; border-radius: 12px;
  padding: 14px 18px; margin-bottom: 24px;
}
body.tema-v2 .v2-note svg { flex: none; }
body.tema-v2 .v2-note span { font-size: 13px; color: #3A4A5C; line-height: 1.45; }

/* ── Botones v2 ────────────────────────────────────────────── */
body.tema-v2 .btn { border-radius: 10px; }
body.tema-v2 .btn-primary,
body.tema-v2 .btn-ambar {
  background: #D98A2B;
  color: #14351F;
  font-weight: 700;
}
body.tema-v2 .btn-primary:hover,
body.tema-v2 .btn-ambar:hover { background: #C67C22; color: #14351F; }
body.tema-v2 .btn-secondary {
  background: #FFFFFF;
  color: #235C37;
  border: 1px solid #EDEBE4;
}
body.tema-v2 .btn-secondary:hover { border-color: #235C37; color: #235C37; }

/* Botón de acción del topbar (Nueva licitación / plantilla / usuario): más
   grande y con más aire que el btn-sm base, como en el mockup. */
body.tema-v2 .topbar-actions .btn { padding: 12px 20px; font-size: 13px; border-radius: 11px; gap: 8px; }
body.tema-v2 .topbar-actions .btn svg { width: 15px; height: 15px; }

/* Topbar mínimo: la página dibuja su propia cabecera (ficha). Solo deja sitio
   al botón de menú en móvil; en escritorio queda a cero. */
body.tema-v2 .topbar.topbar-slim { padding: 0; min-height: 0; border: none; }
@media (max-width: 860px) { body.tema-v2 .topbar.topbar-slim { padding: 10px 16px 0; } }

body.tema-v2 .page-content { padding: 22px 44px 42px; }

/* ══════════════════════════════════════════════════════════════════════
   BUSCADOR · componentes (mockup 04)
   Se restilan las clases .bsc-* existentes para no tocar el JavaScript.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tabs de fuente ────────────────────────────────────────── */
body.tema-v2 .bsc-tabs {
  gap: 0;
  border-bottom: 1px solid #EDEBE4;
  margin-bottom: 16px;
}
body.tema-v2 .bsc-tab {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  color: #9A988F;
  padding: 0 4px 12px;
  margin-right: 28px;
  border-bottom: 2px solid transparent;
}
body.tema-v2 .bsc-tab:hover { color: #57564F; }
body.tema-v2 .bsc-tab.on {
  color: #14351F;
  font-weight: 700;
  border-bottom-color: #D98A2B;
}
body.tema-v2 .bsc-tab .badge-tag {
  font-family: var(--font-h);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 20px;
  padding: 2px 7px;
  background: #F1EFE8;
  color: #57564F;
}
body.tema-v2 .bsc-tab.on .badge-tag { background: #FBEBD6; color: #8A4E0C; }

/* ── Campo de búsqueda ─────────────────────────────────────── */
body.tema-v2 .bsc-search {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 20px;
}
body.tema-v2 .bsc-search label {
  font-family: var(--font-h);
  font-size: 10px;
  letter-spacing: .12em;
  color: #9A988F;
  font-weight: 600;
  margin-bottom: 8px;
}
body.tema-v2 .bsc-search-row { gap: 12px; }
body.tema-v2 .bsc-search-row input {
  border: 1px solid #EDEBE4;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 500;
  color: #14351F;
  background: #FBFAF6;
}
body.tema-v2 .bsc-search-row input:focus { border-color: #235C37; background: #fff; }
body.tema-v2 .bsc-search-row .btn-primary {
  background: #235C37;
  color: #fff;
  padding: 12px 26px;
}
body.tema-v2 .bsc-search-row .btn-primary:hover { background: #14351F; }

/* ── Portales de publicación (bloque estático nuevo) ───────── */
body.tema-v2 .bx-portals {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 0;
  margin-bottom: 20px;
}
body.tema-v2 .bx-portals-label {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9A988F;
  font-weight: 600;
}
body.tema-v2 .bx-chips { display: flex; gap: 10px; flex-wrap: wrap; }
body.tema-v2 .bx-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #EDEBE4;
  border-radius: 20px;
  padding: 8px 15px;
  background: #fff;
  font-family: var(--font-h);
  font-size: 13px;
  font-weight: 600;
  color: #14351F;
}
body.tema-v2 .bx-chip:hover { border-color: #235C37; }
body.tema-v2 .bx-chip .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
body.tema-v2 .bx-chip svg { color: #B7AFA6; flex: none; }

/* ── Ficha de resultado (tinte verde de destacado) ─────────── */
body.tema-v2 .bsc-info {
  position: relative;
  background: #F4F9F5;
  border: 1px solid #DCE8E0;
  border-top: 1px solid #DCE8E0;
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 22px;
}
body.tema-v2 .bsc-info-num {
  font-family: var(--font-h);
  font-size: 17px;
  font-weight: 700;
  color: #235C37;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.tema-v2 .bsc-info-num::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #235C37;
  flex: none;
}
body.tema-v2 .bsc-info-sub { font-size: 12.5px; color: #57564F; margin: 8px 0; }
body.tema-v2 .bsc-obra-label {
  font-family: var(--font-h);
  font-size: 9px;
  letter-spacing: .12em;
  color: #9A988F;
  font-weight: 600;
  margin: 10px 0 4px;
}
body.tema-v2 .bsc-obra-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: #3A3A36;
  max-width: 820px;
}
body.tema-v2 .bsc-meta-grid {
  gap: 24px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #DCE8E0;
  border-bottom: none;
}
body.tema-v2 .bsc-meta-item label {
  font-family: var(--font-h);
  font-size: 9px;
  letter-spacing: .12em;
  color: #9A988F;
  font-weight: 600;
  margin-bottom: 5px;
}
body.tema-v2 .bsc-meta-item span {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  color: #14351F;
}
body.tema-v2 .bsc-meta-item.hi span { color: #8A4E0C; }
/* Renglón "N archivos · peso total" anclado arriba a la derecha de la ficha,
   apilado, para no ocupar un renglón propio abajo (ahorra alto). */
body.tema-v2 .bsc-totals {
  position: absolute;
  top: 24px;
  right: 28px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  margin: 0;
  text-align: right;
  font-family: var(--font-h);
  font-size: 12px;
  color: #9A988F;
}
body.tema-v2 .bsc-totals b { color: #14351F; font-weight: 700; }
body.tema-v2 .bsc-totals span:last-child b { font-size: 16px; }
/* Deja espacio a la derecha para que el título/objeto no pase bajo el bloque */
body.tema-v2 .bsc-info-num,
body.tema-v2 .bsc-obra-desc { padding-right: 130px; }

/* ── Acciones ──────────────────────────────────────────────── */
body.tema-v2 .bsc-actions { gap: 12px; margin-bottom: 22px; }
body.tema-v2 .btn-interesa {
  background: #D98A2B;
  color: #14351F;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 700;
}
body.tema-v2 .btn-dbx-all {
  background: #FFFFFF;
  color: #235C37;
  border: 1px solid #EDEBE4;
  border-radius: 10px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
}
body.tema-v2 .btn-dbx-all:hover { border-color: #235C37; opacity: 1; }
body.tema-v2 .btn-dbx-all svg path { fill: #235C37; }

/* ── Secciones de documentos: dos columnas ─────────────────── */
body.tema-v2 .bsc-secs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
body.tema-v2 .bsc-sec { margin-bottom: 0; }
body.tema-v2 .bsc-sec-h {
  padding: 0 0 12px;
  border-bottom: 1px solid #EDEBE4;
  margin-bottom: 4px;
}
body.tema-v2 .bsc-sec-title {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: #14351F;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
body.tema-v2 .bsc-sec-title::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  background: #235C37;
  flex: none;
}
body.tema-v2 .bsc-sec-sub { color: #9A988F; font-size: 12px; }
body.tema-v2 .btn-sec {
  background: transparent;
  border: none;
  color: #235C37;
  font-family: var(--font-h);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}
body.tema-v2 .btn-sec:hover { background: transparent; color: #14351F; }

/* ── Filas de documento ────────────────────────────────────── */
body.tema-v2 .bsc-doc {
  background: transparent;
  border: none;
  border-bottom: 1px solid #F2F0EA;
  border-radius: 0;
  padding: 11px 0;
  margin-bottom: 0;
}
body.tema-v2 .bsc-doc:hover { border-color: #F2F0EA; }
body.tema-v2 .bsc-badge {
  font-family: var(--font-h);
  font-size: 8.5px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 0;
  color: #57564F;
  background: #F1EFE8;
}
body.tema-v2 .bsc-badge.bd-pdf { background: #F5E4E1; color: #A23F34; }
body.tema-v2 .bsc-badge.bd-docx,
body.tema-v2 .bsc-badge.bd-doc { background: #E4ECF5; color: #2B579A; }
body.tema-v2 .bsc-badge.bd-xlsx,
body.tema-v2 .bsc-badge.bd-xls,
body.tema-v2 .bsc-badge.bd-zip { background: #E4EFE7; color: #1D6F42; }
body.tema-v2 .bsc-badge.bd-rar { background: #FBEBD6; color: #8A4E0C; }
body.tema-v2 .bsc-badge.bd-other { background: #F1EFE8; color: #57564F; }
body.tema-v2 .bsc-doc-name { font-size: 12.5px; color: #2A2926; }
body.tema-v2 .bsc-doc-meta { font-family: var(--font-h); font-size: 11px; color: #9A988F; }
body.tema-v2 .bsc-doc-dl { color: #235C37; font-weight: 600; }
body.tema-v2 .btn-dbx-1 { color: #235C37; }
body.tema-v2 .btn-dbx-1 svg path { fill: #235C37; }

/* ── Estados / progreso ────────────────────────────────────── */
body.tema-v2 .bsc-state { color: #9A988F; }
body.tema-v2 .bsc-state.error { color: #A23F34; }
body.tema-v2 .est-ok  { background: #EAF1EC; color: #235C37; }
body.tema-v2 .est-err { background: #F5E4E1; color: #A23F34; }
body.tema-v2 .est-def { background: #F1EFE8; color: #57564F; }

/* ── Login (login.php) ─────────────────────────────────────── */
body.tema-v2 .login-page { background: #FBFAF6; }
body.tema-v2 .login-card {
  border: 1px solid #EDEBE4;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20,53,31,.04), 0 12px 32px rgba(20,53,31,.06);
  padding: 40px 36px 28px;
  max-width: 420px;
}
body.tema-v2 .login-logo { margin-bottom: 26px; }
body.tema-v2 .login-logo img { height: 92px; width: auto; display: block; margin: 0 auto; }
body.tema-v2 .login-card .tv2-eyebrow { text-align: left; }
body.tema-v2 .login-title {
  font-family: var(--font-h);
  font-size: 26px;
  font-weight: 700;
  color: #14351F;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 8px 0 22px;
}
body.tema-v2 .login-title span { color: #D98A2B; }
body.tema-v2 .login-card .form-label {
  font-family: var(--font-h);
  font-size: 12.5px;
  font-weight: 600;
  color: #57564F;
}
body.tema-v2 .login-card .form-control {
  border: 1px solid #EDEBE4;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 11px 13px;
  font-size: 14px;
}
body.tema-v2 .login-card .form-control:focus {
  border-color: #235C37;
  box-shadow: 0 0 0 3px rgba(35,92,55,.10);
  outline: none;
}
body.tema-v2 .login-btn {
  width: 100%;
  justify-content: center;
  padding: 12px;
  font-size: 14px;
  margin-top: 4px;
}
body.tema-v2 .login-foot {
  margin-top: 20px;
  font-size: 11.5px;
  color: #9A988F;
  text-align: center;
}
@media (max-width: 480px) {
  body.tema-v2 .login-card { padding: 30px 22px 22px; }
  body.tema-v2 .login-logo img { height: 74px; }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
  body.tema-v2 .topbar { padding: 20px 16px 4px; }
  body.tema-v2 .tv2-title { font-size: 26px; }
  body.tema-v2 .page-content { padding: 16px 16px 32px; }
  body.tema-v2 .bsc-secs { grid-template-columns: 1fr; gap: 20px; }
  body.tema-v2 .bsc-meta-grid { grid-template-columns: 1fr 1fr; }
  /* En pantallas chicas el bloque de totales vuelve a fluir (evita traslapes) */
  body.tema-v2 .bsc-totals {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    text-align: left;
  }
  body.tema-v2 .bsc-totals span:last-child b { font-size: 12px; }
  body.tema-v2 .bsc-info-num,
  body.tema-v2 .bsc-obra-desc { padding-right: 0; }
}