/* LAB ELECTORAL - CSS BASE */

:root {
  --primary-color:#79183d;
  --primary-hover:#611331;
  --primary-light:#f7edf1;
  --secondary-color:#64748b;
  --secondary-hover:#475569;
  --danger-color:#ef4444;
  --danger-hover:#dc2626;
  --bg-color:#f8fafc;
  --panel-bg:#ffffff;
  --border-color:#e2e8f0;
  --text-primary:#0f172a;
  --text-secondary:#475569;
  --text-muted:#94a3b8;
  --active-field-bg:#ffffff;
  --readonly-field-bg:#f1f5f9;
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body {
  font-family:system-ui,-apple-system,BlinkMacSystemFont,
    "Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg-color);
  color:var(--text-primary);
  line-height:1.5;
  padding:1.5rem;
}

.header {
  text-align:center;
  margin-bottom:2rem;
}

.header h1 {
  font-size:2.25rem;
  font-weight:800;
  letter-spacing:-.025em;
}

.subtitle {
  font-size:1rem;
  color:var(--text-secondary);
  margin-top:.35rem;
  font-weight:500;
}

.container {
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

.panel {
  background:var(--panel-bg);
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  box-shadow:var(--shadow-sm);
}

.panel h2 {
  font-size:1.25rem;
  color:var(--text-primary);
  margin-bottom:1.25rem;
  font-weight:700;
}

.panel-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  flex-wrap:wrap;
  gap:1rem;
}

.panel-subtext {
  font-size:.875rem;
  color:var(--text-secondary);
  margin-top:.25rem;
}

/* FORMULARIOS */

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

.form-group-full {
  grid-column:1/-1;
}

.form-group {
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.form-group label {
  font-size:.875rem;
  font-weight:600;
  color:var(--text-secondary);
}

input[type="text"],
input[type="number"],
select {
  width:100%;
  padding:.6rem .75rem;
  border:1px solid var(--border-color);
  border-radius:var(--radius-sm);
  background:var(--active-field-bg);
  color:var(--text-primary);
  font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}

input[readonly] {
  background:var(--readonly-field-bg);
  color:var(--text-secondary);
  cursor:not-allowed;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
  outline:none;
  border-color:#79183d;
  box-shadow:0 0 0 3px rgba(121,24,61,.15);
}

/* MODOS DE ENTRADA */

.mode-selector-wrapper {
  display:flex;
  align-items:center;
  gap:.75rem;
  background:#f1f5f9;
  padding:.4rem .75rem;
  border-radius:var(--radius-md);
  border:1px solid var(--border-color);
}

.mode-selector-label {
  font-size:.85rem;
  font-weight:700;
  color:var(--text-secondary);
}

.mode-toggle-group {
  display:flex;
  background:#e2e8f0;
  border-radius:var(--radius-sm);
  padding:2px;
}

.mode-toggle-btn {
  border:none;
  background:transparent;
  padding:.35rem .85rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-secondary);
  border-radius:4px;
  cursor:pointer;
  transition:all .2s;
}

.mode-toggle-btn.active {
  background:#79183d;
  color:white;
  box-shadow:var(--shadow-sm);
}

/* COBERTURA ELECTORAL */

.coverage-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8fafc;
  border:1px solid var(--border-color);
  border-radius:var(--radius-md);
  padding:.75rem 1.25rem;
  margin-bottom:1rem;
  flex-wrap:wrap;
  gap:.75rem;
}

.coverage-item {
  font-size:.875rem;
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  gap:.35rem;
}

.coverage-item.highlight {
  background:#e0f2fe;
  padding:.35rem .75rem;
  border-radius:var(--radius-sm);
  color:#0369a1;
}

.coverage-label {
  font-weight:600;
}

.error-banner {
  background:#fef2f2;
  border:1px solid #fecdd3;
  color:#991b1b;
  padding:.85rem 1.25rem;
  border-radius:var(--radius-md);
  margin-bottom:1rem;
  font-size:.9rem;
  font-weight:600;
}

/* TABLAS */

.table-responsive {
  overflow-x:auto;
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:.9rem;
}

th {
  background:#f1f5f9;
  color:var(--text-secondary);
  font-weight:700;
  padding:.75rem .85rem;
  border-bottom:2px solid var(--border-color);
}

td {
  padding:.6rem .85rem;
  border-bottom:1px solid var(--border-color);
  vertical-align:middle;
}

tbody tr:hover {
  background:#f8fafc;
}

td input.active-input {
  border-color:#79183d!important;
  background:#fbf5f7!important;
  font-weight:600;
}

td input.disabled-input {
  background:#f1f5f9;
  color:#94a3b8;
}

/* BOTONES */

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.6rem 1.25rem;
  font-size:.9rem;
  font-weight:600;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .2s;
}

.btn-primary {
  background:#79183d;
  color:white;
}

.btn-primary:hover {
  background:#611331;
}

.btn-secondary {
  background:white;
  border-color:var(--border-color);
  color:var(--text-primary);
}

.btn-secondary:hover {
  background:#f1f5f9;
}

.btn-delete {
  background:#fee2e2;
  color:var(--danger-color);
  padding:.35rem .65rem;
  font-size:.8rem;
  border-radius:var(--radius-sm);
  border:1px solid #fca5a5;
}

.btn-delete:hover {
  background:var(--danger-color);
  color:white;
}

.btn-large {
  width:100%;
  padding:1rem;
  font-size:1.15rem;
  font-weight:700;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

.actions-panel {
  margin-top:.5rem;
}

.results-panel {
  display:none;
}

/* ETIQUETAS Y ESCAÑOS */

.national-group-tag {
  font-size:.75rem;
  font-weight:700;
  padding:.15rem .45rem;
  border-radius:4px;
  background:#e2e8f0;
  color:#334155;
  text-transform:uppercase;
}

.seat-badge {
  display:inline-block;
  padding:.25rem .65rem;
  border-radius:12px;
  font-weight:700;
  font-size:.85rem;
  background:#dbeafe;
  color:#1e40af;
}

.seat-badge.zero {
  background:#f1f5f9;
  color:#94a3b8;
}

/* MATRIZ D'HONDT */

.dhondt-matrix-table th,
.dhondt-matrix-table td {
  font-size:.8rem;
  padding:.4rem .5rem;
}

.dhondt-matrix-table td.winning-quotient {
  background:#dcfce7;
  font-weight:700;
  color:#15803d;
}

.dhondt-matrix-table td.last-winning-quotient {
  background:#fef08a;
  font-weight:800;
  color:#854d0e;
  border:2px solid #ca8a04;
}

.dhondt-matrix-table td.first-losing-quotient {
  background:#ffe4e6;
  font-weight:800;
  color:#be123c;
  border:2px solid #e11d48;
}

/* RESULTADOS PLEGABLES */

.result-accordion {
  background:white;
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.result-accordion+.result-accordion {
  margin-top:1rem;
}

.result-accordion-summary {
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  cursor:pointer;
  font-weight:800;
  color:var(--text-primary);
  background:#f8fafc;
  border-bottom:1px solid transparent;
}

.result-accordion-summary::-webkit-details-marker {
  display:none;
}

.result-accordion[open]>.result-accordion-summary {
  border-bottom-color:var(--border-color);
}

.result-accordion-summary::before {
  content:'▶';
  color:#79183d;
  font-size:.8rem;
  transition:transform .2s;
}

.result-accordion[open]>.result-accordion-summary::before {
  transform:rotate(90deg);
}

.result-accordion-hint {
  margin-left:auto;
  font-size:.75rem;
  font-weight:600;
  color:var(--text-muted);
}

.result-accordion-body {
  padding:1.25rem;
}

.baseline-reset-btn {
  margin-left:.5rem;
}

/* SIMULACIÓN NACIONAL */

.national-section {
  background:white;
  border:1px solid var(--border-color);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.national-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1.5rem;
  padding:1.5rem 1.5rem 1rem;
}

.national-heading h2 {
  margin:0;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
}

.national-heading p {
  margin-top:.25rem;
  color:var(--text-secondary);
  font-size:.85rem;
}

.national-status {
  flex-shrink:0;
  padding:.35rem .7rem;
  border-radius:999px;
  background:#f1f5f9;
  color:#475569;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.national-status.ready {
  background:#dcfce7;
  color:#166534;
}

.national-status.error {
  background:#fee2e2;
  color:#991b1b;
}

/* RESULTADOS NACIONALES */

.national-seat-ranges {
  display:flex;
  align-items:stretch;
  width:100%;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
  scrollbar-width:thin;
}

.national-party-range {
  position:relative;
  overflow:hidden;
  min-width:115px;
  padding:1.15rem 1.15rem 1rem;
  border-right:1px solid var(--border-color);
  background:white;
}

.national-party-range:last-child {
  border-right:none;
}

.national-party-range:hover {
  background:#f8fafc;
}

.national-party-color-strip {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background-color:var(--party-color);
}

.national-party-range:hover .national-party-color-strip {
  height:5px;
}

.national-party-name {
  display:block;
  margin-bottom:.15rem;
  color:var(--text-secondary);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap;
}

.national-party-seats {
  display:block;
  color:var(--text-primary);
  font-size:1.45rem;
  line-height:1.1;
  font-weight:850;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.national-party-seats small {
  margin-left:.2rem;
  color:var(--text-muted);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:0;
}

/* MAPA NACIONAL */

.national-map-area {
  position:relative;
  border-top:1px solid var(--border-color);
  background:linear-gradient(180deg,#fff,#f8fafc);
}

.national-map-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--border-color);
}

.national-map-toolbar>div {
  display:flex;
  align-items:baseline;
  gap:.6rem;
}

.national-map-toolbar strong {
  color:var(--text-primary);
  font-size:.85rem;
  font-weight:850;
  letter-spacing:.035em;
}

.national-map-toolbar span {
  color:var(--text-secondary);
  font-size:.75rem;
}

.map-help {
  color:var(--text-muted)!important;
  text-align:right;
}

.national-map {
  position:relative;
  width:100%;
  min-height:540px;
  padding:1rem;
}

.national-map-svg {
  display:block;
  width:100%;
  height:auto;
  max-height:600px;
}

.map-province {
  cursor:pointer;
  stroke:#fff;
  stroke-width:1.5;
  opacity:.88;
  vector-effect:non-scaling-stroke;
  transition:opacity .15s,filter .15s;
}

.map-province:hover,
.map-province.is-hovered {
  opacity:1;
  stroke:#0f172a;
  stroke-width:2;
  filter:brightness(1.05);
}

.map-province-borders {
  fill:none;
  stroke:rgba(255,255,255,.95);
  stroke-width:.9;
  pointer-events:none;
  vector-effect:non-scaling-stroke;
}

/* TOOLTIP DEL MAPA */

.national-map-tooltip {
  position:absolute;
  z-index:20;
  display:none;
  width:290px;
  padding:0;
  background:rgba(15,23,42,.97);
  color:white;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  box-shadow:0 18px 40px rgba(15,23,42,.24);
  pointer-events:none;
  overflow:hidden;
}

.national-map-tooltip.visible {
  display:block;
}

.map-tooltip-header {
  padding:.9rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.map-tooltip-header>div {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
}

.map-tooltip-header strong {
  font-size:.95rem;
  font-weight:850;
}

.map-tooltip-header span {
  color:#cbd5e1;
  font-size:.72rem;
  white-space:nowrap;
}

.map-tooltip-section {
  padding:.85rem 1rem;
}

.map-tooltip-section+.map-tooltip-section {
  border-top:1px solid rgba(255,255,255,.1);
}

.map-tooltip-label {
  display:block;
  margin-bottom:.55rem;
  color:#94a3b8;
  font-size:.65rem;
  font-weight:850;
  letter-spacing:.08em;
}

.map-tooltip-party {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.17rem 0;
}

.map-tooltip-party-name {
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
  font-weight:650;
}

.map-tooltip-party strong {
  font-size:.8rem;
  font-variant-numeric:tabular-nums;
}

.map-tooltip-dot {
  display:inline-block;
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
}

.map-tooltip-pair {
  display:block;
  margin-bottom:.55rem;
  font-size:.85rem;
}

.map-tooltip-last-seat-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.15rem 0;
  color:#e2e8f0;
  font-size:.74rem;
}

.map-tooltip-last-seat-row>span {
  display:flex;
  align-items:center;
  gap:.4rem;
}

.map-tooltip-last-seat-row strong {
  color:white;
}

.map-tooltip-empty {
  color:#94a3b8;
  font-size:.75rem;
  font-style:italic;
}

/* MAPA PROVISIONAL */

.national-map-placeholder {
  min-height:410px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:radial-gradient(
    circle at center,
    #fff 0%,
    #f8fafc 65%,
    #f1f5f9 100%
  );
}

.map-placeholder-content {
  text-align:center;
  max-width:400px;
  padding:2rem;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  color:var(--text-secondary);
}

.map-placeholder-label {
  display:block;
  margin-bottom:.35rem;
  color:var(--primary-color);
  font-size:.72rem;
  font-weight:850;
  letter-spacing:.08em;
}

.map-placeholder-content strong {
  display:block;
  color:var(--text-primary);
  font-size:1.35rem;
  font-weight:800;
}

.map-placeholder-content p {
  margin-top:.4rem;
  font-size:.85rem;
}

/* ENCABEZADO PROVINCIAL ORIGINAL */

.district-analysis-heading {
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-top:.75rem;
  padding:0 .25rem;
}

.district-analysis-heading>span {
  width:32px;
  height:32px;
  flex:0 0 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--text-primary);
  color:white;
  font-size:.8rem;
  font-weight:800;
}

.district-analysis-heading h2 {
  margin:0;
  color:var(--text-primary);
  font-size:1.05rem;
  font-weight:800;
}

.district-analysis-heading p {
  margin-top:.1rem;
  color:var(--text-secondary);
  font-size:.8rem;
}

/* ADAPTACIÓN A MÓVIL */

@media(max-width:640px) {
  body {
    padding:.75rem;
  }

  .panel {
    padding:1rem;
  }

  .panel-header {
    flex-direction:column;
    align-items:flex-start;
  }

  .mode-selector-wrapper {
    width:100%;
    justify-content:space-between;
  }

  .result-accordion-summary {
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .result-accordion-hint {
    width:100%;
    margin-left:1.4rem;
  }

  .baseline-reset-btn {
    margin-left:0;
    margin-top:.5rem;
  }

  .national-heading {
    align-items:flex-start;
    flex-direction:column;
  }

  .national-party-range {
    min-width:105px;
    padding:.85rem 1rem;
  }

  .national-party-seats {
    font-size:1.25rem;
  }

  .national-map-placeholder {
    min-height:300px;
    padding:1rem;
  }

  .national-map-toolbar {
    align-items:flex-start;
    flex-direction:column;
  }

  .map-help {
    text-align:left;
  }

  .national-map {
    min-height:330px;
    padding:.5rem;
  }

  .national-map-tooltip {
    width:250px;
  }
}