/* =====================================================================
   global.css  -  Sistema de Gestion Taller Automotriz
   Estilo: panel de control industrial. Sobrio, denso, legible.
   Tipografia: IBM Plex Sans (texto) + IBM Plex Mono (datos tecnicos).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500;700&display=swap');

:root {
  /* Base - blanco y negro */
  --color-bg: #FFFFFF;
  --color-bg-secundario: #FAFAFA;
  --color-texto: #1A1A1A;
  --color-texto-secundario: #4A4A4A;

  /* Grises estructurales */
  --color-gris-100: #F4F4F4;
  --color-gris-200: #E5E5E5;
  --color-gris-300: #D1D1D1;
  --color-gris-400: #A0A0A0;
  --color-gris-500: #6B6B6B;
  --color-gris-600: #424242;
  --color-borde: #E0E0E0;

  /* Amarillo para acentos */
  --color-amarillo: #F5C518;
  --color-amarillo-oscuro: #D9AC0A;
  --color-amarillo-claro: #FFF4C2;

  /* Estados */
  --color-exito: #2D7A3E;
  --color-exito-bg: #E8F3EA;
  --color-error: #B33A3A;
  --color-error-bg: #FBEAEA;
  --color-info: #2A5C8A;
  --color-info-bg: #E8F0F7;
  --color-advertencia: #B87900;
  --color-advertencia-bg: #FFF4DB;

  /* Tipografia */
  --fuente-texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fuente-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* Layout */
  --ancho-sidebar: 240px;
  --alto-navbar: 56px;

  /* Sidebar oscuro (industrial) */
  --color-sidebar-bg:           #1A1A1A;
  --color-sidebar-borde:        #2A2A2A;
  --color-sidebar-texto:        #BFBFBF;
  --color-sidebar-texto-fuerte: #FFFFFF;
  --color-sidebar-seccion:      #6B6B6B;
  --color-sidebar-hover-bg:     rgba(255, 255, 255, 0.06);
  --color-sidebar-activo-bg:    rgba(245, 197, 24, 0.10);

  /* Navbar levemente diferenciada del contenido */
  --color-navbar-bg: #FAFAFA;
}

/* ---- Reset minimo ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fuente-texto);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Datos tecnicos: placas, cedulas, numeros, codigos de OS */
.mono, .dato-tecnico {
  font-family: var(--fuente-mono);
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0 0 0.75em; }

a { color: var(--color-info); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Layout principal: sidebar + navbar + contenido
   --------------------------------------------------------------------- */
.app-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--ancho-sidebar);
  flex-shrink: 0;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-texto);
  border-right: 1px solid var(--color-sidebar-borde);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 30;
  transition: transform 150ms ease;
}

.sidebar__marca {
  height: var(--alto-navbar);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--color-sidebar-borde);
  font-weight: 700;
  font-size: 14px;
  color: var(--color-sidebar-texto-fuerte);
  background: #141414;
}
/* Icono de marca: acento amarillo */
.sidebar__marca > svg { color: var(--color-amarillo); }

.sidebar__nav { padding: 10px 0; overflow-y: auto; flex: 1; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--color-sidebar-texto);
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background-color 120ms ease, color 120ms ease;
}
.sidebar__link:hover {
  background: var(--color-sidebar-hover-bg);
  text-decoration: none;
  color: var(--color-sidebar-texto-fuerte);
}
.sidebar__link.activo {
  color: var(--color-sidebar-texto-fuerte);
  font-weight: 500;
  border-left-color: var(--color-amarillo);
  background: var(--color-sidebar-activo-bg);
}
.sidebar__link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.sidebar__link.activo svg { opacity: 1; color: var(--color-amarillo); }

.sidebar__seccion {
  padding: 14px 16px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sidebar-seccion);
}

/* Grupos colapsables del sidebar (categorias desplegables) */
.sidebar__grupo { border-bottom: 1px solid var(--color-sidebar-hover-bg); }
.sidebar__grupo-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sidebar-seccion);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.sidebar__grupo-cab::-webkit-details-marker { display: none; }
/* Chevron a la derecha que rota al abrir */
.sidebar__grupo-cab::after {
  content: '';
  margin-left: auto;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms ease;
  opacity: .7;
}
.sidebar__grupo[open] > .sidebar__grupo-cab::after { transform: rotate(45deg); }
.sidebar__grupo-cab:hover { color: var(--color-sidebar-texto-fuerte); }

/* Contenido principal desplazado por el sidebar */
.contenido-wrap {
  flex: 1;
  margin-left: var(--ancho-sidebar);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.navbar {
  height: var(--alto-navbar);
  background: var(--color-navbar-bg);
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Franja de acento amarillo sutil bajo el inicio de la navbar */
.navbar::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--color-amarillo);
  pointer-events: none;
}
.navbar__izq { display: flex; align-items: center; gap: 12px; }
.navbar__der { display: flex; align-items: center; gap: 12px; }

.btn-menu {
  display: none;
  background: none;
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  color: var(--color-texto);
}

.usuario-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.usuario-chip__nombre { font-weight: 500; font-size: 13px; }
.usuario-chip__rol { font-size: 11px; color: var(--color-gris-500); }

.campana {
  position: relative;
  display: inline-flex;
  padding: 6px;
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  color: var(--color-texto);
  cursor: pointer;
}
.campana__badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--color-amarillo);
  color: var(--color-texto);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Wrapper para anclar el panel */
.campana-wrap { position: relative; display: inline-flex; }
.campana { background: var(--color-bg); }

/* Panel desplegable de notificaciones */
.campana__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--color-bg);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 100;
  overflow: hidden;
}
.campana__panel[hidden] { display: none; }
.campana__panel-cab {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-bg-secundario);
  font-size: 14px;
}
.campana__cerrar {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--color-gris-500);
  padding: 0 4px;
}
.campana__cerrar:hover { color: var(--color-texto); }
.campana__panel-cuerpo {
  max-height: 60vh;
  overflow-y: auto;
}
.campana-lista { list-style: none; margin: 0; padding: 0; }
.campana-item { border-bottom: 1px solid var(--color-borde); }
.campana-item:last-child { border-bottom: none; }
.campana-item a {
  display: flex; gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
}
.campana-item a:hover { background: var(--color-bg-secundario); }
.campana-item__dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
}
.campana-item__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campana-item__txt strong { font-size: 13px; font-weight: 600; }
.campana-item__msg {
  font-size: 13px; color: var(--color-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.campana-item__det { font-size: 11px; color: var(--color-gris-500); }
.campana-item--error a { border-left: 3px solid var(--color-error); padding-left: 11px; }
.campana-item--advertencia a { border-left: 3px solid var(--color-amarillo); padding-left: 11px; }
.campana-item--info a { border-left: 3px solid var(--color-info); padding-left: 11px; }

.contenido { padding: 20px; flex: 1; }

/* ---------------------------------------------------------------------
   Cards / contenedores
   --------------------------------------------------------------------- */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  padding: 16px;
}
.card + .card { margin-top: 16px; }
.card__titulo { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

/* ---------------------------------------------------------------------
   Botones (rectangulares, radius max 4px, sin sombras grandes)
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
  min-height: 40px;
}
.btn svg { width: 16px; height: 16px; }

/* Primario: negro con texto blanco */
.btn--primario { background: var(--color-texto); color: #fff; }
.btn--primario:hover { background: #000; text-decoration: none; }

/* Secundario: blanco con borde gris */
.btn--secundario { background: var(--color-bg); color: var(--color-texto); border-color: var(--color-borde); }
.btn--secundario:hover { background: var(--color-gris-100); text-decoration: none; }

/* Amarillo: SOLO accion principal del momento */
.btn--amarillo { background: var(--color-amarillo); color: var(--color-texto); font-weight: 700; }
.btn--amarillo:hover { background: var(--color-amarillo-oscuro); text-decoration: none; }

/* Peligro */
.btn--peligro { background: var(--color-bg); color: var(--color-error); border-color: var(--color-error); }
.btn--peligro:hover { background: var(--color-error-bg); text-decoration: none; }

.btn--bloque { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Tap target grande para mecanicos en tablet */
.btn--accion { min-width: 44px; min-height: 44px; }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--color-texto);
}
.input, .select, .textarea {
  width: 100%;
  font-family: var(--fuente-texto);
  font-size: 14px;
  color: var(--color-texto);
  background: var(--color-bg);
  border: 1px solid var(--color-gris-300);
  border-radius: 2px;
  padding: 9px 10px;
  transition: border-color 150ms ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-texto);
}
.input--mono { font-family: var(--fuente-mono); }
.textarea { resize: vertical; min-height: 80px; }
.campo__ayuda { font-size: 12px; color: var(--color-gris-500); margin-top: 4px; }

/* ---------------------------------------------------------------------
   Tablas densas, lineas finas
   --------------------------------------------------------------------- */
.tabla-wrap { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: 6px; }
table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tabla thead th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-gris-600);
  background: var(--color-gris-100);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}
.tabla tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-gris-200);
  vertical-align: middle;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--color-gris-100); }

/* ---------------------------------------------------------------------
   Badges de estado
   --------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1.4;
}
.badge--exito { color: var(--color-exito); background: var(--color-exito-bg); }
.badge--error { color: var(--color-error); background: var(--color-error-bg); }
.badge--info { color: var(--color-info); background: var(--color-info-bg); }
.badge--advertencia { color: var(--color-advertencia); background: var(--color-advertencia-bg); }
.badge--neutro { color: var(--color-gris-600); background: var(--color-gris-200); }

/* ---------------------------------------------------------------------
   Alertas en linea
   --------------------------------------------------------------------- */
.alerta {
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.alerta--exito { color: var(--color-exito); background: var(--color-exito-bg); border-color: #Bfe0C5; }
.alerta--error { color: var(--color-error); background: var(--color-error-bg); border-color: #EBC4C4; }
.alerta--info { color: var(--color-info); background: var(--color-info-bg); border-color: #C7D8E8; }
.alerta--advertencia { color: var(--color-advertencia); background: var(--color-advertencia-bg); border-color: #EBD9A8; }

/* ---------------------------------------------------------------------
   Toasts (esquina superior derecha)
   --------------------------------------------------------------------- */
.toast-zona {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 340px;
}
.toast {
  background: var(--color-bg);
  border: 1px solid var(--color-borde);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13px;
}
.toast--exito { border-left-color: var(--color-exito); }
.toast--error { border-left-color: var(--color-error); }
.toast--info { border-left-color: var(--color-info); }
.toast--advertencia { border-left-color: var(--color-amarillo); }

/* ---------------------------------------------------------------------
   Utilidades
   --------------------------------------------------------------------- */
.titulo-pagina { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.titulo-pagina h1 { margin: 0; }
.subtexto { color: var(--color-gris-500); font-size: 13px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-mono { font-family: var(--fuente-mono); }
.placeholder-modulo {
  border: 1px dashed var(--color-gris-300);
  border-radius: 6px;
  padding: 32px;
  text-align: center;
  color: var(--color-gris-500);
  background: var(--color-bg-secundario);
}

/* ---------------------------------------------------------------------
   Primitivas compartidas (filtros, metricas, grids, botones)
   Antes vivian en citas.css / clientes.css / escritorio.css; promovidas
   aqui para que esten disponibles en CUALQUIER pagina sin tener que
   cargar el CSS de otro modulo.
   --------------------------------------------------------------------- */
/* Filtros en linea */
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filtros .select, .filtros .input { margin: 0; width: auto; min-width: 140px; }

/* Contador de pendientes en el menu lateral (ej: aprobaciones catalogo) */
.sidebar__badge {
  margin-left: auto;
  background: #F5C518;
  color: #1A1A1A;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9px;
  padding: 1px 7px;
  line-height: 16px;
}

/* Combobox buscable (combobox.js): input + lista desplegable filtrable.
   Modo estricto (select oculto) y modo libre (input con sugerencias). */
.cbx { position: relative; }
.campo .cbx { width: 100%; }
.filtros .cbx { width: auto; min-width: 140px; flex: 0 1 auto; }
.cbx__select { display: none !important; }
.cbx__input { width: 100%; padding-right: 30px; }
.cbx--off .cbx__input { background: var(--color-gris-100); color: var(--color-gris-500); }
.cbx__flecha {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--color-gris-500);
  border-bottom: 2px solid var(--color-gris-500);
  transform: rotate(45deg);
  pointer-events: none;
}
.cbx__lista {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-gris-400);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  z-index: 60;
}
.cbx__item {
  padding: 10px 12px;
  min-height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-gris-200);
}
.cbx__item:last-child { border-bottom: none; }
.cbx__item:hover, .cbx__item--activo { background: #FFF8D6; }
.cbx__vacio, .cbx__mas {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-gris-500);
}

/* Metricas (cards de KPI) */
.metricas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.metrica {
  background: var(--color-bg);
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metrica__num { font-family: var(--fuente-mono); font-size: 26px; font-weight: 700; line-height: 1; }
.metrica__lbl { font-size: 12px; color: var(--color-gris-500); text-transform: uppercase; letter-spacing: 0.03em; }

/* Rejilla de formulario a 2 columnas */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }

/* Rejilla de detalle (contenido principal + lateral) */
.detalle-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 16px; align-items: stretch; }
/* En grid las cards ya se estiran a igual altura; anula el margin-top
   que la regla global ".card + .card" le pondria a la 2da columna. */

/* =====================================================================
   FEEDBACK DE PROGRESO  -  guia visual "que me toca hacer ahora"
   Toolkit reutilizable en cualquier flujo (diagnostico, recepcion,
   cotizacion, etc). Se controla agregando/quitando clases por JS.
     .cta-latido   -> el boton de la accion SIGUIENTE palpita
     .paso-ok      -> tarjeta/acordeon de un paso YA hecho (verde)
     .paso-activo  -> tarjeta del paso en el que el usuario esta ahora
     .flujo-chip   -> etiqueta de estado (Pendiente / Hecho)
   ===================================================================== */

/* --- Boton que palpita para señalar la accion siguiente --- */
@keyframes latido-cta {
  0%   { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(245, 197, 24, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
.cta-latido { animation: latido-cta 1.7s ease-out infinite; }
/* Cuando el CTA es un boton oscuro/primario, el halo amarillo resalta bien.
   Para botones claros tambien se ve porque es un anillo externo. */
@media (prefers-reduced-motion: reduce) {
  .cta-latido { animation: none; outline: 2px solid var(--color-amarillo); outline-offset: 2px; }
}

/* --- Paso ya completado: tinte verde + check --- */
.paso-ok {
  background: var(--color-exito-bg) !important;
  border-color: #BFE0C5 !important;
  border-left: 3px solid var(--color-exito) !important;
  transition: background .25s ease, border-color .25s ease;
}
/* Check verde al inicio del summary de un acordeon hecho */
.paso-ok > summary::before {
  content: '\2713';            /* ✓ */
  display: inline-block;
  color: var(--color-exito);
  font-weight: 700;
  margin-right: 6px;
}
/* Variante para un <div>/card (no acordeon): muestra el check via .paso-ok__check */
.paso-ok__check { color: var(--color-exito); font-weight: 700; }

/* --- Paso activo: ligero realce amarillo en la tarjeta actual --- */
.paso-activo {
  border-left: 3px solid var(--color-amarillo) !important;
  box-shadow: 0 0 0 1px var(--color-amarillo-claro) inset;
}

/* --- Chips de estado para titulos de seccion --- */
.flujo-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
}
.flujo-chip--ok   { color: var(--color-exito); background: var(--color-exito-bg); }
.flujo-chip--pend { color: var(--color-gris-500); background: var(--color-gris-100); }
.flujo-chip--pend::before { content: '\25CB'; }   /* ○ */
.flujo-chip--ok::before   { content: '\2713'; }   /* ✓ */

/* --- Barra de progreso de pasos (opcional, arriba de un flujo) --- */
.flujo-pasos {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px; padding: 10px 12px;
  background: var(--color-bg-secundario);
  border: 1px solid var(--color-borde); border-radius: 6px;
}
.flujo-paso {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--color-gris-500);
}
.flujo-paso__num {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fuente-mono); font-size: 11px; font-weight: 700;
  background: var(--color-gris-200); color: var(--color-gris-600);
}
.flujo-paso--ok    { color: var(--color-exito); font-weight: 600; }
.flujo-paso--ok    .flujo-paso__num { background: var(--color-exito); color: #fff; }
.flujo-paso--activo { color: var(--color-texto); font-weight: 600; }
.flujo-paso--activo .flujo-paso__num { background: var(--color-amarillo); color: #1A1A1A; }

/* --- Barra de avance (progreso de tareas/checklist) --- */
.barra-avance {
  height: 8px; border-radius: 999px;
  background: var(--color-gris-200);
  overflow: hidden; margin: 6px 0 4px;
}
.barra-avance__relleno {
  height: 100%; border-radius: 999px;
  background: var(--color-exito);
  transition: width .3s ease;
}
.barra-avance__relleno--parcial { background: var(--color-amarillo); }
.detalle-grid > .card + .card { margin-top: 0; }

/* Paginacion */
.paginacion { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

/* Boton pequeno para acciones de tabla */
.btn-sm { min-height: 32px; padding: 6px 10px; font-size: 13px; }

/* Boton tipo enlace (acciones inline en tarjetas/tablas) */
.btn-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--color-info);
  cursor: pointer;
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .detalle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .metricas { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
}

/* Overlay para sidebar movil */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 25;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.abierto { transform: translateX(0); }
  .contenido-wrap { margin-left: 0; }
  .btn-menu { display: inline-flex; }
  .sidebar-overlay.visible { display: block; }
}

@media (max-width: 768px) {
  .contenido { padding: 14px; }
  .usuario-chip__rol { display: none; }
}

@media (max-width: 480px) {
  body { font-size: 13px; }
  .usuario-chip__nombre { display: none; }
}