/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ═══════════════════════════════════════════════
   PALETA — Bronce, Borgoña y Terracota (spec Luisa)
   Modo oscuro: valores exactos de la especificación.
   Modo claro: adaptación cálida de la misma familia
   (papel crema, bronce oscuro para texto-acento por
   contraste WCAG; los botones conservan la spec).
   ═══════════════════════════════════════════════ */
:root {
  --bg-page: #f7f5f0;
  --bg-surface: #fffdfa;
  --bg-inset: #f1ece3;
  --border: #e3dccd;
  --border-soft: #efeadf;
  --ink: #1a1611;
  --ink-2: #5c5449;
  --ink-3: #91876f;
  --accent: #8a6b40;          /* bronce muy oscuro: enlaces/acentos legibles en claro */
  --accent-strong: #6d5330;
  --accent-soft: #f0e7d7;
  --accent-focus: rgba(184, 149, 106, 0.22);
  --bronze: #b8956a;
  --bronze-light: #c9b59d;
  --burgundy: #6b1d23;
  --burgundy-light: #a85a6f;
  --terracotta: #c95f3a;
  --terracotta-light: #e08560;
  --terracotta-dark: #b3522b;
  --header-grad: linear-gradient(135deg, #0f0f0f 0%, #2a2420 100%);
}

[data-theme="dark"] {
  --bg-page: #0f0f0f;
  --bg-surface: #1a1a1a;
  --bg-inset: #2a2420;
  --border: #3a3430;
  --border-soft: #2a2420;
  --ink: #f5f5f5;
  --ink-2: #a9a9a9;
  --ink-3: #808080;
  --accent: #b8956a;          /* bronce principal sobre negro (8.5:1) */
  --accent-strong: #c9b59d;
  --accent-soft: rgba(184, 149, 106, 0.14);
  --accent-focus: rgba(184, 149, 106, 0.25);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg-page);
}

/* Anillo de foco de la marca — sin esto, el navegador dibuja su propio
   anillo azul por default en botones/links/summary al enfocarlos (tab o
   clic), sin importar que el resto de la paleta no tenga azul. Los campos
   de texto (.form-control, .filter-select, etc.) ya tienen su propio
   :focus con el mismo tono, así que aquí solo cubrimos lo interactivo que
   no es texto. */
a:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-focus);
  border-radius: 4px;
}

/* Checkboxes/radios nativos también son azules por default en todos los
   navegadores si no se fija accent-color. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

/* Header and Navigation — gradiente hero + borde bronce (spec Luisa) */
.app-header {
  background: var(--header-grad);
  border-bottom: 3px solid var(--bronze);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  height: 60px;
}

.nav-brand h1 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}

.nav-link {
  color: #d4c5b0; /* bronce muy claro sobre el header negro */
  text-decoration: none;
  font-weight: 500;
  padding: 0.4rem 0.65rem;
  border-radius: 4px;
  font-size: 0.875rem;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nav-link:hover {
  background-color: rgba(184, 149, 106, 0.15);
  color: #c9b59d;
}

/* Main content area */
.main-content {
  padding: 2rem 2.5rem;
}

/* Page header */
.page-header {
  margin-bottom: 2rem;
}

.page-header h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--ink);
}

/* Table styles */
.table-container {
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th {
  background-color: var(--bg-inset);
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--border);
}

.data-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr:hover {
  background-color: var(--bg-inset);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* Button styles */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

/* Botones según la spec de Luisa: primario bronce con texto negro,
   secundario borgoña, alerta/peligro terracota. */
.btn-primary {
  background-color: var(--bronze);
  color: #0f0f0f;
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--bronze-light);
  color: #0f0f0f;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--ink-2);
}

.empty-state p {
  font-size: 1.1rem;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--ink-2);
  margin-bottom: 0.5rem;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

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

/* Icono de ayuda con tooltip (ej. explicar una columna de tabla) */
.help-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--border-soft);
  color: var(--ink-2);
  font-size: 10px; font-weight: 700; font-style: normal;
  text-transform: none; letter-spacing: normal;
  cursor: help;
  margin-left: 5px;
  vertical-align: middle;
}
.help-icon-tip {
  position: absolute;
  top: 135%; left: 50%; transform: translateX(-50%);
  width: 230px;
  background: #2a2420; color: #f5f5f5;
  font-size: 11.5px; font-weight: 400; line-height: 1.5;
  text-transform: none; letter-spacing: normal;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 20;
}
.help-icon:hover .help-icon-tip,
.help-icon:focus .help-icon-tip { opacity: 1; }
[data-theme="dark"] .help-icon { background: var(--border); color: var(--ink); }

/* Society details */
.society-details {
  margin-bottom: 2rem;
}

/* Share movements section */
.share-movements-section {
  margin-top: 2rem;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.share-movements-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.holder-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.holder-link:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.balance {
  font-weight: 600;
  color: var(--ink);
  font-family: 'Courier New', monospace;
}

/* Share ledger section */
.share-ledger-section {
  margin-top: 2rem;
}

.share-ledger-section h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.society-ledger {
  margin-bottom: 2rem;
}

.society-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.society-ledger h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.society-ledger h3 a {
  color: var(--accent);
  text-decoration: none;
}

.society-ledger h3 a:hover {
  color: var(--accent-strong);
  text-decoration: underline;
}

.current-balance {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.balance-label {
  font-size: 0.9rem;
  color: var(--ink-2);
  font-weight: 500;
}

.balance-amount {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--ink);
  font-size: 1.1rem;
  background-color: var(--bg-inset);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.ledger-table {
  font-size: 0.9rem;
}

.ledger-table th {
  text-align: center;
}

.ledger-table td {
  text-align: center;
}

.ledger-table td:nth-child(1) {
  text-align: left;
}

.ledger-table td:nth-child(5) {
  text-align: left;
  max-width: 300px;
}

.balance-cell {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: var(--ink);
}

.detail-cell {
  font-size: 0.85rem;
  color: var(--ink-2);
}

.empty-state.small {
  padding: 1.5rem;
}

.empty-state.small p {
  font-size: 1rem;
}

.holder-type-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.holder-type-badge.persona {
  background-color: var(--accent);
  color: white;
}

.holder-type-badge.sociedad {
  background-color: var(--accent);
  color: white;
  font-weight: bold;
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.btn-danger {
  background-color: var(--terracotta);
  border-color: var(--terracotta);
  color: white;
}

.btn-danger:hover {
  background-color: var(--terracotta-light);
  border-color: var(--terracotta-light);
  color: white;
}

.form-help {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--ink-2);
  font-style: italic;
}

/* Form styles */
.form-container {
  max-width: 600px;
  margin: 0 auto;
}

.form-card {
  background: var(--bg-surface);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.movement-form {
  max-width: 100%;
}

.form-row {
  margin-bottom: 1.5rem;
}

.form-group {
  width: 100%;
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

.form-control-static {
  padding: 0.75rem;
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-2);
  font-weight: 500;
}

.radio-group {
  display: flex;
  gap: 2rem;
  margin-top: 0.5rem;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-radio {
  margin: 0;
}

.radio-label {
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.btn-large {
  padding: 0.75rem 2rem;
  font-size: 1rem;
}

.btn-secondary {
  background-color: var(--burgundy);
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: var(--burgundy-light);
  color: #ffffff;
}

/* Error messages */
.error-messages {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.error-messages h3 {
  color: #721c24;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.error-messages ul {
  margin: 0;
  padding-left: 1.5rem;
  color: #721c24;
}

.error-messages li {
  margin-bottom: 0.25rem;
}

/* Responsive design */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    height: auto;
    padding: 1rem;
    gap: 0.75rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
  }

  .main-content {
    padding: 1rem;
  }

  .section-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  .page-header h1 {
    font-size: 1.4rem;
  }
}

/* Las tarjetas con tablas anchas hacen scroll horizontal interno en vez de
   romper el ancho de la página en pantallas pequeñas. */
.soc-card, .v-card, .h-card, .db-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ownership-tree {
  margin-top: 2rem;
}

.ownership-tree ul {
  list-style: none;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 1px solid #ccc;
}

.society-node > strong {
  font-size: 16px;
  display: block;
  margin-bottom: 5px;
}

.holder-node.persona {
  color: var(--ink);
}

.holder-node.sociedad {
  color: var(--accent);
  font-weight: bold;
}

.holder-label {
  display: inline-block;
  margin: 4px 0;
}

.holder-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}

.holder-link:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════
   FILTER TOOLBAR — reutilizable en todos los index
   ═══════════════════════════════════════════════ */
.filter-toolbar {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.filter-toolbar form { display: contents; }

.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-row.search-row { flex-wrap: nowrap; }

.filter-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.filter-search-icon {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-3);
  pointer-events: none;
}
.filter-search-input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13.5px;
  background: var(--bg-surface);
  transition: border-color .15s, box-shadow .15s;
}
.filter-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

.filter-select {
  flex: 1;
  min-width: 140px;
  padding: 9px 32px 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: var(--bg-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none;
  appearance: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .15s;
}
.filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

.filter-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}
.btn-filter-apply {
  padding: 8px 16px;
  background: var(--bronze);
  color: #0f0f0f;
  border: none;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-filter-apply:hover { background: var(--bronze-light); }
.btn-filter-reset {
  padding: 8px 14px;
  background: var(--bg-surface);
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s;
}
.btn-filter-reset:hover { border-color: var(--ink-3); color: var(--ink-2); }

.filter-count {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-left: auto;
  white-space: nowrap;
}

.filter-date-label {
  font-size: 12px;
  color: var(--ink-3);
  white-space: nowrap;
  font-weight: 500;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.filter-tab {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--ink-2);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.filter-tab:hover { border-color: var(--ink-3); color: var(--ink-2); }
.filter-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

[data-theme="dark"] .filter-tab { background: var(--bg-surface); border-color: var(--border); color: var(--ink-2); }
[data-theme="dark"] .filter-tab:hover { color: var(--ink); border-color: var(--ink-3); }
[data-theme="dark"] .filter-tab.active { background: var(--ink); color: var(--bg-page); border-color: var(--ink); }
[data-theme="dark"] .filter-date-label { color: var(--ink-3); }

@media (max-width: 640px) {
  .filter-row { flex-wrap: wrap; }
  .filter-row.search-row { flex-wrap: wrap; }
  .filter-select { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .filter-actions { width: 100%; }
  .btn-filter-apply, .btn-filter-reset { flex: 1; text-align: center; }
}

[data-theme="dark"] .filter-toolbar {
  background: var(--bg-surface);
  border-color: var(--border);
}
[data-theme="dark"] .filter-search-input,
[data-theme="dark"] .filter-select {
  background-color: var(--bg-page);
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .filter-search-input::placeholder { color: var(--ink-3); }
[data-theme="dark"] .filter-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* .btn-filter-apply conserva el bronce con texto negro en ambos modos (spec Luisa). */
[data-theme="dark"] .btn-filter-reset { background: var(--bg-surface); border-color: var(--border); color: var(--ink-2); }
[data-theme="dark"] .btn-filter-reset:hover { border-color: var(--ink-3); color: var(--ink); }

/* ═══════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════ */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px 2rem;
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--border);
  background: var(--bg-inset);
  z-index: 100;
}

.main-content {
  padding-bottom: 3rem;
}

[data-theme="dark"] .app-footer {
  background: var(--bg-surface);
  border-top-color: var(--border);
  color: var(--ink-3);
}

.theme-toggle {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #ecf0f1;
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.2);
}

/* ═══════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body {
  background-color: var(--bg-page);
  color: var(--ink);
}

/* Global text contrast — cubre párrafos, celdas y spans sin clase propia */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] div {
  color: inherit;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--ink);
}

[data-theme="dark"] a {
  color: var(--accent);
}
[data-theme="dark"] a:hover {
  color: var(--accent-strong);
}

/* Los botones que son enlaces (<a class="btn …">) conservan el texto de la
   spec — la regla genérica de arriba los volvía bronce sobre bronce/borgoña. */
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn-primary:hover {
  color: #0f0f0f;
}
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] a.btn-secondary:hover,
[data-theme="dark"] a.btn-danger,
[data-theme="dark"] a.btn-danger:hover {
  color: #ffffff;
}

/* El header conserva el gradiente negro + borde bronce en ambos modos. */

/* Main content bg */
[data-theme="dark"] .main-content {
  background-color: var(--bg-page);
}

/* Cards / containers */
[data-theme="dark"] .soc-card,
[data-theme="dark"] .h-card,
[data-theme="dark"] .dt-container,
[data-theme="dark"] .table-container,
[data-theme="dark"] .form-card {
  background-color: var(--bg-surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* Table headers */
[data-theme="dark"] .dt-th,
[data-theme="dark"] .h-table thead th,
[data-theme="dark"] .soc-table thead th,
[data-theme="dark"] .data-table th {
  background-color: var(--bg-surface);
  color: var(--ink-2);
  border-bottom-color: var(--border);
}

/* Table rows */
[data-theme="dark"] .dt-td,
[data-theme="dark"] .h-table tbody td,
[data-theme="dark"] .soc-table tbody td,
[data-theme="dark"] .data-table td {
  border-bottom-color: var(--border-soft);
  color: var(--ink);
}
[data-theme="dark"] .dt-row:hover .dt-td,
[data-theme="dark"] .h-table tbody tr:hover td,
[data-theme="dark"] .soc-table tbody tr:hover td,
[data-theme="dark"] .data-table tbody tr:hover {
  background-color: var(--accent-soft);
}
[data-theme="dark"] .h-table tfoot td,
[data-theme="dark"] .soc-table tfoot td {
  border-top-color: var(--border);
}

/* Text colors */
[data-theme="dark"] .page-header h1,
[data-theme="dark"] .soc-card-title,
[data-theme="dark"] .h-card-title {
  color: var(--ink-2);
}
[data-theme="dark"] .soc-value,
[data-theme="dark"] .h-value,
[data-theme="dark"] .holder-name,
[data-theme="dark"] .society-name {
  color: var(--ink);
}
[data-theme="dark"] .soc-label,
[data-theme="dark"] .h-label,
[data-theme="dark"] .dt-count,
[data-theme="dark"] .mv-detail-cell {
  color: var(--ink-3);
}
[data-theme="dark"] .dt-empty { color: var(--ink-3); }

/* Inputs */
[data-theme="dark"] .dt-search-input,
[data-theme="dark"] .dt-date-input,
[data-theme="dark"] .form-control {
  background-color: var(--bg-surface);
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .dt-search-input::placeholder { color: var(--ink-3); }
[data-theme="dark"] .dt-search-input:focus,
[data-theme="dark"] .dt-date-input:focus,
[data-theme="dark"] .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-focus);
}

/* Filter tabs */
[data-theme="dark"] .filter-tab {
  background: var(--bg-surface);
  border-color: var(--border);
  color: var(--ink-2);
}
[data-theme="dark"] .filter-tab:hover { color: var(--ink); border-color: var(--ink-3); }
[data-theme="dark"] .filter-tab.active { background: var(--ink); color: var(--bg-page); border-color: var(--ink); }

/* Buttons */
[data-theme="dark"] .btn-row {
  background: var(--accent-soft);
  border-color: var(--accent-focus);
  color: var(--accent);
}
[data-theme="dark"] .btn-row:hover { background: var(--accent); color: #0f0f0f; }
[data-theme="dark"] .btn-filter { background: var(--border); }
[data-theme="dark"] .btn-filter:hover { background: var(--ink-3); }
[data-theme="dark"] .btn-filter-clear { border-color: var(--border); color: var(--ink-2); }

/* Badges — keep colors but slightly adjust */
[data-theme="dark"] .nit-code,
[data-theme="dark"] .id-code {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
[data-theme="dark"] .badge-count { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .type-badge,
[data-theme="dark"] .soc-type-badge { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .mv-balance { color: var(--ink); }

/* Balance pill */
[data-theme="dark"] .h-balance-pill { background: var(--bg-surface); color: var(--ink-2); }
[data-theme="dark"] .h-balance-pill strong { color: var(--ink); }

/* Breadcrumb */
[data-theme="dark"] .breadcrumb { color: var(--ink-3); }
[data-theme="dark"] .breadcrumb a { color: var(--accent); }

/* pct bar */
[data-theme="dark"] .pct-bar { background: var(--border); }

/* Section cards (s-section on forms) */
[data-theme="dark"] .s-section {
  background: var(--bg-surface);
  border-color: var(--border);
}
[data-theme="dark"] .s-title { color: var(--ink-2); }
[data-theme="dark"] .s-field label { color: var(--ink-3); }
[data-theme="dark"] .form-label { color: var(--ink-2); }

/* Empty state */
[data-theme="dark"] .empty-state { color: var(--ink-3); }

/* Ownership tree */
[data-theme="dark"] .ownership-tree ul { border-left-color: var(--border); }
/* ── v-card system (people show, person form, vehicle cards) ── */
[data-theme="dark"] .v-card { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .v-section { color: var(--terracotta-light); border-bottom-color: var(--border); }
[data-theme="dark"] .dlab { color: var(--ink-3); }
[data-theme="dark"] .dval { color: var(--ink); }
[data-theme="dark"] .empty-msg { color: var(--ink-3); }
[data-theme="dark"] .add-toggle { color: var(--terracotta-light); }
[data-theme="dark"] .inline-form { background: var(--bg-page); border-color: var(--border); }

/* ── Vehicle/People form sections ── */
[data-theme="dark"] .form-section { background: var(--bg-surface); border-color: var(--border); }
[data-theme="dark"] .form-section-title { color: var(--terracotta-light); border-bottom-color: var(--border); }
[data-theme="dark"] .form-group label { color: var(--ink-2); }

/* ── Error block ── */
[data-theme="dark"] .error-messages { background: #450a0a; border-color: #7f1d1d; }

/* ── Holder/Person badges and table elements ── */
[data-theme="dark"] .h-type-badge.persona { background: #3a1f22; color: var(--burgundy-light); }
[data-theme="dark"] .h-type-badge.sociedad { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .h-date { color: var(--ink-3); }
[data-theme="dark"] .h-empty { color: var(--ink-3); }
[data-theme="dark"] .mv-badge.entry { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .mv-badge.exit  { background: #450a0a; color: #f87171; }
[data-theme="dark"] .mv-qty.entry { color: var(--accent); }
[data-theme="dark"] .mv-qty.exit  { color: #f87171; }
[data-theme="dark"] .pct-val { color: var(--ink-2); }

/* ── Inline color helpers used across show views ── */
[data-theme="dark"] .v-td-muted { color: var(--ink-3); }
[data-theme="dark"] .v-pct-econ { color: var(--terracotta-light); }
[data-theme="dark"] .v-pct-vote { color: var(--accent); }
[data-theme="dark"] .v-code { color: var(--ink-3); }
[data-theme="dark"] .v-body-text { color: var(--ink); }
[data-theme="dark"] .v-text-sm { color: var(--ink); }
[data-theme="dark"] .v-source-box { background: var(--bg-surface); border-color: var(--border); color: var(--ink-2); }
[data-theme="dark"] .v-row-diverged { background: #2a2310; }
[data-theme="dark"] .h-mv-detail { color: var(--ink-2); }

/* ── dt-table system (global) — shared by users, holders, societies, movements indexes ── */
.dt-container {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.dt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dt-th {
  background: var(--bg-inset);
  padding: 11px 14px;
  text-align: left;
  font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap; user-select: none;
}
.dt-th.dt-num { text-align: right; }
.dt-th.sortable { cursor: pointer; }
.dt-th.sortable:hover { background: var(--border-soft); color: var(--ink); }
.dt-th.sort-asc .sort-icon::after  { content: " ↑"; }
.dt-th.sort-desc .sort-icon::after { content: " ↓"; }
.sort-icon { color: var(--ink-3); font-size: 10px; }
.dt-td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  color: var(--ink);
}
.dt-td.dt-num     { text-align: right; }
.dt-td.dt-actions { text-align: right; white-space: nowrap; }
.dt-row:last-child .dt-td { border-bottom: none; }
.dt-row:hover .dt-td { background: var(--bg-inset); }
.dt-row.hidden { display: none; }
.dt-empty { color: var(--ink-3); font-size: 12px; }
.btn-row {
  display: inline-block;
  padding: 5px 10px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink-2);
  text-decoration: none;
  background: var(--bg-surface);
  transition: all .15s;
  margin-left: 4px;
}
.btn-row:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-row.disabled { opacity: .45; pointer-events: none; }

/* ── Auditoría: paginación y modal de detalle (valores anterior/nuevo) ── */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; font-size: 12.5px; color: var(--ink-2);
}
.pagination-links { display: flex; gap: 6px; }
.audit-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  width: min(720px, 92vw); max-height: 84vh; padding: 0; border: none;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  background: var(--bg-surface); color: var(--ink);
}
.audit-modal::backdrop { background: rgba(15,15,15,.55); }
.audit-modal-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
  border-radius: 12px 12px 0 0;
}
.audit-modal-toolbar strong { font-size: 14.5px; }
.audit-modal-body { padding: 16px 18px; overflow-y: auto; max-height: calc(84vh - 60px); }
.audit-modal-meta { margin: 0 0 14px; font-size: 12px; color: var(--ink-2); }
.audit-detail-container {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.audit-detail-table { font-size: 12.5px; }
.audit-detail-table .dt-th { padding: 9px 14px; }
.audit-detail-table .dt-td { padding: 9px 14px; }
.audit-detail-table .dt-row:nth-child(even) .dt-td { background: var(--bg-inset); }
.audit-val-empty { color: var(--ink-3); }
.audit-record-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.audit-record-link:hover { text-decoration: underline; }

/* ── Árbol de participación (gráfico D3): usado en la ficha de sociedad ── */
/* ── y en el mapa consolidado de toda la estructura societaria.         ── */
[data-controller="ownership-tree"] {
  --ot-surface:   var(--bg-surface);
  --ot-ink:       var(--ink);
  --ot-ink-2:     var(--ink-2);
  --ot-link:      var(--border);
  --ot-sociedad:  #8a6b40;
  --ot-sociedad-fill: #f5eee0;
  --ot-persona:   #6b1d23;
  --ot-persona-fill: #f5e8ea;
  --ot-cycle:     #d03b3b;
  --ot-cycle-fill: #fbe9e9;
}
[data-theme="dark"] [data-controller="ownership-tree"] {
  --ot-surface:   var(--bg-surface);
  --ot-ink:       #ffffff;
  --ot-ink-2:     var(--ink-2);
  --ot-link:      var(--border);
  --ot-sociedad:  #c9b59d;
  --ot-sociedad-fill: #3a2f1f;
  --ot-persona:   #a85a6f;
  --ot-persona-fill: #3a1f22;
  --ot-cycle:     #e66767;
  --ot-cycle-fill: #401a1a;
}

.ot-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.ot-cycle-note[hidden] { display: none; }
.ot-cycle-note {
  display: flex; align-items: baseline; gap: 8px; margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--ot-ink-2);
  background: var(--ot-cycle-fill); border: 1px dashed var(--ot-cycle);
  border-radius: 8px; padding: 8px 12px;
}
.ot-cycle-note .ot-swatch { flex: none; position: relative; top: 1px; }
.ot-cycle-note strong { color: var(--ot-cycle); }
.ot-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ot-ink-2); }
.ot-swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ot-swatch--sociedad { background: var(--ot-sociedad); }
.ot-swatch--persona  { background: var(--ot-persona); }
.ot-swatch--cycle    { background: var(--ot-cycle); }
.ot-expand-btn {
  margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: none; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
.ot-expand-btn:hover { background: var(--accent-soft); }

.ot-preview {
  width: 100%; height: 340px; background: var(--ot-surface);
  border: 1px solid var(--border); border-radius: 10px; cursor: zoom-in; overflow: hidden;
}
[data-theme="dark"] .ot-preview { border-color: var(--border); }

.ownership-tree-svg { display: block; }
.ot-links path { fill: none; stroke: var(--ot-link); stroke-width: 1.5px; }
.ot-node rect { stroke-width: 1.5px; }
.ot-node--sociedad rect { fill: var(--ot-sociedad-fill); stroke: var(--ot-sociedad); }
.ot-node--persona rect  { fill: var(--ot-persona-fill); stroke: var(--ot-persona); }
.ot-node--cycle rect    { fill: var(--ot-cycle-fill); stroke: var(--ot-cycle); stroke-dasharray: 4 3; }
.ot-node-name { font-size: 12.5px; font-weight: 600; fill: var(--ot-ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ot-node-meta { font-size: 11px; fill: var(--ot-ink-2); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.ot-node--cycle .ot-node-meta { fill: var(--ot-cycle); font-weight: 600; }
.ot-node-id { font-size: 10.5px; fill: var(--ot-ink-2); opacity: .8; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

.ot-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
  width: min(1100px, 92vw); height: min(760px, 88vh); padding: 0; border: none;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
  background: var(--ot-surface); color: var(--ot-ink);
}
.ot-modal::backdrop { background: rgba(15,15,15,.55); }
.ot-modal-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .ot-modal-toolbar { border-color: var(--border); }
.ot-modal-actions { display: flex; gap: 6px; }
.ot-icon-btn {
  width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-surface);
  font-size: 15px; font-weight: 700; cursor: pointer; color: var(--ink-2);
}
.ot-icon-btn:hover { background: var(--border-soft); }
.ot-icon-btn--close { color: #b91c1c; }
.ot-modal-body { width: 100%; height: calc(100% - 76px); background: var(--ot-surface); overflow: hidden; touch-action: none; }
.ot-modal-hint { margin: 0; padding: 6px 16px 10px; font-size: 11.5px; color: var(--ot-ink-2); text-align: center; }
[data-theme="dark"] .ot-icon-btn { background: var(--bg-surface); border-color: var(--border); color: var(--ink); }
[data-theme="dark"] .ot-icon-btn:hover { background: var(--border); }

.ot-tooltip {
  position: fixed; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: #2a2420; color: #f5f5f5; font-size: 12px; line-height: 1.5;
  border: 1px solid #3a3430;
  padding: 8px 10px; border-radius: 6px; max-width: 240px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ot-tooltip strong { display: block; margin-bottom: 2px; }
.ot-tooltip span { display: block; }

/* ── Mapa consolidado: contenedor a página completa (sin modal) ── */
.cm-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-top: 8px; }
.cm-toolbar { justify-content: space-between; }
.cm-canvas {
  width: 100%; height: 72vh; min-height: 480px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; touch-action: none; cursor: grab;
}
.cm-canvas:active { cursor: grabbing; }
[data-theme="dark"] .cm-canvas { border-color: var(--border); }
.cm-canvas--compact { height: 420px; min-height: 420px; }

/* ── Mapa consolidado por jurisdicción: filas por país + rama familiar ── */
.jm-svg { display: block; }
.jm-row-band { fill: var(--bg-inset); opacity: .45; }
.jm-row-divider { stroke: var(--border); stroke-width: 1px; stroke-dasharray: 4 3; }
.jm-row-label { font-size: 13px; font-weight: 700; fill: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.jm-row-count { font-size: 11px; fill: var(--ink-3); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.jm-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.4px; stroke-dasharray: 3 3; opacity: .7; transition: opacity .12s, stroke-width .12s; }
.jm-edge-dim { opacity: .08 !important; }
.jm-edge-active { opacity: 1 !important; stroke-width: 2.6px !important; stroke-dasharray: 4 3; }
.jm-edge-hit { fill: none; stroke: transparent; stroke-width: 14px; pointer-events: stroke; cursor: pointer; }
.jm-node rect { fill: var(--bg-surface); stroke-width: 2px; }
.jm-node-name { font-size: 12px; font-weight: 600; fill: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Paleta categórica de ramas familiares: los 3 colores de marca (Borgoña,
   Terracota, Bronce), orden fijo, nunca ciclada. Una 4ª+ rama no inventa un
   4º color — cae en el cubo "otras ramas" (mismo neutro que "sin rama", pero
   con borde punteado para distinguir "varias ramas mezcladas" de "ninguna"). */
.jm-swatch-0 { background: var(--burgundy); }
.jm-swatch-1 { background: var(--terracotta); }
.jm-swatch-2 { background: var(--bronze); }
.jm-swatch-otras { background: transparent; border: 2px dashed var(--ink-3); }
.jm-swatch-none { background: var(--ink-3); }
[data-theme="dark"] .jm-swatch-0 { background: var(--burgundy-light); }
[data-theme="dark"] .jm-swatch-1 { background: var(--terracotta-light); }
[data-theme="dark"] .jm-swatch-2 { background: var(--bronze-light); }

.jm-node-branch-0 { stroke: var(--burgundy); }
.jm-node-branch-1 { stroke: var(--terracotta); }
.jm-node-branch-2 { stroke: var(--bronze); }
.jm-node-branch-otras { stroke: var(--ink-3); stroke-dasharray: 4 2; }
.jm-node-branch-none { stroke: var(--ink-3); }
[data-theme="dark"] .jm-node-branch-0 { stroke: var(--burgundy-light); }
[data-theme="dark"] .jm-node-branch-1 { stroke: var(--terracotta-light); }
[data-theme="dark"] .jm-node-branch-2 { stroke: var(--bronze-light); }

.jm-edge-branch-0 { stroke: var(--burgundy); opacity: .8; }
.jm-edge-branch-1 { stroke: var(--terracotta); opacity: .8; }
.jm-edge-branch-2 { stroke: var(--bronze); opacity: .8; }
.jm-edge-branch-otras { stroke: var(--ink-3); opacity: .8; }
[data-theme="dark"] .jm-edge-branch-0 { stroke: var(--burgundy-light); }
[data-theme="dark"] .jm-edge-branch-1 { stroke: var(--terracotta-light); }
[data-theme="dark"] .jm-edge-branch-2 { stroke: var(--bronze-light); }

/* ── Badges de estado genéricos (usados en Sociedades y Personas: roles,
   vencimientos, declaraciones de beneficiario, tipo de persona) ── */
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px; border-radius:10px; white-space:nowrap; }
.badge-success { background:#fbe9e3; color:var(--terracotta-dark); }
.badge-secondary { background:var(--border); color:var(--ink-2); }
.badge-warning { background:#f7efdc; color:#8a6418; }
.badge-danger { background:#fde8e8; color:#c0392b; }
[data-theme="dark"] .badge-success { background:#3a2419; color:var(--terracotta-light); }
[data-theme="dark"] .badge-secondary { background:var(--bg-surface); color:var(--ink-2); }
[data-theme="dark"] .badge-warning { background:#2a1f0e; color:#fbbf24; }
[data-theme="dark"] .badge-danger { background:#450a0a; color:#f87171; }