/* Marca GAM Parts (by Grupo AM) · Gantt de taller versión 1.2.
   Aplica el Manual de marca GAM Parts v1.0 sobre la base assets/css/app.css:
   Poppins; tinta #0E0E0F, dorado #BFA073 (acento, nunca texto sobre blanco), dorado texto #8E7140, arena #F6F2EB,
   piedra #E4DDD0, gris #5E5A54, gris claro #A9A39A; esquinas rectas (el redondeo es exclusivo del logo); sin sombras;
   etiquetas en mayúsculas doradas; encabezados de tabla en tinta; canal dorado inclinado 21,3°.
   Decisión pendiente de validar con el cliente: los colores de estado del tablero (por iniciar, en evaluación…)
   son funcionales y quedan fuera de la paleta, porque la paleta no alcanza para distinguir 7 estados. */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Regular.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(fonts/Poppins-Medium.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url(fonts/Poppins-SemiBold.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(fonts/Poppins-Bold.woff2) format("woff2"); }

:root {
  --tinta: #0E0E0F; --dorado: #BFA073; --dorado-texto: #8E7140; --arena: #F6F2EB; --piedra: #E4DDD0;
  --gris: #5E5A54; --gris-claro: #A9A39A; --skew: -21.3deg;
  --ink: var(--tinta); --muted: var(--gris); --faint: #8A847B;
  --line: var(--piedra);
  --card: #FFFFFF; --card-border: var(--piedra); --solid: #FFFFFF;
  --field: #FFFFFF; --field-border: var(--piedra);
  --chip: rgba(14, 14, 15, .05);
  --contrast: var(--tinta); --contrast-ink: #FFFFFF; --contrast-muted: var(--gris-claro);
  --contrast-line: rgba(255, 255, 255, .1); --contrast-chip: rgba(255, 255, 255, .08);
  --warn: var(--dorado-texto); --warn-bg: #F3EBDD;
  --radius: 0;
  --shadow: none;
  --pop: 0 10px 28px rgba(14, 14, 15, .16);
}
:root[data-tema="oscuro"] {
  --ink: #F6F2EB; --muted: var(--gris-claro); --faint: #7C776F;
  --line: rgba(255, 255, 255, .1);
  --card: #161618; --card-border: rgba(255, 255, 255, .08); --solid: #161618;
  --field: #0E0E0F; --field-border: rgba(255, 255, 255, .14);
  --chip: rgba(255, 255, 255, .06);
  --contrast: var(--dorado); --contrast-ink: var(--tinta); --contrast-muted: #3a332a;
  --warn: var(--dorado); --warn-bg: rgba(191, 160, 115, .16);
  --pop: 0 12px 32px rgba(0, 0, 0, .55);
}

/* ---------- base: tipografía, esquinas rectas, sin efectos ---------- */
body { font-family: "Poppins", Arial, Helvetica, sans-serif; background: var(--bg-from); font-size: 14.5px; line-height: 1.45; }
*, *::before, *::after { border-radius: 0 !important; }
.card, .btn, .icon-btn, .search-pill, .nav, .seg, .field, .kan-col, .kan-card, .tb-scroll, .gx, .imp-hoja, .tema-panel, .dialog,
.dropdown, .pop, .bottom-nav, .side { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.dialog, .dropdown, .pop, .tema-panel { box-shadow: var(--pop); }
h1, h2, h3, h4, b, strong, .strong { font-weight: 600; }
.cell-main { font-weight: 500; }

/* ---------- barra superior en tinta ---------- */
.shell { padding-top: 0; }
.barra { background: var(--tinta); color: #fff; padding-top: .9rem; padding-bottom: 0; border-bottom: 1px solid var(--tinta); }
.barra.compacta { background: var(--tinta); backdrop-filter: none; box-shadow: none; padding-top: .55rem; }
.brand img { height: 2.6rem; }
.barra.compacta .brand img { height: 2.1rem; }
.brand-name { border-left-color: rgba(255, 255, 255, .18); color: #fff; }
.brand-name small { color: var(--gris-claro); }
.barra .nav { background: transparent; border: 0; padding: 0; margin-top: .8rem; gap: .2rem; }
.barra .nav a { color: var(--gris-claro); padding: .7rem .9rem; border-bottom: 2px solid transparent; font-weight: 500; }
.barra .nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.barra .nav a.active { background: transparent; color: #fff; border-bottom-color: var(--dorado); }
.barra .btn.dark { background: transparent; border: 1px solid rgba(255, 255, 255, .24); color: #fff; }
.barra .btn.dark:hover { border-color: var(--dorado); filter: none; }
[data-tema="oscuro"] .barra .btn.dark { background: transparent; border-color: rgba(255, 255, 255, .24); color: #fff; }
.barra .avatar, .avatar { background: var(--dorado); color: var(--tinta); }
[data-tema="oscuro"] .barra { border-bottom-color: rgba(255, 255, 255, .08); }
/* el logo sobre tinta: la insignia se funde con el fondo, como indica el manual */
.barra .logo-claro { display: none; } .barra .logo-oscuro { display: block; }
@media (max-width: 767px) { .barra .nav { margin-top: .5rem; } }

/* menú lateral */
[data-menu="lateral"] .side { background: var(--tinta); border-right: 0; }
.side .logo-claro { display: none; } .side .logo-oscuro { display: block; }
.side .brand-name { color: #fff; }
.side nav a { color: var(--gris-claro); border-left: 2px solid transparent; }
.side nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side nav a.active { background: rgba(255, 255, 255, .06); color: #fff; border-left-color: var(--dorado); }
.side .foot { color: var(--gris-claro); }

/* ---------- encabezado de página: título SemiBold y regla dorada corta ---------- */
.page-head h1 { font-weight: 600; letter-spacing: -.015em; font-size: 2rem; }
@media (min-width: 768px) { .page-head h1 { font-size: 2.4rem; } }
.page-head h1::after { content: ""; display: block; width: 2.6rem; height: 3px; background: var(--dorado); margin-top: .7rem; }
.crumb { color: var(--dorado-texto); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 500; }

/* ---------- tarjetas, indicadores ---------- */
.card { border: 1px solid var(--card-border); }
.card-head h2, .card-head h3 { font-size: 1.05rem; }
.card.dark { background: var(--tinta); border-color: var(--tinta); color: #fff; }
[data-tema="oscuro"] .card.dark { background: #000; border-color: rgba(255, 255, 255, .08); }
.card.accent { background: var(--dorado); border-color: var(--dorado); color: var(--tinta); }
.kpi .val { font-weight: 500; }
.kpi .ico-box { border: 1px solid var(--line); background: var(--solid); }
.card.dark .kpi .ico-box, .card.dark .ico-box { border-color: rgba(255, 255, 255, .14); }
.bigstat b { font-weight: 500; }
.pill-bar > div { border: 1px solid var(--line); }
.pill-bar .acc { background: var(--dorado); color: var(--tinta); border-color: var(--dorado); }
.pill-bar .dark { background: var(--tinta); color: #fff; border-color: var(--tinta); }

/* ---------- botones ---------- */
.btn { border: 1px solid var(--piedra); background: var(--solid); font-weight: 500; }
[data-tema="oscuro"] .btn { border-color: rgba(255, 255, 255, .14); }
.btn:hover { background: var(--arena); }
[data-tema="oscuro"] .btn:hover { background: #1f1f22; }
.btn.dark { background: var(--tinta); border-color: var(--tinta); color: #fff; }
[data-tema="oscuro"] .btn.dark { background: var(--dorado); border-color: var(--dorado); color: var(--tinta); }
.btn.acc { background: var(--dorado); border-color: var(--dorado); color: var(--tinta); font-weight: 600; }
.btn.acc:hover { filter: brightness(.95); }
.btn.ghost { border-color: transparent; background: transparent; }

/* ---------- etiquetas, formularios ---------- */
.form label { font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado-texto); }
[data-tema="oscuro"] .form label { color: var(--dorado); }
.form label > span, .form label .ayuda { letter-spacing: normal; text-transform: none; }
.form label > span:first-child { letter-spacing: .14em; text-transform: uppercase; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .form textarea { font-size: .92rem; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--tinta); }
[data-tema="oscuro"] .form input:focus, [data-tema="oscuro"] .form select:focus, [data-tema="oscuro"] .form textarea:focus { border-color: var(--dorado); }
.check { text-transform: none !important; letter-spacing: normal !important; }
.field { background: var(--solid); border: 1px solid var(--field-border); }
.seg { background: var(--solid); border: 1px solid var(--line); }
.seg button.on { background: var(--tinta); color: #fff; }
[data-tema="oscuro"] .seg button.on { background: var(--dorado); color: var(--tinta); }
.tabs button.on, .vistas button.on { border-color: var(--dorado); }

/* ---------- tablas: encabezado tinta, líneas piedra ---------- */
.tbl th { background: var(--tinta); color: #fff; font-weight: 500; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 0; }
[data-tema="oscuro"] .tbl th { background: #000; }
.tbl td { border-bottom: 1px solid var(--line); }
.tb-head .tb-c { background: var(--tinta); color: #fff; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; border-color: rgba(255, 255, 255, .1); }
[data-tema="oscuro"] .tb-head .tb-c { background: #000; }
.tb-ghead b { color: var(--ink); }
.gm-head > div { text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.gm-fase, .tb-fase, .imp-fase { color: var(--dorado-texto); background: var(--arena); border-left: 2px solid var(--dorado); }
[data-tema="oscuro"] .gm-fase, [data-tema="oscuro"] .tb-fase { background: #1b1b1d; color: var(--dorado); }
.kan-col h4 { color: var(--dorado-texto); letter-spacing: .14em; }
[data-tema="oscuro"] .kan-col h4 { color: var(--dorado); }
.badge { font-weight: 500; }

/* Gantt: hoy en dorado con texto tinta (el dorado no lleva texto blanco) */
.gx-dias span.hoy { background: var(--dorado); color: var(--tinta); }
.gx-head, .gx-lab { background: var(--solid); }

/* ---------- avisos y pie ---------- */
.toast { background: var(--tinta); }
.toast .ok { color: var(--dorado); }
.pie { border-top-color: var(--piedra); }
.pie .lema { color: var(--dorado-texto); }
[data-tema="oscuro"] .pie .lema { color: var(--dorado); }

/* ---------- ingreso: tinta, firma de marca, lema y canal dorado ---------- */
/* fotografía de taller en tonos cálidos bajo una capa tinta de 60-80 % (manual: «Fotografía») */
.login-side { position: relative; overflow: hidden;
  background: linear-gradient(90deg, rgba(14, 14, 15, .8) 0%, rgba(14, 14, 15, .7) 55%, rgba(14, 14, 15, .6) 100%),
              linear-gradient(180deg, rgba(14, 14, 15, 0) 55%, rgba(14, 14, 15, .6) 100%),
              url("login.jpg?v=1") 72% center / cover no-repeat,
              var(--tinta); }
/* área de respeto: un margen libre igual al alto de la banda PARTS (~16 % del ancho de la insignia) */
.login-side .logo-box { margin-bottom: 2.2rem; }
.login-side .logo-box img { height: auto; width: 13.5rem; filter: none; }
.login-side h1 { font-weight: 600; font-size: 2.8rem; text-shadow: none; }
.login-side h1::after { content: ""; display: block; width: 3rem; height: 3px; background: var(--dorado); margin-top: 1.2rem; }
.login-texto { color: var(--gris-claro); opacity: 1; }
.login-side .chip { background: transparent; border: 1px solid rgba(191, 160, 115, .45); backdrop-filter: none; }
.login-side .chip b { color: var(--dorado); font-weight: 600; }
.login-side .chip span { color: var(--gris-claro); opacity: 1; }
.login-side .lema { color: var(--dorado); }
.login-side .canal { display: block; position: absolute; right: 14%; bottom: -2rem; width: .4rem; height: 62%;
  background: var(--dorado); transform: skewX(var(--skew)); transform-origin: bottom left; }
.login-main { background: var(--arena); }
[data-tema="oscuro"] .login-main { background: var(--tinta); }
.login-box h2 { font-weight: 600; }
.login-logo { height: auto; width: 11rem; }
/* autocompletado del navegador: sin el fondo de color propio de Chrome, mismo campo de la marca */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--field) inset; box-shadow: 0 0 0 100px var(--field) inset;
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s 0s; }