/* =====================================================================
   Bloques · Taller — hoja de estilos del sistema
   Implementa el Manual de Identidad Visual v1.0 · Opcion 01 Azul Marino

   Como esta armado
   ----------------
   Las 43 pantallas heredadas estan escritas con clases de Bootstrap 5
   (row/col, table, btn, form-control, card, alert). Reescribirlas una
   por una habria sido semanas de trabajo y una fuente segura de
   regresiones. En vez de eso, esta hoja hace dos cosas:

     1. Declara los tokens del manual en :root.
     2. Reasigna las variables de Bootstrap a esos tokens y corrige a
        mano lo que Bootstrap no expone como variable.

   Resultado: cualquier pantalla vieja adopta la identidad sin tocarle
   una linea, y las pantallas nuevas usan las clases .gp-* de abajo.

   REGLA: ningun color hexadecimal suelto fuera del bloque :root.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens — Manual de Identidad Visual v1.0
   --------------------------------------------------------------------- */
:root {
  /* 2.1 Primarios — estructura y navegacion */
  --color-sidebar-base:     #0F2D5E;
  --color-sidebar-mid:      #1A3A6B;
  --color-sidebar-light:    #1E4A85;

  /* 2.2 Acento — interaccion y CTAs */
  --color-accent:           #1A6DDD;
  --color-accent-light:     #4A9EFF;
  --color-accent-soft:      #A8CFFF;
  --color-accent-subtle:    #7AB8FF;

  /* 2.3 Superficie */
  --color-bg-shell:         #F4F7FC;
  --color-bg-card:          #FFFFFF;
  --color-bg-table-header:  #EEF3FB;
  --color-bg-row-alt:       #F7F9FC;
  --color-border:           #D1DCF0;
  --color-border-soft:      #E2E8F0;

  /* 2.4 Texto */
  --color-text-primary:     #0F2D5E;
  --color-text-body:        #334466;
  --color-text-secondary:   #6B7A99;
  --color-text-label:       #4A6090;
  --color-text-muted:       #8899BB;

  /* 2.5 Semanticos — solo estados funcionales, nunca decoracion */
  --color-success:          #2E7D32;
  --color-success-bg:       #EBF5EB;
  --color-warning:          #B45309;
  --color-warning-bg:       #FFFBEB;
  --color-error:            #B91C1C;
  --color-error-bg:         #FEF3F2;
  --color-info:             #1A6DDD;
  --color-info-bg:          #EBF2FF;

  /* Tres tonos que el manual define en la guía de componentes (§4.1 y
     §4.5) pero no lista entre las variables de §5.1. Se declaran acá
     para no dejar hexadecimales sueltos en el resto de la hoja. */
  --color-on-sidebar:       #E8F0FF;   /* texto del logo sobre el sidebar */
  --color-input-focus-bg:   #FAFCFF;   /* fondo de un campo con foco */
  --color-input-error-bg:   #FFF5F5;   /* fondo de un campo con error */

  /* 3. Tipografia */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;
  --text-4xl:  36px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --leading-tight:   1.15;
  --leading-compact: 1.3;
  --leading-normal:  1.6;

  /* 5.3 Espaciado y layout */
  --sidebar-width:  220px;
  --topbar-height:  52px;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --border-width:   0.5px;
  --border-active:  2px;

  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
}

/* ---------------------------------------------------------------------
   2. Puente con Bootstrap
   Bootstrap 5.3 lee estas variables para casi todo. Reasignarlas es lo
   que hace que las pantallas viejas cambien de aspecto sin editarlas.
   --------------------------------------------------------------------- */
:root {
  --bs-body-bg:          var(--color-bg-shell);
  --bs-body-color:       var(--color-text-body);
  --bs-body-font-family: var(--font-primary);
  --bs-body-font-size:   var(--text-md);
  --bs-body-line-height: var(--leading-normal);

  --bs-primary:        #1A6DDD;
  --bs-primary-rgb:    26, 109, 221;
  --bs-secondary:      #6B7A99;
  --bs-secondary-rgb:  107, 122, 153;
  --bs-success:        #2E7D32;
  --bs-success-rgb:    46, 125, 50;
  --bs-danger:         #B91C1C;
  --bs-danger-rgb:     185, 28, 28;
  --bs-warning:        #B45309;
  --bs-warning-rgb:    180, 83, 9;
  --bs-info:           #1A6DDD;
  --bs-info-rgb:       26, 109, 221;

  --bs-border-color:   var(--color-border);
  --bs-border-radius:  var(--radius-md);
  --bs-link-color:     var(--color-accent);
  --bs-link-hover-color: var(--color-sidebar-base);
  --bs-emphasis-color: var(--color-text-primary);
}

/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-bg-shell);
  color: var(--color-text-body);
  font-family: var(--font-primary);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono, .gp-mono {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-sidebar-mid);
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-sidebar-base); text-decoration: underline; }

h1, .h1 { font-size: var(--text-3xl); font-weight: var(--font-bold);     color: var(--color-text-primary); line-height: var(--leading-tight); margin: 0 0 var(--space-4); }
h2, .h2 { font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--color-sidebar-mid);  line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
h3, .h3 { font-size: var(--text-xl);  font-weight: var(--font-medium);   color: var(--color-accent);       line-height: var(--leading-tight); margin: 0 0 var(--space-3); }
h4, h5, h6 { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-2); }

/* ---------------------------------------------------------------------
   4. Estructura de la aplicacion — sidebar + topbar + contenido
   --------------------------------------------------------------------- */
.gp-shell {
  display: flex;
  min-height: 100vh;
}

/* 4.1 Sidebar. El manual exige degradado vertical, nunca color solido. */
.gp-sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: linear-gradient(180deg,
              var(--color-sidebar-base) 0%,
              var(--color-sidebar-mid)  55%,
              var(--color-sidebar-light) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 1030;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gp-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  border-bottom: var(--border-width) solid rgba(255, 255, 255, .12);
  min-height: var(--topbar-height);
}
.gp-sidebar__brand img { max-height: 28px; max-width: 110px; object-fit: contain; }
.gp-sidebar__brand-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-on-sidebar);
  line-height: var(--leading-compact);
}
.gp-sidebar__brand-sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: rgba(255, 255, 255, .45);
  letter-spacing: .04em;
}

.gp-sidebar__nav { padding: var(--space-3) 0 var(--space-6); flex: 1; }

.gp-sidebar__group {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: 9px;
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .35);
}

.gp-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: rgba(255, 255, 255, .65);
  line-height: var(--leading-compact);
  border-left: var(--border-active) solid transparent;
  transition: background .15s ease, color .15s ease;
}
.gp-sidebar__item:hover {
  background: rgba(74, 158, 255, .10);
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
}
/* Item activo: unico elemento del sistema con borde izquierdo de 2px. */
.gp-sidebar__item.is-active {
  background: rgba(74, 158, 255, .20);
  color: var(--color-accent-soft);
  font-weight: var(--font-medium);
  border-left-color: var(--color-accent-light);
}
.gp-sidebar__item.is-active i,
.gp-sidebar__item.is-active .bi { color: var(--color-accent-light); }
.gp-sidebar__item i, .gp-sidebar__item .bi { font-size: 16px; width: 16px; text-align: center; flex: 0 0 16px; }

.gp-sidebar__sub {
  display: block;
  padding: var(--space-1) var(--space-4) var(--space-1) 46px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, .45);
  line-height: var(--leading-compact);
}
.gp-sidebar__sub:hover { color: rgba(255, 255, 255, .8); text-decoration: none; }
.gp-sidebar__sub.is-active { color: var(--color-accent-subtle); }

.gp-sidebar__badge {
  margin-left: auto;
  background: var(--color-error);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: 999px;
  padding: 1px 6px;
  line-height: 1.5;
}

.gp-sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-width) solid rgba(255, 255, 255, .12);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, .35);
}

/* 4.2 Area principal */
.gp-main {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
}

.gp-topbar {
  height: var(--topbar-height);
  background: var(--color-bg-card);
  border-bottom: var(--border-width) solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  position: sticky;
  top: 0;
  z-index: 1020;
}
.gp-topbar__title {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}
.gp-topbar__crumb {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-regular);
}
.gp-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

.gp-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-info-bg);
  color: var(--color-sidebar-mid);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.gp-content { padding: var(--space-5); flex: 1; }
.gp-content > .container-xl,
.gp-content > .container-fluid { padding-left: 0; padding-right: 0; max-width: none; }

/* ---------------------------------------------------------------------
   5. Componentes
   --------------------------------------------------------------------- */

/* 5.1 Cards. El manual es explicito: sin box-shadow, solo borde. */
.gp-card, .app-card, .card {
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none !important;
}
.gp-card__head, .card-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  background: transparent;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
}
.gp-card__body, .card-body { padding: var(--space-4); }

/* 5.2 KPI */
.gp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.gp-kpi {
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) 14px;
}
.gp-kpi__label {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--color-text-secondary);
  margin-bottom: 3px;
  display: block;
}
.gp-kpi__value {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}
.gp-kpi__value--lg { font-size: var(--text-4xl); }
.gp-kpi__trend { font-size: var(--text-xs); font-weight: var(--font-regular); margin-top: 3px; }
.gp-kpi__trend--up   { color: var(--color-success); }
.gp-kpi__trend--down { color: var(--color-error); }
.gp-kpi__trend--flat { color: var(--color-text-secondary); }

/* 5.3 Tablas */
.gp-table-wrap {
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gp-table-wrap > .table-responsive { overflow-x: auto; }

table, .table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  --bs-table-bg: transparent;
}
table thead th, .table thead th, .gp-table th {
  background: var(--color-bg-table-header);
  color: var(--color-text-label);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border);
  white-space: nowrap;
}
table tbody td, .table tbody td, .gp-table td {
  font-size: var(--text-base);
  color: var(--color-text-body);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--color-bg-table-header);
  vertical-align: middle;
}
.table tbody tr:nth-child(even) > td { background: var(--color-bg-row-alt); }
.table tbody tr:hover > td { background: var(--color-bg-table-header); transition: background .15s ease; }
.table tbody tr:last-child > td { border-bottom: 0; }

/* Los importes se leen en columna: cifras alineadas a la derecha y con
   ancho de digito fijo, si no la coma baila entre filas. */
.num, .gp-num, td.text-end, th.text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 5.4 Badges de estado. Solo colores semanticos, nunca decorativos. */
.gp-badge, .badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: 10px;
  padding: 2px 7px;
  line-height: var(--leading-compact);
  white-space: nowrap;
}
.gp-badge--ok,      .badge.bg-success { background: var(--color-success-bg) !important; color: var(--color-success) !important; }
.gp-badge--error,   .badge.bg-danger  { background: var(--color-error-bg)   !important; color: var(--color-error)   !important; }
.gp-badge--warn,    .badge.bg-warning { background: var(--color-warning-bg) !important; color: var(--color-warning) !important; }
.gp-badge--info,    .badge.bg-info,
.badge.bg-primary                     { background: var(--color-info-bg)    !important; color: var(--color-accent)  !important; }
.gp-badge--neutral, .badge.bg-secondary { background: var(--color-bg-table-header) !important; color: var(--color-text-label) !important; }

/* 5.5 Botones. CTA con degradado; secundario con borde y texto de acento. */
.gp-btn, .btn {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-compact);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: filter .15s ease;
}
.gp-btn--primary, .btn-primary {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-sidebar-base) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.gp-btn--primary:hover, .btn-primary:hover { filter: brightness(1.08); color: #fff; }

.gp-btn--secondary,
.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-light {
  background: var(--color-bg-card) !important;
  border: var(--border-width) solid var(--color-border) !important;
  color: var(--color-accent) !important;
}
.gp-btn--secondary:hover,
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
  background: var(--color-bg-table-header) !important;
  color: var(--color-sidebar-base) !important;
}

.gp-btn--danger, .btn-danger, .btn-outline-danger {
  background: var(--color-bg-card) !important;
  border: var(--border-width) solid var(--color-border) !important;
  color: var(--color-error) !important;
}
.gp-btn--danger:hover, .btn-danger:hover, .btn-outline-danger:hover {
  background: var(--color-error-bg) !important;
}

.gp-btn--sm, .btn-sm { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }

/* 5.6 Formularios */
.gp-input, .form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"], input[type="tel"],
input[type="search"], select, textarea {
  width: 100%;
  background: var(--color-bg-card);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  color: var(--color-text-body);
  line-height: var(--leading-compact);
}
.gp-input:focus, .form-control:focus, .form-select:focus,
input:focus, select:focus, textarea:focus {
  outline: none;
  border: 1.5px solid var(--color-accent);
  background: var(--color-input-focus-bg);
  box-shadow: none !important;   /* el manual no admite sombra exterior */
}
.gp-input::placeholder, .form-control::placeholder { color: var(--color-text-muted); }

.gp-input:disabled, .form-control:disabled, .form-control[readonly] {
  background: var(--color-bg-shell);
  border-color: var(--color-border-soft);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.gp-input.is-error, .form-control.is-invalid {
  border: 1.5px solid var(--color-error);
  background: var(--color-input-error-bg);
}

.gp-label, .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-body);
  margin-bottom: var(--space-1);
}
.gp-help, .form-text {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.gp-error-text, .invalid-feedback {
  font-size: 11px;
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* 5.7 Avisos */
.gp-alert, .alert {
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
  box-shadow: none;
}
.gp-alert--ok,    .alert-success { background: var(--color-success-bg); border-left: 3px solid var(--color-success); color: var(--color-success); }
.gp-alert--error, .alert-danger  { background: var(--color-error-bg);   border-left: 3px solid var(--color-error);   color: var(--color-error); }
.gp-alert--warn,  .alert-warning { background: var(--color-warning-bg); border-left: 3px solid var(--color-warning); color: var(--color-warning); }
.gp-alert--info,  .alert-info    { background: var(--color-info-bg);    border-left: 3px solid var(--color-accent);  color: var(--color-accent); }

/* 5.8 Estado vacio: una tabla sin filas tiene que explicar que hacer,
   no quedar en blanco. */
.gp-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-secondary);
}
.gp-empty__icon  { font-size: 32px; color: var(--color-border); display: block; margin-bottom: var(--space-3); }
.gp-empty__title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text-body); margin-bottom: var(--space-1); }
.gp-empty__text  { font-size: var(--text-base); margin-bottom: var(--space-4); }

/* 5.9 Utilidades */
.gp-muted, .text-muted   { color: var(--color-text-secondary) !important; }
.gp-section              { margin-bottom: var(--space-8); }
.gp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.gp-toolbar__spacer { margin-left: auto; }

.gp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-bg-table-header);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-label);
}

/* Barra de progreso simple para estados de OT */
.gp-meter { height: 6px; background: var(--color-bg-table-header); border-radius: 999px; overflow: hidden; }
.gp-meter__fill { height: 100%; background: var(--color-accent); border-radius: 999px; }

/* ---------------------------------------------------------------------
   6. Responsive
   Debajo de 992px el sidebar se convierte en cajon deslizante. En el
   taller se consulta una OT desde el celular con las manos sucias: la
   pantalla chica no es un caso de borde.
   --------------------------------------------------------------------- */
.gp-sidebar__toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--color-text-primary);
  font-size: 20px;
  padding: 0 var(--space-2) 0 0;
  cursor: pointer;
}
.gp-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 45, 94, .45);
  z-index: 1025;
}

@media (max-width: 991.98px) {
  .gp-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 2px 0 12px rgba(15, 45, 94, .18);
  }
  .gp-shell.is-nav-open .gp-sidebar { transform: translateX(0); }
  .gp-shell.is-nav-open .gp-backdrop { display: block; }
  .gp-main { margin-left: 0; }
  .gp-sidebar__toggle { display: inline-block; }
  .gp-content { padding: var(--space-4) var(--space-3); }
  .gp-topbar { padding: 0 var(--space-3); }
  .gp-topbar__crumb { display: none; }
}

@media (max-width: 575.98px) {
  .gp-kpi__value { font-size: var(--text-2xl); }
  .gp-topbar__title { font-size: var(--text-base); }
}

/* ---------------------------------------------------------------------
   7. Impresion — OT, presupuestos y recibos salen en papel
   --------------------------------------------------------------------- */
@media print {
  .gp-sidebar, .gp-topbar, .gp-backdrop, .gp-toolbar, .no-print { display: none !important; }
  .gp-main { margin-left: 0; }
  .gp-content { padding: 0; }
  body { background: #fff; font-size: 11pt; }
  .gp-card, .card, .gp-table-wrap { border: 0.5pt solid #999; break-inside: avoid; }
}

/* ---------------------------------------------------------------------
   8. Pie de marca

   Va al final de cada pantalla: panel, portal del cliente, login y
   paginas publicas de cobro. Discreto a proposito — es una firma, no un
   aviso.
   --------------------------------------------------------------------- */
.gp-foot {
  margin: var(--space-8) 0 0;
  padding: var(--space-4) 0 var(--space-2);
  border-top: 0.5px solid var(--color-border-soft);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: var(--leading-normal, 1.5);
}
.gp-foot a         { color: var(--color-text-secondary); text-decoration: none; }
.gp-foot a:hover   { color: var(--color-accent); text-decoration: underline; }
.gp-foot__sep      { color: var(--color-border); margin: 0 var(--space-1); }

/* Sobre el fondo oscuro del login la misma firma necesita mas contraste. */
.gp-foot--sobre-oscuro,
.gp-foot--sobre-oscuro a { color: var(--color-accent-soft); border-color: transparent; }
.gp-foot--sobre-oscuro .gp-foot__sep { color: var(--color-accent-subtle); }

/* ---------------------------------------------------------------------
   9. Guia de primeros pasos
   --------------------------------------------------------------------- */
.gp-steps { display: flex; flex-direction: column; gap: var(--space-2); }

.gp-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  text-decoration: none;
}
.gp-step:hover { border-color: var(--color-accent); background: var(--color-bg-row-alt); }

.gp-step__mark {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gp-step__title { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-text-primary); }
.gp-step__text  { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: 2px; }

.gp-step.is-done               { background: var(--color-success-bg); border-color: var(--color-success-bg); }
.gp-step.is-done .gp-step__mark{ background: var(--color-success); border-color: var(--color-success); color: var(--color-bg-card); }
.gp-step.is-done .gp-step__title { color: var(--color-text-secondary); }

.gp-progress {
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-table-header);
  overflow: hidden;
}
.gp-progress__fill { height: 100%; background: var(--color-accent); transition: width .3s ease; }

/* ---------------------------------------------------------------------
   10. Formas de cobro

   El bloque que ve el cliente final del taller: CBU, alias y boton de
   pago. Los datos van en fuente mono porque se copian a mano, y un 0
   confundido con una O en un CBU es una transferencia perdida.
   --------------------------------------------------------------------- */
.gp-pay { display: flex; flex-direction: column; gap: var(--space-3); }

.gp-pay__item {
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-card);
}
.gp-pay__title {
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.gp-pay__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  padding: 2px 0;
}
.gp-pay__label { font-size: var(--text-sm); color: var(--color-text-label); min-width: 92px; }
.gp-pay__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--color-text-body);
  word-break: break-all;
  user-select: all;
}
.gp-pay__note { font-size: var(--text-base); color: var(--color-text-secondary); margin-top: var(--space-2); }

.gp-copy {
  border: 0.5px solid var(--color-border);
  background: var(--color-bg-table-header);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  padding: 1px var(--space-2);
  cursor: pointer;
}
.gp-copy:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* El pie no se imprime: en un presupuesto en papel la firma va en el
   membrete, no repetida abajo de todo. */
@media print {
  .gp-foot, .gp-copy { display: none !important; }
}

/* Acceso a la ayuda desde la topbar. Un signo de pregunta al alcance en
   cada pantalla evita la llamada a soporte por algo que esta escrito. */
.gp-topbar__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: 17px;
  text-decoration: none;
}
.gp-topbar__help:hover { background: var(--color-bg-table-header); color: var(--color-accent); }