/* 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: blanca con la insignia en modo claro, tinta en modo oscuro ---------- */
.shell { padding-top: 0; }
.barra { --barra-fondo: #FFFFFF; --barra-linea: var(--piedra);
  background: var(--barra-fondo); color: var(--tinta); margin-top: 0; padding-top: .9rem; padding-bottom: 0; border-bottom: 1px solid var(--barra-linea); }
.barra.compacta { background: var(--barra-fondo); backdrop-filter: none; box-shadow: none; padding-top: .55rem; }
/* con menú superior la barra llega de borde a borde aunque el contenido tenga ancho máximo: el fondo
   se estira en un pseudo-elemento recortado, así los menús desplegables de la barra no quedan cortados */
:root:not([data-menu="lateral"]) .barra::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  box-shadow: 0 0 0 100vmax var(--barra-fondo), 0 1px 0 100vmax var(--barra-linea); clip-path: inset(0 -100vmax -1px); }
.brand img { height: 2.6rem; }
.barra.compacta .brand img { height: 2.1rem; }
.brand-name { border-left-color: var(--piedra); color: var(--tinta); }
.brand-name small { color: var(--gris); }
.barra .nav { background: transparent; border: 0; padding: 0; margin-top: .8rem; gap: .2rem; }
.barra .nav a { color: var(--gris); padding: .7rem .9rem; border-bottom: 2px solid transparent; font-weight: 500; }
.barra .nav a:hover { background: var(--arena); color: var(--tinta); }
.barra .nav a.active { background: transparent; color: var(--tinta); border-bottom-color: var(--dorado); }
.barra .btn.dark { background: transparent; border: 1px solid var(--piedra); color: var(--tinta); }
.barra .btn.dark:hover { border-color: var(--dorado); filter: none; }
.barra .avatar, .avatar { background: var(--dorado); color: var(--tinta); }
[data-tema="oscuro"] .barra { --barra-fondo: var(--tinta); --barra-linea: #232325; color: #fff; }
[data-tema="oscuro"] .brand-name { border-left-color: rgba(255, 255, 255, .18); color: #fff; }
[data-tema="oscuro"] .brand-name small { color: var(--gris-claro); }
[data-tema="oscuro"] .barra .nav a { color: var(--gris-claro); }
[data-tema="oscuro"] .barra .nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
[data-tema="oscuro"] .barra .nav a.active { color: #fff; }
[data-tema="oscuro"] .barra .btn.dark { background: transparent; border-color: rgba(255, 255, 255, .24); color: #fff; }
@media (max-width: 767px) { .barra .nav { margin-top: .5rem; } }

/* menú lateral: sigue al tema igual que la barra */
[data-menu="lateral"] .side { background: #FFFFFF; border-right: 1px solid var(--piedra); }
.side .brand-name { color: var(--tinta); }
.side nav a { color: var(--gris); border-left: 2px solid transparent; }
.side nav a:hover { background: var(--arena); color: var(--tinta); }
.side nav a.active { background: var(--arena); color: var(--tinta); border-left-color: var(--dorado); }
.side .foot { color: var(--gris); }
[data-tema="oscuro"][data-menu="lateral"] .side, [data-tema="oscuro"] [data-menu="lateral"] .side { background: var(--tinta); border-right: 0; }
[data-tema="oscuro"] .side .brand-name { color: #fff; }
[data-tema="oscuro"] .side nav a { color: var(--gris-claro); }
[data-tema="oscuro"] .side nav a:hover, [data-tema="oscuro"] .side nav a.active { background: rgba(255, 255, 255, .06); color: #fff; }
[data-tema="oscuro"] .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); }
.card.dark .kpi .lbl, .card.dark.kpi .lbl, .card.dark .muted, .card.dark .s { color: var(--gris-claro); }
/* sobre el dorado el ícono va sin fondo, con trazo y borde tinta, también en modo oscuro */
.card.accent .ico-box { background: transparent; border-color: rgba(14, 14, 15, .35); color: var(--tinta); box-shadow: none; }
/* «En el taller» del panel (componentes) y de indicadores (reloj comparador): foto que apenas asoma a la derecha, bajo un degradé tinta */
.card.kpi.dark.kpi-taller { --kpi-fondo: 14, 14, 15; --kpi-foto: url("kpi-taller.jpg?v=1"); --kpi-pos: right center;
  background: linear-gradient(90deg, rgb(var(--kpi-fondo)) 30%, rgba(var(--kpi-fondo), .9) 60%, rgba(var(--kpi-fondo), .72) 100%),
              var(--kpi-foto) var(--kpi-pos) / cover no-repeat, rgb(var(--kpi-fondo)); }
.card.kpi.dark.kpi-indicadores { --kpi-foto: url("kpi-indicadores.jpg?v=1"); --kpi-pos: right 30%; }
[data-tema="oscuro"] .card.kpi.dark.kpi-taller { --kpi-fondo: 0, 0, 0; }
.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); }
.credito a { color: inherit; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--dorado); }
.credito a:hover { color: var(--dorado-texto); }
[data-tema="oscuro"] .credito a:hover { 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; }