/* ═══════════════════════════════════════════════════════════
   FOLIUM — COMPONENTS
   Componentes base reutilizables: botones, badges, cards,
   inputs, dropdowns, modales, drawers.
   Carga después de base.css.
   ═══════════════════════════════════════════════════════════ */

/* ── Botones ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: background 0.1s, color 0.1s, transform 0.08s, border-color 0.1s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 13px; height: 13px; }

.btn-sm { padding: 3px 9px; font-size: 12px; }
.btn-lg { padding: 8px 16px; font-size: 13px; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.btn-default {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-md);
}
.btn-default:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  background: var(--accent-2);
  color: #fff;
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid var(--red-border);
}
.btn-danger:hover {
  background: rgba(229, 72, 77, 0.20);
}

/* Split button (caret a la derecha) */
.btn-split {
  display: inline-flex;
  align-items: stretch;
}
.btn-split .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 8px;
}
.btn-split .btn-caret {
  padding: 5px 7px;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-md);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  font-family: inherit;
}
.btn-split .btn-caret:hover { background: var(--bg-3); }
.btn-split .btn-caret svg { width: 12px; height: 12px; }

/* ── Badges ───────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.005em;
}

/* Resultado de fallos (dominio jurídico) */
.badge-acogido     { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); }
.badge-rechazado   { background: var(--red-bg);   color: var(--red);   border: 1px solid var(--red-border); }
.badge-inadmisible { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); }
.badge-parcial     { background: var(--blue-bg);  color: var(--blue);  border: 1px solid var(--blue-border); }
.badge-otro        { background: var(--bg-2);     color: var(--text-2); border: 1px solid var(--border); }

/* Estado de causas en monitor */
.badge-novedad { background: var(--amber-bg);  color: var(--amber);        border: 1px solid var(--amber-border); }
.badge-active  { background: var(--accent-bg); color: var(--accent-light); border: 1px solid rgba(94, 106, 210, 0.28); }
.badge-error   { background: var(--red-bg);    color: var(--red);          border: 1px solid var(--red-border); }
.badge-epr     { background: var(--purple-bg); color: var(--purple);       border: 1px solid var(--purple-border); }

/* ── Sala tags ────────────────────────────────────────── */
.sala-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.sala-1 { background: rgba(94, 106, 210, 0.12); color: var(--accent-light); }
.sala-2 { background: rgba(229, 72, 77, 0.10);  color: #e98185; }
.sala-3 { background: rgba(38, 185, 134, 0.10); color: #5cc9a4; }
.sala-4 { background: rgba(217, 119, 6, 0.10);  color: #d99a4a; }

[data-theme="light"] .sala-1 { color: #4d59c9; }
[data-theme="light"] .sala-2 { color: #c93030; background: rgba(217, 48, 37, 0.09); }
[data-theme="light"] .sala-3 { color: #1a8a60; background: rgba(26, 158, 110, 0.09); }
[data-theme="light"] .sala-4 { color: #a86200; background: rgba(184, 107, 0, 0.09); }

/* ── Tags de normativa ────────────────────────────────── */
.tag-norma {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--amber-bg);
  color: var(--amber);
  border: 1px solid var(--amber-border);
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Cards ────────────────────────────────────────────── */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
}
.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── Inputs ───────────────────────────────────────────── */
.input,
.select,
.textarea {
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.input::placeholder { color: var(--text-3); }
.textarea { min-height: 70px; resize: vertical; }

/* ── Filter chips ─────────────────────────────────────── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.filter-chip:hover {
  border-color: var(--border-md);
  color: var(--text);
}
.filter-chip.active {
  background: var(--accent-bg);
  border-color: rgba(94, 106, 210, 0.35);
  color: var(--accent-light);
}
.filter-chip .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.filter-chip .chip-count {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.filter-chip.active .chip-count {
  color: var(--accent-light);
  opacity: 0.7;
}
/* Variante urgente: chip "Urgentes" cuando está activo se viste de rojo */
.filter-chip.active.is-urgent-chip {
  background: rgba(220, 60, 60, 0.10);
  border-color: rgba(220, 60, 60, 0.35);
  color: var(--red);
}
.filter-chip.active.is-urgent-chip .chip-count {
  color: var(--red);
  opacity: 0.85;
}
/* Hace que el ancla con clase filter-chip no muestre subrayado y herede color */
a.filter-chip { text-decoration: none; }
a.filter-chip:hover { text-decoration: none; }

/* ── Dropdown menu ────────────────────────────────────── */
.dropdown {
  position: relative;
  display: inline-flex;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  background: var(--bg-1);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 60;
  display: none;
}
.dropdown.open .dropdown-menu { display: block; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 12.5px;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
  text-decoration: none;
  font-weight: 400;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item svg {
  width: 13px;
  height: 13px;
  opacity: 0.7;
  flex-shrink: 0;
}
.dropdown-item:hover svg { opacity: 1; }
.dropdown-item .label-main { flex: 1; min-width: 0; }
.dropdown-item .label-sub {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.dropdown-item.danger { color: var(--red); }
.dropdown-item.danger svg { color: var(--red); }
.dropdown-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dropdown-section-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px 4px;
}
.dropdown-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* ── Overlay (drawer/modal/sidebar mobile) ───────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 80;
}
body.drawer-open .overlay,
body.sidebar-open .overlay,
body.modal-open .overlay { opacity: 1; pointer-events: auto; }

/* ── Modal ────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
body.modal-open .modal-backdrop { display: flex; }

.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.modal-subtitle {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.modal-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-close svg { width: 14px; height: 14px; }
.modal-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 20px;
}
.modal-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

/* ── Drawer derecho ───────────────────────────────────── */
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: var(--drawer-w);
  max-width: 92vw;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 95;
}
body.drawer-open .drawer { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.drawer-body {
  flex: 1;
  overflow-y: auto;
}
.drawer-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-1);
}

.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  flex-shrink: 0;
  overflow-x: auto;
}
.drawer-tab {
  padding: 9px 14px 11px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.1s, border-color 0.1s;
  margin-bottom: -1px;
  font-family: inherit;
}
.drawer-tab:hover { color: var(--text); }
.drawer-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── Empty state ──────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  gap: 6px;
}
.empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--text-3);
}
.empty-icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.4;
}
.empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.empty-desc {
  font-size: var(--text-base);
  color: var(--text-2);
  max-width: 380px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.empty-actions {
  display: flex;
  gap: 8px;
}

/* ── Logo Folium (hoja con venas) ─────────────────────── */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--logo-ink);
}
.logo-mark svg { color: var(--logo-ink); }
/* Las venas secundarias se ocultan en logos pequeños y se muestran en grandes */
.logo-leaf-vein-secondary { opacity: 0; }
.logo-mark.logo-lg .logo-leaf-vein-secondary { opacity: 0.22; }

/* ════════════════════════════════════════════════════
   Coleccion picker — modal global compartido por
   biblioteca, monitor y análisis. Se ubica acá (en
   components.css cargado desde base_v10) para que el
   modal tenga estilos cuando lo inyecta cualquier
   partial via include.
   ════════════════════════════════════════════════════ */

.col-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.col-picker-overlay.open { display: flex; }
.col-picker-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  min-width: 280px;
  max-width: 380px;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  width: 100%;
}
.col-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.col-picker-header strong {
  font-size: 13px;
  color: var(--text);
}
.col-picker-list {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 10px;
}
.col-picker-item {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 7px 10px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.col-picker-item:hover { background: var(--bg-hover); }
.col-picker-item-count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--text-3);
}
.col-picker-empty {
  color: var(--text-3);
  font-size: 12px;
  padding: 8px;
}
.col-picker-footer {
  display: flex;
  gap: 6px;
}
.col-picker-input {
  flex: 1;
  padding: 6px 9px;
  font-size: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.col-picker-input:focus { border-color: var(--accent); }