/* Sistema de Suministros — Municipio de Morón.
   Estética institucional del Municipio (la del sistema de Gestión Documental): grafito y rojo Morón, encabezado grafito con
   filete rojo, tarjetas con borde superior rojo, Neo Sans / Neo Sans Ultra. Todos los colores van por variables. */

@font-face {
  font-family: "Neo Sans";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/neo-sans-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Neo Sans";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/neo-sans-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Neo Sans Ultra";
  font-weight: 900;
  font-display: swap;
  src: url("fonts/neo-sans-ultra.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --page: #f5f5f5;
  --surface: #ffffff;
  --panel: #fafafa;
  --ink: #212121;
  --ink-2: #424242;
  --muted: #606060;
  --grid: #ececec;
  --border: #e5e5e5;
  --red: #ce1520;
  --red-hover: #b9131c;
  --on-red: #ffffff;
  --red-text: #ce1520;
  --charcoal: #212121;
  --pos: #2f7a3f;
  --neg: #c00000;
  --warn: #d99a1c;
  --shadow-pop: 0 8px 22px rgba(0, 0, 0, 0.18);
  --backdrop: rgba(0, 0, 0, 0.55);
  /* Gráficos */
  --c1: #305480;
  --c2: #8a94a0;
  --c3: #d99a1c;
  --c4: #2f7a3f;
  --c5: #7b5aa6;
  --g-cuota: #d0d3d7;
  --g-linea: #e5e5e5;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-titulo: "Neo Sans Ultra", "Neo Sans", sans-serif;
  --font-neo: "Neo Sans", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-10: 40px;
  --content-max: 1320px;
  --control-height: 42px;
  --radius-control: 3px;
  --radius-table: 5px;
  --radius-card: 5px;
  --radius-pill: 99px;
}

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

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.5 var(--font-sans);
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2.5px solid var(--red);
  outline-offset: 2px;
}

.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  color: var(--red-text);
  font-weight: 600;
  border-radius: 0 0 var(--radius-control) 0;
}

.saltar:focus {
  left: 0;
}

/* ------------------------------------------------------------------ Disposición: encabezado grafito + contenido + pie */

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3 {
  font-family: var(--font-titulo);
  font-weight: 900;
  letter-spacing: -0.025em;
}

.municipal-header {
  background: var(--charcoal);
  border-bottom: 4px solid var(--red);
  color: #fff;
}

.municipal-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  max-width: var(--content-max);
  min-height: 90px;
  margin: 0 auto;
  padding: 15px 32px 8px;
}

.municipal-brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-right: auto;
  color: #fff;
  text-decoration: none;
}

.logo-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.logo-text {
  padding-left: 18px;
  border-left: 1px solid #555;
  font-size: 13px;
  line-height: 1.45;
}

.logo-text b {
  display: block;
  font: 700 17px var(--font-neo);
}

.municipal-account {
  display: flex;
  align-items: center;
  gap: 18px;
  order: 1;
  font-size: 12px;
}

.municipal-account small {
  display: block;
  margin-top: 4px;
  color: #bbb;
  font-size: 11px;
}

.header-button {
  padding: 9px 13px;
  border: 1px solid #777;
  border-radius: 3px;
  background: transparent;
  color: #fff;
  font: 400 12px var(--font-sans);
  cursor: pointer;
}

.header-button:hover:not(:disabled) {
  border-color: #fff;
  background: #383838;
}

.header-button:disabled {
  opacity: 0.6;
}

.municipal-nav {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  order: 2;
}

.municipal-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 9px;
  border-bottom: 2px solid transparent;
  color: #eee;
  font: 700 15px var(--font-neo);
  text-decoration: none;
}

.municipal-nav a:hover {
  color: #ff8084;
}

.municipal-nav a:focus-visible,
.header-button:focus-visible,
.municipal-brand:focus-visible {
  outline: 3px solid #ff8084;
  outline-offset: 3px;
}

.nav-cuenta {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: #fff;
  font: 700 11.5px/20px var(--font-sans);
  text-align: center;
}

.main-content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 32px 64px;
  min-width: 0;
}

.dashboard {
  width: 100%;
}

.footer {
  padding: 30px 32px;
  background: var(--charcoal);
  color: #bbb;
  font-size: 13px;
}

.footer p {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ------------------------------------------------------------------ Tarjetas (borde superior rojo, sin sombra) */

.login-card,
.info-card,
.dashboard-section,
.quota-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.dashboard-section {
  border-top: 4px solid var(--red);
}

.dashboard-section {
  padding: 28px;
  margin-bottom: 24px;
  min-width: 0;
}



.login-card {
  padding: var(--space-10);
}

.login-card h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.login-card .subtitle {
  margin: var(--space-2) 0 var(--space-6);
}

.login-section h2 {
  margin-bottom: var(--space-4);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--red-text);
}

.subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #686868;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ddd;
}

.panel-header h1 {
  margin: 6px 0 8px;
  color: var(--red);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
}

.info-card {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.info-card h2 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.info-card p {
  font-size: 14px;
  color: var(--ink-2);
}

.barra-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.barra-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.datos-rafam {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.avisos:empty {
  display: none;
}

.aviso {
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warn);
  border-left-width: 6px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--warn) 12%, var(--surface));
  font-size: 14px;
}

.aviso ul {
  margin: var(--space-1) 0 0 var(--space-4);
}

.dashboard-section h2 {
  color: var(--red);
  font-size: 1.5rem;
  line-height: 1.15;
}

.seccion-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ayuda {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--muted);
  font-size: 13.4px;
}

/* Una sola columna: las tablas necesitan ancho. Solo en pantallas muy anchas se ponen lado a lado. */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1700px) {
  .dashboard-grid:not(.una-columna) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.dashboard-grid .dashboard-section {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ Formularios y controles (34 px, radio 8, foco rojo) */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-group,
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-group label,
.field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #3f3f3f;
}

.opcional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.form-group input,
.field input,
.field select,
.field textarea,
.select-tabla {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px var(--font-sans);
}

.form-group input {
  min-height: 49px;
}

.field textarea {
  min-height: 64px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.form-group input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus,
.select-tabla:focus {
  outline: 2.5px solid var(--red);
  outline-offset: 0;
  border-color: var(--red);
}

.field [aria-invalid="true"] {
  border-color: var(--neg);
}

.error-campo {
  min-height: 1.2em;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red-text);
}

.error-campo:empty {
  display: none;
}

.form-suministro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.campo-ancho,
.acciones-form {
  grid-column: 1 / -1;
}

.acciones-form {
  display: flex;
  justify-content: flex-start;
}

.btn,
.btn-login {
  min-height: var(--control-height);
  padding: 0 20px;
  border: 1px solid #cdcdcd;
  border-radius: var(--radius-control);
  background: var(--surface);
  color: #383838;
  font: 700 14px var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.btn.ghost:hover:not(:disabled) {
  border-color: #777;
  background: #f4f4f4;
}

.btn.chico {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.btn.primary,
.btn-login {
  border-color: var(--red);
  background: var(--red);
  color: var(--on-red);
}

.btn-login {
  width: 100%;
  min-height: 49px;
  margin-top: 30px;
  font-size: 14px;
}

.btn.primary:hover:not(:disabled),
.btn-login:hover:not(:disabled) {
  border-color: var(--red-hover);
  background: var(--red-hover);
}

.btn:disabled,
.btn-login:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-enlace {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red-text);
  font: 600 13px var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
}

.login-links {
  display: flex;
  justify-content: space-around;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.login-links a {
  color: var(--red-text);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.login-links a:hover {
  text-decoration: underline;
}

.message {
  margin-top: var(--space-3);
  min-height: 1.4em;
  font-size: 14px;
  font-weight: 600;
}

.message:empty {
  display: none;
}

.message.exito,
.message.error,
.message.info {
  padding: var(--space-2) var(--space-3);
  border-left: 5px solid var(--muted);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--ink);
}

.message.exito {
  border-left-color: var(--pos);
}

.message.error {
  border-left-color: var(--neg);
}

.message.info {
  border-left-color: var(--warn);
}

/* ------------------------------------------------------------------ Tablas */

.tabla-contenedor {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-table);
  background: var(--surface);
}

.tabla-contenedor.con-alto {
  max-height: 30rem;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.tabla caption {
  text-align: left;
}

.tabla th,
.tabla td {
  padding: 9px var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.tabla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f1f1;
  border-bottom: 2px solid #e0e0e0;
  color: #4a4a4a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabla tbody th {
  font-weight: 600;
}

.tabla .num {
  text-align: right;
  white-space: nowrap;
}

.tabla tfoot th,
.tabla tfoot td {
  background: var(--panel);
  font-weight: 700;
  border-bottom: 0;
}

.tabla tbody tr:hover td,
.tabla tbody tr:hover th {
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

.secundario {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.obs {
  max-width: 24ch;
  overflow-wrap: anywhere;
}

.periodo {
  white-space: nowrap;
}

.pedido-numero {
  display: block;
  color: var(--red-text);
  font-size: 15px;
  font-weight: 600;
}

.col-pedido {
  min-width: 9rem;
}

.fila-anulada td,
.fila-anulada th {
  color: var(--muted);
}

.negativo {
  color: var(--neg);
  font-weight: 700;
}

.fila-actual td,
.fila-actual th,
.fila-actual:hover td,
.fila-actual:hover th {
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
}

.fila-actual th {
  box-shadow: inset 3px 0 0 var(--red);
}

.marca-actual {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--on-red);
  font-size: 10.9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.tabla-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  margin-top: -1px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius-table) var(--radius-table);
  background: var(--panel);
  font-size: 13.4px;
  font-weight: 600;
}

.tabla-pie .secundario {
  display: inline;
}

.insignias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: 2px;
}

/* Semáforo: punto de 10 px + palabra (el color nunca va solo). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.badge::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--muted);
}

.tono-ok::before {
  background: var(--pos);
}

.tono-aviso::before {
  background: var(--warn);
}

.tono-error::before {
  background: var(--neg);
}

.tono-neutro::before {
  background: var(--muted);
}

/* ------------------------------------------------------------------ Cuotas: tarjetas de cifras clave */

.quota-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.quota-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.15s;
}

.quota-card:hover {
  border-color: var(--red);
}

.quota-label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
}

.quota-value {
  margin-top: 2px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* un importe nunca se parte en dos renglones */
}

.quota-card.available .quota-value {
  color: var(--pos);
}

.quota-card.deficit {
  border-color: var(--neg);
}

.quota-card.deficit .quota-value {
  color: var(--neg);
}

.quota-exacto {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.nota {
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: 12.5px;
}

.cargando,
.estado-vacio,
.estado-error {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.estado-vacio h3 {
  margin-bottom: var(--space-2);
  font-size: 1rem;
  color: var(--ink);
}

.estado-vacio ol {
  display: inline-block;
  margin-top: var(--space-2);
  text-align: left;
}

.estado-error {
  border: 1px solid var(--neg);
  border-radius: var(--radius-control);
  color: var(--ink);
}

/* ------------------------------------------------------------------ Diálogo de confirmación (única sombra: elementos flotantes) */

dialog:not([open]) {
  display: none;
}

.dialogo {
  margin: auto; /* el reset `* { margin: 0 }` anula el centrado propio de <dialog> */
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: var(--space-6) var(--space-6) 0;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}

.dialogo::backdrop {
  background: var(--backdrop);
}

.dialogo-panel {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  z-index: 2000;
}

.dialogo h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dialogo h2:focus {
  outline: none;
}

.subtitulo-dialogo {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.datos {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  font-size: 13.4px;
}

.datos dt {
  color: var(--muted);
  font-weight: 600;
}

.datos dd {
  overflow-wrap: anywhere;
}

.control {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 6px solid var(--muted);
  border-radius: var(--radius-control);
  background: var(--panel);
  font-size: 13.4px;
}

.control p {
  margin-top: var(--space-1);
}

.control.tono-ok {
  border-left-color: var(--pos);
}

.control.tono-aviso {
  border-left-color: var(--warn);
}

.control.tono-error {
  border-left-color: var(--neg);
}

.forzar {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--neg);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: 13.4px;
}

.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  cursor: pointer;
}

.check input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--red);
}

/* Los botones quedan a la vista aunque el contenido del diálogo sea más alto que la pantalla */
.dialogo-acciones {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin: var(--space-4) calc(var(--space-6) * -1) 0;
  padding: var(--space-3) var(--space-6);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

/* ------------------------------------------------------------------ Pantallas chicas */

@media (max-width: 1100px) {
  .main-content {
    padding: 32px 24px 48px;
  }
}

/* Pantallas de teléfono */
@media (max-width: 860px) {
  .municipal-header-inner {
    padding: 14px 16px 8px;
  }

  .logo-text {
    display: none;
  }

  .municipal-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .municipal-nav a {
    flex-shrink: 0;
    font-size: 13px;
  }

  .main-content {
    padding: 28px 16px 40px;
  }

  .footer {
    padding: 27px 16px;
  }

  .dashboard-section {
    padding: 20px 16px;
  }

  .login-card {
    padding: var(--space-6);
  }

  .form-suministro,
  .quota-info {
    grid-template-columns: minmax(0, 1fr);
  }

  .panel-header {
    flex-direction: column;
  }

  .barra-datos .btn {
    width: 100%;
  }

  .datos {
    grid-template-columns: minmax(0, 1fr);
  }

  .datos dd {
    margin-bottom: var(--space-2);
  }

  .dialogo {
    padding: var(--space-4) var(--space-4) 0;
  }

  .dialogo-acciones {
    margin: var(--space-4) calc(var(--space-4) * -1) 0;
    padding: var(--space-3) var(--space-4);
  }

  .dialogo-acciones .btn {
    flex: 1;
  }
}

/* ------------------------------------------------------------------ Circuito: análisis, ubicación, acciones y autorizaciones */

.bienvenida {
  margin-bottom: var(--space-4);
  color: var(--ink-2);
  font-size: 13.4px;
}

.barra-importar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.barra-importar .field {
  flex: 1 1 320px;
}

.barra-importar input[type="file"] {
  height: auto;
  padding: 5px var(--space-2);
}

.progreso {
  width: 100%;
  height: 10px;
  margin-bottom: var(--space-3);
  accent-color: var(--red);
}

.subtitulo-seccion {
  margin: var(--space-4) 0 var(--space-2);
  font-size: 14.5px;
  font-weight: 700;
}

.acciones-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.dialogo-chico {
  width: min(480px, calc(100vw - 32px));
}

/* Uso anual de la cuota */
.uso-anual {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel);
}

.uso-texto {
  margin-bottom: var(--space-2);
  font-size: 13.4px;
}

.uso-cifras {
  margin-top: var(--space-1);
}

.barra-prop {
  display: block;
  width: 100%;
  height: 10px;
}

.g-pista {
  fill: var(--g-linea);
}

/* Gráficos de barras (SVG) */
.graficos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.figura {
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.figura figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 13.4px;
  font-weight: 700;
}

.leyenda {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--muted);
  font-size: 11.8px;
  font-weight: 500;
}

.muestra {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: var(--space-2);
  border-radius: 2px;
}

.muestra:first-child {
  margin-left: 0;
}

.m-cuota { background: var(--g-cuota); }
.m-ejecucion { background: var(--c1); }
.m-excede { background: var(--neg); }

.grafico {
  display: block;
  width: 100%;
  height: auto;
}

.g-grilla { stroke: var(--g-linea); stroke-width: 1; }
.g-eje { stroke: var(--border); stroke-width: 1.5; }
.g-texto { fill: var(--muted); font-size: 11px; font-family: var(--font-sans); }
.g-cuota { fill: var(--g-cuota); }
.g-ejecucion { fill: var(--c1); }
.g-alto { fill: var(--warn); }
.g-excede { fill: var(--neg); }
.g-c-area { fill: var(--c2); }
.g-c-economia { fill: var(--c3); }
.g-c-subse { fill: var(--c1); }
.g-c-compras { fill: var(--c4); }
.g-c-anulado { fill: var(--muted); }

/* Dónde está cada suministro */
.ubicaciones {
  display: grid;
  gap: var(--space-2);
  list-style: none;
}

.ubicacion {
  display: grid;
  grid-template-columns: 150px minmax(80px, 1fr) 90px minmax(120px, auto);
  align-items: center;
  gap: var(--space-3);
  font-size: 13.4px;
}

.ubicacion-nombre {
  font-weight: 600;
}

.ubicacion-cantidad {
  color: var(--muted);
}

.ubicacion-monto {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Recorrido del pedido (la ubicación actual se marca con punto y con la palabra, no solo con el color) */
.recorrido {
  min-width: 230px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  list-style: none;
}

.paso {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 11.8px;
  line-height: 1.5;
  white-space: nowrap;
}

.paso-hecho {
  color: var(--ink-2);
}

.paso-hecho::before {
  content: "✓";
  color: var(--pos);
  font-weight: 700;
}

.paso-actual {
  border-color: var(--red);
  background: var(--red);
  color: var(--on-red);
  font-weight: 700;
}

/* Solicitudes de autorización */
.solicitudes-pendientes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.solicitud {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--warn);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.solicitud header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.solicitud h3 {
  font-size: 14.5px;
}

@media (max-width: 1100px) {
  .graficos {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .ubicacion {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ubicacion .barra-prop {
    grid-column: 1 / -1;
    order: 3;
  }

  .solicitudes-pendientes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ Login (dos paneles, como el sistema de Gestión Documental) */

.login-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 100vh;
  background: #fff;
}

.login-brand-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 48px 64px 35px;
  border-bottom: 8px solid var(--red);
  background:
    linear-gradient(180deg, rgba(16, 20, 23, 0.55) 0%, rgba(16, 20, 23, 0.15) 30%, rgba(16, 20, 23, 0.92) 100%),
    #1c1c1c url("img/portada-login.webp") 50% 20% / cover no-repeat;
  color: #fff;
}

.login-brand-panel .logo-img {
  align-self: flex-start;
}

.login-brand-panel .logo-img {
  width: 90px;
  height: 90px;
}

.login-brand-panel h1 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2.6rem, 4.7vw, 4.4rem);
  line-height: 1.07;
}

.login-brand-panel p {
  max-width: 560px;
  color: #eee;
  font-size: 19px;
  line-height: 1.65;
}

.login-brand-panel .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

.login-pie {
  color: #ccc;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 65px;
}

.login-form-wrap {
  width: 100%;
  max-width: 385px;
}

.login-form-wrap h2 {
  margin: 17px 0 21px;
  color: var(--red);
  font-size: 3rem;
  line-height: 1.06;
}

.login-intro {
  margin-bottom: 35px;
  color: #666;
  font-size: 15px;
  line-height: 1.7;
}

.login-form-wrap .form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.login-nota {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eee;
  color: #777;
  font-size: 12px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .login-brand-panel,
  .login-form-panel {
    padding: 35px;
  }

  .login-form-wrap h2 {
    font-size: 2.4rem;
  }
}

@media (max-width: 640px) {
  .login-layout {
    grid-template-columns: 1fr;
  }

  .login-brand-panel {
    min-height: 200px;
    background-position: 50% 15%;
    padding: 25px 24px;
    border-bottom-width: 5px;
  }

  .login-brand-texto,
  .login-pie {
    display: none;
  }

  .login-form-panel {
    padding: 34px 20px 44px;
  }
}