/* =========================================================================
   DeCA · Tema alternativo «Indos verde y negro»
   Colores de marca: #9BB11F (verde) y #000000 (negro).

   Se carga DESPUÉS de app.css y solo redefine colores y algunos detalles.
   Activación: APP_THEME=indos en el .env (sin valor = tema original).

   Reglas de accesibilidad (WCAG AA) aplicadas:
     · #9BB11F sobre blanco = 2,4:1 → NO se usa para texto sobre fondo claro.
     · #9BB11F sobre negro  = 8,7:1 → sí, texto/iconos verdes sobre negro.
     · Negro sobre #9BB11F  = 8,7:1 → botones verdes con texto negro.
     · Texto verde sobre blanco: variante oscura #5F6D12 (5,7:1).
   ========================================================================= */
:root {
  --brand-green:        #9bb11f;
  --brand-green-hover:  #b0c63a;
  --brand-green-dark:   #5f6d12;   /* verde para texto sobre blanco */
  --brand-green-soft:   #f1f5dc;
  --brand-green-line:   #d6e09a;
  --brand-black:        #000000;
  --brand-ink:          #111111;

  /* Tokens que usa app.css */
  --brand-primary:      #000000;
  --brand-primary-dark: #000000;
  --brand-accent:       #9bb11f;
  --brand-accent-soft:  #eef3d2;
  --focus:              #9bb11f;

  --text:        #141414;
  --text-muted:  #5c5f55;
  --bg:          #f5f6f1;
  --surface:     #ffffff;
  --border:      #dcdfd2;

  --info-bg:     #eef0e8;  --info-fg: #2a2d24;
  --success-bg:  #eef5d6;  --success-fg: #4d5a0c;

  --shadow: 0 10px 30px rgba(0, 0, 0, .10);
}

::selection { background: var(--brand-green); color: #000; }

/* ---------- Tipografía y enlaces -------------------------------------- */
h1, .app h1, .card__title, .panel h2, .empty h1 { color: var(--brand-black); }
.page-head h1 { letter-spacing: -.01em; }
.page-head h1::after {
  content: ""; display: block; width: 44px; height: 4px; margin-top: .45rem;
  background: var(--brand-green); border-radius: 2px;
}
.empty h1::after { margin-inline: auto; }
.table a:not(.btn), .btn--link, .timeline__head a, .diff summary,
.field__toggle, .th-sort:hover, .th-sort.is-active { color: var(--brand-green-dark); }

/* ---------- Botones ----------------------------------------------------- */
.btn--primary { background: var(--brand-black); color: #fff; border-color: var(--brand-black); }
.btn--primary:hover { background: #262626; }
.btn--primary:focus-visible { outline: 3px solid var(--brand-green); outline-offset: 2px; }
/* Acción principal de cada pantalla (cabecera y envío de formularios): verde con texto negro */
.page-head .btn--primary,
.form__actions .btn--primary,
.card .btn--primary {
  background: var(--brand-green); color: #000; border-color: var(--brand-green);
}
.page-head .btn--primary:hover,
.form__actions .btn--primary:hover,
.card .btn--primary:hover { background: var(--brand-green-hover); }
.btn.is-loading::after { border-color: rgba(0,0,0,.35); border-top-color: #000; }
.btn--small { background: #eef0e8; color: var(--brand-ink); }
.btn--small:hover { background: #e2e6d6; }
.btn--small.btn--primary { background: var(--brand-black); color: #fff; }

/* ---------- Pantalla de acceso ---------------------------------------- */
.auth__brand { background: #000; }
.auth__brand-title strong { color: var(--brand-green); }
.auth__brand-shape { border-color: rgba(155, 177, 31, .28); }
.auth__brand::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brand-green);
}
.card { border-top-color: var(--brand-green); }

/* ---------- Menú lateral -------------------------------------------- */
.sidebar { background: #000; border-right: 1px solid #1c1c1c; }
.sidebar__brand { border-bottom-color: #222; }
.sidebar__app { color: var(--brand-green); }
.sidenav__link { color: rgba(255, 255, 255, .78); }
.sidenav__link:hover { background: #151515; color: #fff; }
.sidenav__link.is-active {
  background: var(--brand-green); color: #000;
  box-shadow: none;
}
.sidenav__link.is-active .icon { color: #000; }
.sidenav__link:focus-visible { outline-color: var(--brand-green); }
.sidebar__user { border-top-color: #222; }
.avatar { background: var(--brand-green); color: #000; }
.mobilebar { background: #000; border-bottom: 3px solid var(--brand-green); }
.mobilebar__toggle { background: #1a1a1a; }

/* ---------- Superficies --------------------------------------------- */
.panel, .tile, .table-wrap, .stat { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.04); }
.panel--highlight { border-left-color: var(--brand-green); }
.tile { border-left-color: var(--brand-green); }
.stat strong { color: var(--brand-black); }
.stat { border-top: 3px solid var(--brand-green); }
.table th { background: #f3f4ee; color: #4a4d44; }
.table tbody tr:hover { background: #fafbf6; }

/* ---------- Formularios ---------------------------------------------- */
.field input:focus, .filters input:focus, .filters select:focus,
.form select:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(155, 177, 31, .25); outline: none;
}
.check input, .choice__item input { accent-color: #000; }
.choice__item:has(input:checked) { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(155, 177, 31, .25); }
.merc legend { color: var(--brand-black); }
.merc__adr { background: #fff7df; }
.inline-edit input[type="text"] { border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(155, 177, 31, .25); }

/* ---------- Estados y etiquetas -------------------------------------- */
.badge--superadmin    { background: #000; color: var(--brand-green); }
.badge--admin         { background: var(--brand-green); color: #000; }
.badge--transportista { background: var(--brand-green-soft); color: var(--brand-green-dark); }
.badge--conductor { background: var(--brand-accent-soft); color: #136b74; }
.badge--emitido       { background: #ececec; color: #222; }
.badge--ruta          { background: var(--brand-green); color: #000; }
.badge--ok            { background: var(--brand-green-soft); color: #4d5a0c; }

/* ---------- Historial de versiones ----------------------------------- */
.timeline__item.is-current::before { background: var(--brand-green); border-color: #000; }
.timeline__motivo { background: #f5f6f1; border-left: 3px solid var(--brand-green); }
.diff__table ins { background: var(--brand-green-soft); color: #3f4a0a; }

/* ---------- Alertas -------------------------------------------------- */
.alert--success { border-left: 4px solid var(--brand-green); }
.alert--info    { border-left: 4px solid #000; }
.secret { border-color: #000; }

/* ---------- Paginación --------------------------------------------- */
.pager .btn--small:hover { background: var(--brand-green); color: #000; }

/* Cabeceras ordenables: neutras; solo la columna activa en verde */
.table th a.th-sort { color: #4a4d44; }
.table th a.th-sort:hover, .table th a.th-sort.is-active { color: var(--brand-green-dark); }

/* DeCA: borrador y consulta QR */
.consig legend, .qr__prev a { color: #000; }
.qr__code { color: #000; }
.qr__banner--ok { background: var(--brand-green-soft); color: #3f4a0a; border-left-color: var(--brand-green); }

/* ---------- Ventana de búsqueda -------------------------------------- */
.dlg__q:focus { border-color: var(--brand-green); box-shadow: 0 0 0 4px rgba(155, 177, 31, .25); }
.dlg__item:hover, .dlg__item:focus-visible { background: var(--brand-green-soft); box-shadow: inset 0 0 0 2px var(--brand-green); }
.dlg__ini { background: var(--brand-black); color: var(--brand-green); }
.dlg.is-loading .dlg__search::after { border-top-color: var(--brand-green); }
.estado-tab.is-active { border-color: var(--brand-green); background: var(--brand-green-soft); }
.estado-tab strong { color: var(--brand-black); }