/*
 * ═══════════════════════════════════════════════════════════
 *  EAT — Sistema de Diseño de Marca · Panel Interno
 *  Manual de Marca 2024 · Rebranding
 *
 *  Paleta Principal:
 *    Negro Agrisado  #1D1D1B  (fondos)          [--eat-black]
 *    Blanco          #FFFFFF  (texto)
 *    Gris Cálido     #DBDBD7  (texto secundario) [--eat-gray]
 *
 *  Paleta Secundaria:
 *    Verde Natural   #6C775C  (acento principal) [--eat-green]
 *    Lavanda         #7B7B84  (acento secundario)[--eat-lavender]
 *
 *  Agregar antes de </head> en cada HTML:
 *  <link rel="stylesheet" href="/css/eat-brand.css">
 * ═══════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════
   1. PALETA RAÍZ EAT — mapea TODOS los nombres de variables
      usados en el proyecto (costos, logística, propuesta,
      usuarios-admin, index, login, etc.)
   ══════════════════════════════════════════════════════════ */
:root {

  /* ── Tokens nativos del Manual de Marca ─────────────────── */
  --eat-black:    #1D1D1B;
  --eat-white:    #FFFFFF;
  --eat-gray:     #DBDBD7;
  --eat-green:    #6C775C;
  --eat-lavender: #7B7B84;

  /* ── Escala de paneles (progresivamente más claros) ─────── */
  --eat-panel:    #252522;
  --eat-panel-2:  #2e2e2a;
  --eat-panel-3:  #363633;
  --eat-muted:    #9e9e99;
  --eat-line:     rgba(219,219,215,.13);
  --eat-shadow:   0 12px 36px rgba(0,0,0,.55);

  /* ── Estado / semáforo ──────────────────────────────────── */
  --eat-ok:      #6C9E7A;
  --eat-warn:    #9E8C5C;
  --eat-danger:  #9E6060;
  --eat-info:    #7B7B84;

  /* ══════════════════════════════════════════════════════════
     MAPA UNIVERSAL — cubre cada nombre de variable del proyecto
     ══════════════════════════════════════════════════════ */

  /* — Fondos — */
  --bg:           #1D1D1B;
  --bg-alt:       #252522;
  --bg-soft:      #252522;
  --bg-elev:      #2e2e2a;
  --bg2:          #252522;
  --bg-primary:   rgba(108,119,92,.14);
  --bg-1:         #1D1D1B;
  --bg-2:         #252522;

  /* — Paneles / superficies — */
  --panel:        #252522;
  --panel-2:      #2e2e2a;
  --panel2:       #2e2e2a;
  --panel-3:      #363633;
  --surface:      #252522;
  --surface-2:    #2e2e2a;
  --surface2:     #2e2e2a;
  --card:         #252522;
  --raised:       #363633;

  /* — Texto — */
  --text:         #FFFFFF;
  --text-2:       #DBDBD7;
  --text-3:       #9e9e99;
  --text-muted:   #9e9e99;
  --text-dim:     #6e6e6a;
  --sub:          #DBDBD7;
  --muted:        #9e9e99;
  --faint:        rgba(219,219,215,.18);

  /* — Bordes / líneas — */
  --line:           rgba(219,219,215,.13);
  --line-2:         rgba(219,219,215,.07);
  --line-str:       rgba(219,219,215,.22);
  --border:         rgba(219,219,215,.13);
  --border-light:   rgba(219,219,215,.07);
  --border-strong:  rgba(219,219,215,.22);
  --border-2:       rgba(219,219,215,.07);

  /* — Sombras — */
  --shadow:     0 10px 32px rgba(0,0,0,.50);
  --shadow-sm:  0 1px 4px  rgba(0,0,0,.30);
  --shadow-md:  0 4px 14px rgba(0,0,0,.42);
  --shadow-lg:  0 12px 36px rgba(0,0,0,.55);

  /* — Acento primario → Verde Natural EAT — */
  --primary:        #6C775C;
  --primary-2:      #5a6349;
  --primary2:       #5a6349;
  --primary-hover:  #5a6349;
  --primary-dk:     #5a6349;
  --primary-soft:   rgba(108,119,92,.16);
  --primary-bg:     rgba(108,119,92,.14);
  --primary-bd:     rgba(108,119,92,.32);

  /* — Gold → Verde Natural (propuesta.css) — */
  --gold:       #6C775C;
  --gold-light: #8a9a78;
  --gold-dim:   #4a5239;

  /* — Estado / semáforo — */
  --ok:          #6C9E7A;
  --ok-bg:       rgba(108,158,122,.14);
  --ok-bd:       rgba(108,158,122,.30);
  --success:     #6C9E7A;
  --success-bg:  rgba(108,158,122,.14);
  --success-fg:  #8aca9e;

  --warn:        #9E8C5C;
  --warn-bg:     rgba(158,140,92,.14);
  --warn-bd:     rgba(158,140,92,.30);
  --warning:     #9E8C5C;

  --danger:      #9E6060;
  --danger-bg:   rgba(158,96,96,.14);
  --danger-bd:   rgba(158,96,96,.30);
  --red:         #9E6060;
  --red-bg:      rgba(158,96,96,.15);

  --error-bg:     rgba(158,96,96,.15);
  --error-fg:     #c49a9a;
  --error-border: rgba(158,96,96,.32);

  --info:    #7B7B84;
  --ast:     #8a9a78;
  --ast-bg:  rgba(138,154,120,.14);
  --hurl:    #9E9E80;

  /* — Colores legacy (index.html) — */
  --blue:    #6C775C;
  --cyan:    #7B8070;
  --pink:    #9a8a7a;
  --green:   #6C775C;
  --amber:   #9E8C5C;
  --orange:  #8a7a5c;
  --purple:  #7B7B84;

  /* — Radios — */
  --radius:    14px;
  --radius-lg: 18px;
  --radius-sm: 8px;

  /* — Tipografía — */
  --font:         Inter, "Segoe UI", Arial, sans-serif;
  --font-display: Inter, "Segoe UI", Arial, sans-serif;
  --font-body:    Inter, "Segoe UI", Arial, sans-serif;
  --mono:         ui-monospace, "Cascadia Code", Consolas, monospace;
  --fb:           Inter, "Segoe UI", Arial, sans-serif;
  --sans:         Inter, "Segoe UI", Arial, sans-serif;
}


/* ═══════════════════════════════════════════════════════════
   2. BASE
   ══════════════════════════════════════════════════════════ */
html {
  color-scheme: dark;
}

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar elegante */
::-webkit-scrollbar        { width:6px; height:6px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: rgba(219,219,215,.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(219,219,215,.40); }


/* ═══════════════════════════════════════════════════════════
   3. TIPOGRAFÍA EAT
   ══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: .015em;
  color: var(--text);
}

/* Eyebrow / etiqueta de sección → acento verde */
.eyebrow,
.ua-brand__eyebrow,
.ua-topbar__eyebrow,
[class*="eyebrow"] {
  color: var(--eat-green) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════
   4. FORMULARIOS — tema oscuro
   ══════════════════════════════════════════════════════════ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.input,
.input--search,
.input-search,
.select {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  border-radius: 10px;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus {
  outline: none !important;
  border-color: var(--eat-green) !important;
  box-shadow: 0 0 0 3px rgba(108,119,92,.22) !important;
}

select option {
  background: var(--panel);
  color: var(--text);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--eat-green);
}

/* Login — checkbox row */
.checkbox-row input[type="checkbox"] {
  accent-color: var(--eat-green);
}


/* ═══════════════════════════════════════════════════════════
   5. BOTONES
   ══════════════════════════════════════════════════════════ */

/* Primario → Verde Natural */
.btn-submit,
.btn--primary,
.btn-gold,
.btn-primary {
  background: var(--eat-green) !important;
  color: #fff !important;
  border: none !important;
}

.btn-submit:hover:not(:disabled),
.btn--primary:hover,
.btn-gold:hover:not(:disabled),
.btn-primary:hover {
  filter: brightness(1.15) !important;
  background: var(--eat-green) !important;
}

/* Secundario */
.btn-secondary {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* Fantasma / ghost */
.btn-ghost {
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

.btn-ghost:hover {
  background: var(--panel-3) !important;
  border-color: var(--eat-green) !important;
}

/* Peligro */
.btn-danger {
  background: var(--eat-danger) !important;
  color: #fff !important;
  border: none !important;
}

/* Botón de navegación del index */
.btn {
  border: none;
}


/* ═══════════════════════════════════════════════════════════
   6. TOPBAR / HEADER
   ══════════════════════════════════════════════════════════ */
.topbar {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Punto de marca (login / costos) */
.topbar__brand .dot,
.brand__dot {
  background: var(--eat-green) !important;
  box-shadow: 0 0 18px rgba(108,119,92,.55) !important;
}

/* Label de topbar */
.topbar label,
.topbar .topbar__group label {
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   7. SIDEBAR — usuarios-admin
   ══════════════════════════════════════════════════════════ */
.ua-sidebar {
  background: rgba(29,29,27,.96) !important;
  border-right-color: var(--border) !important;
  color: var(--text) !important;
}

.ua-main {
  background: var(--bg) !important;
}

.ua-nav__item {
  background: rgba(219,219,215,.06) !important;
  color: var(--text) !important;
}

.ua-nav__item:hover,
.ua-nav__item.active {
  background: var(--eat-green) !important;
  color: #fff !important;
}

.ua-sidecard {
  background: rgba(37,37,34,.85) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.ua-sidecard__label {
  color: var(--muted) !important;
}

.ua-mini-stats strong {
  color: var(--eat-green);
}

.ua-brand__icon {
  background: rgba(108,119,92,.20) !important;
}


/* ═══════════════════════════════════════════════════════════
   8. CARDS
   ══════════════════════════════════════════════════════════ */
.card {
  background: var(--panel) !important;
  border-color: var(--border) !important;
}

.cardLink:hover .card,
.cardLink:focus-visible .card {
  border-color: var(--eat-green) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.65), 0 0 0 1px rgba(108,119,92,.30) !important;
}

.card__head h3 {
  color: var(--text);
}


/* ═══════════════════════════════════════════════════════════
   9. TABLAS
   ══════════════════════════════════════════════════════════ */
.table,
.table-wrap .table {
  background: transparent !important;
}

.table th,
.table thead th {
  background: var(--panel-2) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--border) !important;
}

.table td,
.table tbody td {
  border-bottom-color: var(--border) !important;
  color: var(--text);
}

.table tbody tr:hover,
.table tbody tr:hover td {
  background: rgba(219,219,215,.04) !important;
}

.table-wrap {
  border-color: var(--border) !important;
}


/* ═══════════════════════════════════════════════════════════
   10. BADGES
   ══════════════════════════════════════════════════════════ */
.badge.ok   { background: rgba(108,158,122,.18) !important; color: #8aca9e  !important; }
.badge.off  { background: rgba(158,96,96,.18)   !important; color: #c49a9a  !important; }
.badge.warn { background: rgba(158,140,92,.18)  !important; color: #c4b090  !important; }
.badge.info { background: rgba(123,123,132,.18) !important; color: #a8a8b4  !important; }


/* ═══════════════════════════════════════════════════════════
   11. ÍCONOS DE MÓDULO (index.html) — paleta EAT
   ══════════════════════════════════════════════════════════ */
.c-logistica  .icon { background: linear-gradient(135deg,#6C775C,#4a5239) !important; }
.c-comercial  .icon { background: linear-gradient(135deg,#7B7B84,#5a5a62) !important; }
.c-expedicion .icon { background: linear-gradient(135deg,#6C775C,#8a9a78) !important; }
.c-marketing  .icon { background: linear-gradient(135deg,#9E8C5C,#6C775C) !important; }
.c-notis      .icon { background: linear-gradient(135deg,#7B7B84,#6C775C) !important; }
.c-cal        .icon { background: linear-gradient(135deg,#5a5a62,#7B7B84) !important; }
.c-mant       .icon { background: linear-gradient(135deg,#6e5e4a,#6C775C) !important; }
.c-costos     .icon { background: linear-gradient(135deg,#9E8C5C,#6e5e4a) !important; }
.c-admin      .icon { background: linear-gradient(135deg,#363633,#1D1D1B) !important; }


/* ═══════════════════════════════════════════════════════════
   12. LOGO / BRAND MARK (index.html)
   ══════════════════════════════════════════════════════════ */
.logo {
  background: rgba(108,119,92,.15) !important;
  color: var(--eat-green) !important;
  border-color: rgba(108,119,92,.32) !important;
}

/* Tag "eat" / Eyebrow de índice */
.eyebrow { color: var(--eat-green) !important; }


/* ═══════════════════════════════════════════════════════════
   13. PILLS / TAGS
   ══════════════════════════════════════════════════════════ */
.tag, .pill {
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}


/* ═══════════════════════════════════════════════════════════
   14. TOAST
   ══════════════════════════════════════════════════════════ */
.toast,
#toast {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow) !important;
}


/* ═══════════════════════════════════════════════════════════
   15. SEPARADOR / ADMIN DIVIDER (index.html)
   ══════════════════════════════════════════════════════════ */
.admin-divider {
  color: var(--eat-green) !important;
}
.admin-divider::before,
.admin-divider::after {
  background: var(--border) !important;
}


/* ═══════════════════════════════════════════════════════════
   16. LOGIN (login.html, propuesta-login.html)
   ══════════════════════════════════════════════════════════ */
.login-wrap .card,
.card.login-card {
  background: var(--panel) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.60),
              0 0 0 1px var(--border) !important;
}

.login-wrap .card h1,
.login-wrap .card p.desc {
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════
   17. PROPUESTA — Topbar con Gold → Verde Natural
   ══════════════════════════════════════════════════════════ */
.topbar h1 {
  color: var(--eat-green) !important;
}

a {
  color: var(--eat-green);
}

.btn-outline-gold {
  border-color: var(--eat-green) !important;
  color: var(--eat-green) !important;
}

.btn-outline-gold:hover {
  background: rgba(108,119,92,.12) !important;
  border-color: var(--eat-green) !important;
}


/* ═══════════════════════════════════════════════════════════
   18. SEMÁFOROS DE MARGEN (costos.css)
   Mantienen colores pero en versión oscura/apagada
   ══════════════════════════════════════════════════════════ */
.green-bg  { background: rgba(108,158,122,.16) !important; }
.lime-bg   { background: rgba(130,158,80,.16)  !important; }
.yellow-bg { background: rgba(158,140,92,.16)  !important; }
.orange-bg { background: rgba(158,110,60,.16)  !important; }
.red-bg    { background: rgba(158,96,96,.16)   !important; }
.gray-bg   { background: rgba(100,100,90,.16)  !important; }

/* Texto sobre semáforo — mantener legibilidad */
.green-bg  .green  { color: #8aca9e !important; }
.lime-bg   .lime   { color: #b4d480 !important; }
.yellow-bg .yellow { color: #c4b090 !important; }
.orange-bg .orange { color: #c49a7a !important; }
.red-bg    .red    { color: #c49a9a !important; }


/* ═══════════════════════════════════════════════════════════
   19. SUMMARY BOX (usuarios-admin)
   ══════════════════════════════════════════════════════════ */
.summary-box {
  background: var(--panel-2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}


/* ═══════════════════════════════════════════════════════════
   20. FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   21. LOGO EAT — wordmark tipográfico
   Se inyecta en headers que usen .eat-wordmark
   ══════════════════════════════════════════════════════════ */
.eat-wordmark {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: lowercase;
  color: var(--eat-white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font);
}

.eat-wordmark::after {
  content: attr(data-module);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eat-green);
  border-left: 1px solid var(--border);
  padding-left: 12px;
  font-family: var(--font);
}


/* ═══════════════════════════════════════════════════════════
   22. LOGÍSTICA — overrides para logistica.css (blues → verde)
   ══════════════════════════════════════════════════════════ */
:root {
  --primary:    #6C775C;
  --primary-dk: #5a6349;
  --primary-bg: rgba(108,119,92,.14);
  --primary-bd: rgba(108,119,92,.32);
  --ok:         #6C9E7A;
  --ok-bg:      rgba(108,158,122,.14);
  --ok-bd:      rgba(108,158,122,.30);
}


/* ═══════════════════════════════════════════════════════════
   23. RESPONSIVE — garantizar padding en dark bg
   ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  body {
    background: var(--bg) !important;
  }
}