/* =========================================================================
   PALTALLER · SISTEMA DE DISEÑO
   PT-DS-003 · v1.0 · es-CO
   Un solo archivo. Sin framework, sin build. Los partials de Razor
   solo escriben marcado; todas las decisiones visuales viven aquí.

   Índice
     0. Fuentes
     1. Tokens
     2. Reset y base
     3. Tipografía y encabezados numerados
     4. Rejilla y utilidades de espacio
     5. Botones
     6. Campos
     7. Tablas
     8. Sellos de estado
     9. Cajas de aviso
    10. Figuras
    11. Números de llamada
    12. Bloques de cifra
    13. Listas de órdenes (densidad A / B)
    14. Navegación
    15. App (base 16, objetivos 52 px)
    16. Responsive
    17. Impresión
   ========================================================================= */


/* 0. FUENTES ============================================================= */
/* Descarga las fuentes al proyecto en producción; no dependas del CDN.
   Archivo trae eje de ancho variable (wdth) — de ahí sale el logotipo
   expandido y la voz de los encabezados. No lo sustituyas por una
   grotesca sin eje de ancho: se pierde el idioma. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
}


/* 1. TOKENS ============================================================== */
:root {
  /* Color — tema único, alto contraste, legible a pleno sol.
     --tinta-tenue solo para deshabilitados, placeholders y huecos punteados.
     Cualquier dato que el usuario deba leer va en --tinta-media o --tinta:
     un contador, una fecha o una etiqueta de navegación NO son texto tenue. */
  --papel:         #FDFDFB;
  --papel-sombra:  #F4F4EF;
  --tinta:         #15171B;
  --tinta-media:   #4B5058;
  --tinta-tenue:   #6E737C;   /* tenue sobre papel  · 4.6:1 */
  --tinta-tenue-inv: #9AA0A8; /* tenue sobre tinta  · 5.9:1 (solo .pt-camara) */
  --regla:         #D9DAD4;
  --rojo:          #C8102E;
  --rojo-tinta:    #9E0C24;
  --ok:            #1E7A34;
  --precaucion:    #8A5A00;
  --info:          #1F5C9E;

  /* Tipografía */
  --fuente-ui:   'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fuente-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --texto-13: 13px;
  --texto-14: 14px;   /* base web */
  --texto-16: 16px;   /* base app */
  --texto-20: 20px;
  --texto-26: 26px;
  --texto-34: 34px;

  --alto-cuerpo: 1.4;
  --alto-titulo: 1.15;

  /* Espacio — base 4 */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e6: 24px;
  --e8: 32px;
  --e12: 48px;

  /* Reglas y bordes */
  --regla-fina:   1px solid var(--regla);
  --regla-tinta:  1px solid var(--tinta);
  --regla-seccion: 2px solid var(--tinta);
  --radio: 2px;

  /* Objetivos táctiles */
  --toque-web: 44px;
  --toque-app: 52px;

  /* Ancho de contenido */
  --ancho-max: 1280px;
}


/* 2. RESET Y BASE ======================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--texto-14);
  line-height: var(--alto-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Sin sombras en ninguna parte. La elevación se dibuja con bordes. */
* { box-shadow: none !important; }

a { color: var(--rojo); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rojo-tinta); }

img, svg { max-width: 100%; }

::placeholder { color: var(--tinta-tenue); opacity: 1; }

/* Foco visible y cuadrado — nunca resplandor */
:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }

.pt-mono { font-family: var(--fuente-mono); }

/* Obligatorio en toda cifra: placas, plata, fechas, contadores */
.pt-num {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}


/* 3. TIPOGRAFÍA Y ENCABEZADOS NUMERADOS ================================== */
.pt-t13 { font-size: var(--texto-13); }
.pt-t14 { font-size: var(--texto-14); }
.pt-t16 { font-size: var(--texto-16); }
.pt-t20 { font-size: var(--texto-20); }
.pt-t26 { font-size: var(--texto-26); }
.pt-t34 { font-size: var(--texto-34); }

.pt-tenue  { color: var(--tinta-tenue); }
.pt-media  { color: var(--tinta-media); }
.pt-acento { color: var(--rojo); }

/* La voz "3.2 ORDEN DE TRABAJO" */
.pt-titulo {
  margin: 0;
  font-family: var(--fuente-ui);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: var(--alto-titulo);
  text-transform: uppercase;
}
.pt-titulo--pagina { font-size: var(--texto-34); }
.pt-titulo--seccion { font-size: var(--texto-20); }

/* Encabezado de sección: número rojo + título + regla de 2 px */
.pt-seccion {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: var(--regla-seccion);
}
.pt-seccion__num {
  font-family: var(--fuente-mono);
  font-weight: 600;
  color: var(--rojo);
  font-size: inherit;
}
.pt-seccion__meta { margin-left: auto; font-family: var(--fuente-mono); font-size: var(--texto-13); color: var(--tinta-tenue); }

/* Micro-etiqueta en versalitas — encabezados de caja, labels de campo */
.pt-etiqueta {
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* Logotipo — tambien cuando es enlace: tinta, nunca subrayado */
.pt-logo {
  font-family: var(--fuente-ui);
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta);
  text-decoration: none;
}
.pt-logo b { color: var(--rojo); font-weight: inherit; }


/* 4. REJILLA Y UTILIDADES ================================================ */
.pt-pagina { max-width: var(--ancho-max); margin: 0 auto; padding: var(--e6); }

.pt-rejilla { display: grid; gap: var(--e6); grid-template-columns: repeat(12, 1fr); }
.pt-col-3 { grid-column: span 3; }
.pt-col-4 { grid-column: span 4; }
.pt-col-6 { grid-column: span 6; }
.pt-col-8 { grid-column: span 8; }
.pt-col-12 { grid-column: span 12; }

.pt-fila  { display: flex; align-items: center; gap: var(--e3); }
.pt-fila--sep { justify-content: space-between; }
.pt-pila  { display: flex; flex-direction: column; gap: var(--e4); }

/* La "caja": región con borde y etiqueta montada en el borde superior.
   Reemplaza a la tarjeta. Nunca flota, nunca tiene sombra. */
.pt-caja { border: var(--regla-fina); background: var(--papel); }
.pt-caja--tinta { border: var(--regla-tinta); }
/* El meta de la derecha (contadores, totales) es dato: nunca --tinta-tenue,
   que además no alcanza AA sobre --papel-sombra. */
.pt-caja__titulo {
  padding: var(--e2) var(--e3);
  background: var(--papel-sombra);
  border-bottom: var(--regla-fina);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
}
.pt-caja__cuerpo { padding: var(--e4); }
.pt-caja__pie { padding: var(--e3) var(--e4); border-top: var(--regla-tinta); }


/* 5. BOTONES ============================================================= */
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--toque-web);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radio);
  background: none;
  font-family: var(--fuente-ui);
  font-size: var(--texto-14);
  font-weight: 500;
  line-height: 1;
  color: var(--tinta);
  cursor: pointer;
  /* La etiqueta de un boton no se parte en dos lineas ni se encoge cuando
     comparte fila con un campo. */
  white-space: nowrap;
  flex: none;
  /* Un enlace con pinta de boton es un boton: sin esto hereda el subrayado
     global de <a> y "RECIBIR VEHÍCULO" sale subrayado dentro del bloque rojo.
     .pt-btn--fantasma vuelve a subrayar mas abajo, que ahi si es la intencion. */
  text-decoration: none;
}

/* Primario y acento van en versalitas; el resto en caja baja. */
.pt-btn--primario,
.pt-btn--acento { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.pt-btn--primario { background: var(--tinta); color: var(--papel); }
.pt-btn--primario:hover { background: #000; }

/* Uno por pantalla. Si hay dos, uno de los dos no era el principal. */
.pt-btn--acento { background: var(--rojo); color: var(--papel); }
.pt-btn--acento:hover { background: var(--rojo-tinta); }

.pt-btn--secundario { border-color: var(--tinta); }
.pt-btn--secundario:hover { background: var(--papel-sombra); }

.pt-btn--fantasma {
  padding: 0 var(--e1);
  min-height: var(--toque-web);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pt-btn--fantasma:hover { color: var(--rojo); }

.pt-btn:disabled,
.pt-btn[aria-disabled="true"] {
  background: var(--papel-sombra);
  border-color: var(--regla);
  color: var(--tinta-tenue);
  cursor: not-allowed;
}


/* 6. CAMPOS ============================================================== */
.pt-campo { display: block; }
.pt-campo > .pt-etiqueta { display: block; margin-bottom: 5px; }

.pt-input,
.pt-select,
.pt-textarea {
  width: 100%;
  min-height: var(--toque-web);
  padding: var(--e2) var(--e3);
  border: var(--regla-fina);
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--texto-14);
  line-height: var(--alto-cuerpo);
}
.pt-textarea { resize: vertical; }

/* Placa, VIN, kilometraje, plata: siempre mono */
.pt-input--dato {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-16);
}

/* Foco: borde de 2 px, sin resplandor ni cambio de color */
.pt-input:focus,
.pt-select:focus,
.pt-textarea:focus {
  outline: none;
  border: 2px solid var(--tinta);
  padding: calc(var(--e2) - 1px) calc(var(--e3) - 1px);
}

.pt-input:disabled { background: var(--papel-sombra); color: var(--tinta-tenue); }

/* El error es texto, no un halo rojo */
.pt-campo__error {
  display: block;
  margin-top: 5px;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.04em;
  color: var(--precaucion);
}
.pt-campo__error::before { content: 'ATENCIÓN · '; font-weight: 600; }

/* Búsqueda — la placa es la llave universal del taller */
.pt-buscar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque-app);
  padding: 0 var(--e3);
  border: 2px solid var(--tinta);
}
.pt-buscar input {
  flex: 1;
  border: 0;
  outline: none;
  background: none;
  font-size: var(--texto-16);
  font-family: inherit;
  color: var(--tinta);
}
.pt-buscar__icono { color: var(--rojo); font-family: var(--fuente-mono); font-size: var(--texto-16); }

/* Sugerencias de una búsqueda: lo que el sistema cree que estás buscando.
   Papel sobre papel, no una capa flotante — el manual no tiene menús que
   se despliegan encima del texto. */
.pt-sugerencias {
  display: flex;
  flex-direction: column;
  border: var(--regla-fina);
  border-top: 0;
}
.pt-sugerencia {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  min-height: var(--toque-web);
  padding: var(--e2) var(--e3);
  border: 0;
  border-top: var(--regla-fina);
  background: var(--papel);
  font-family: inherit;
  font-size: var(--texto-14);
  color: var(--tinta);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pt-sugerencia:first-child { border-top: 0; }
.pt-sugerencia:hover,
.pt-sugerencia:focus-visible { background: var(--papel-sombra); }


/* 7. TABLAS ============================================================== */
.pt-tabla { width: 100%; border-collapse: collapse; }

.pt-tabla thead th {
  padding: var(--e2) var(--e3);
  background: var(--papel-sombra);
  border-bottom: var(--regla-fina);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
  text-align: left;
}

.pt-tabla td {
  padding: var(--e3);
  border-bottom: var(--regla-fina);
  vertical-align: middle;
}

/* Toda columna numérica va a la derecha y en mono tabular */
.pt-tabla .pt-cifra,
.pt-tabla th.pt-cifra {
  text-align: right;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

/* Fila de total — doble regla, como una factura */
.pt-tabla__total td {
  padding: var(--e3);
  border-top: var(--regla-tinta);
  border-bottom: 3px double var(--tinta);
  font-family: var(--fuente-mono);
  letter-spacing: 0.06em;
}
.pt-tabla__total .pt-cifra { font-size: var(--texto-20); font-weight: 600; letter-spacing: 0; }

/* Acciones de fila siempre visibles — nunca reveladas al pasar el mouse:
   en tablet no hay mouse y en el taller no hay paciencia. */
.pt-tabla__acciones { display: flex; gap: var(--e2); }


/* 8. SELLOS DE ESTADO ==================================================== */
/* Esquina cuadrada, versalitas, mono. Nunca una píldora pastel redondeada.
   El color jamás carga el significado solo: la palabra siempre está ahí. */
.pt-sello {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid var(--tinta);
  border-radius: 0;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* En vuelo: contorno tinta (RECIBIDO, EN DIAGNÓSTICO, EN REPARACIÓN) */
.pt-sello--listo     { padding: 5px 9px; border-color: var(--ok);    background: var(--ok);    color: var(--papel); }
.pt-sello--entregado { padding: 5px 9px; border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.pt-sello--atrasado  { border-color: var(--rojo); color: var(--rojo); }


/* 9. CAJAS DE AVISO ====================================================== */
/* La gramática de la caja de advertencia del manual.
   Sin toasts flotantes, sin pasteles, sin iconos de colores. */
.pt-aviso {
  border-left: 3px solid var(--info);
  background: var(--papel-sombra);
  padding: var(--e3) var(--e4);
}
.pt-aviso__titulo {
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--info);
}
.pt-aviso__cuerpo { margin-top: var(--e1); }

.pt-aviso--atencion { border-left-color: var(--precaucion); }
.pt-aviso--atencion .pt-aviso__titulo { color: var(--precaucion); }

.pt-aviso--peligro { border-left-color: var(--rojo); }
.pt-aviso--peligro .pt-aviso__titulo { color: var(--rojo); }


/* 10. FIGURAS ============================================================ */
/* Toda foto es evidencia: numerada, fechada, con marco y pie.
   Esta es la UX de gestión de imágenes, no un adorno. */
.pt-figura { margin: 0; }
.pt-figura__marco {
  border: var(--regla-tinta);
  background: var(--papel-sombra);
  padding: var(--e2);
}
.pt-figura__marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-figura__pie {
  margin-top: var(--e2);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  line-height: 1.35;
  color: var(--tinta-media);
}
/* Hueco para una figura aún no tomada */
.pt-figura--vacia .pt-figura__marco {
  border: 1px dashed var(--regla);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  color: var(--tinta-tenue);
}


/* 11. NÚMEROS DE LLAMADA ================================================= */
/* El idioma del diagrama despiezado: círculos rojos unidos por una línea.
   Sirve para pasos de un flujo y para marcar daños sobre un dibujo. */
.pt-pasos { display: flex; align-items: flex-start; }
.pt-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e2);
  width: 130px;
  flex: none;
  text-align: center;
}
.pt-llamada {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 1.5px solid var(--rojo);
  border-radius: 50%;
  background: var(--papel);
  color: var(--rojo);
  font-family: var(--fuente-mono);
  font-size: var(--texto-16);
}
.pt-llamada--activa { background: var(--rojo); color: var(--papel); font-weight: 600; }
.pt-llamada--pendiente { border-color: var(--regla); color: var(--tinta-tenue); }

.pt-paso__nombre { font-family: var(--fuente-mono); font-size: var(--texto-13); letter-spacing: 0.04em; }
.pt-paso__fecha  { font-family: var(--fuente-mono); font-size: var(--texto-13); color: var(--tinta-tenue); }

/* La línea que une dos llamadas. Roja hasta el paso actual, gris después. */
.pt-conector { flex: 1; border-top: 1px solid var(--rojo); margin-top: 17px; }
.pt-conector--pendiente { border-top-color: var(--regla); }


/* 12. BLOQUES DE CIFRA =================================================== */
/* Tablero: número grande en mono, etiqueta en versalitas, caja de hairlines.
   Sin sparklines por defecto; la tendencia se imprime como texto. */
.pt-cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--regla-tinta);
}
.pt-cifra-bloque { padding: var(--e4) var(--e4); border-right: var(--regla-fina); }
.pt-cifra-bloque:last-child { border-right: 0; }
.pt-cifra-bloque__valor {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--texto-34);
  line-height: 1.05;
}
.pt-cifra-bloque__valor--alerta { color: var(--rojo); }
.pt-cifra-bloque__etiqueta {
  margin-top: 6px;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.pt-tendencia--sube  { color: var(--ok); }
.pt-tendencia--baja  { color: var(--rojo); }


/* 13. LISTAS DE ÓRDENES ================================================== */
/* Se lee como la tabla de repuestos de un manual: escaneable a pleno sol. */
.pt-ordenes { border: var(--regla-fina); }

.pt-orden,
.pt-ordenes__encabezado {
  display: grid;
  grid-template-columns: 96px 200px 1fr 170px 150px 110px;
  gap: var(--e4);
  align-items: center;
  padding: var(--e3) var(--e4);
  border-bottom: var(--regla-fina);
}
.pt-ordenes__encabezado {
  padding: 9px var(--e4);
  background: var(--papel-sombra);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
}
.pt-orden:last-child { border-bottom: 0; }

/* La fila entera es un enlace, pero no se ve como uno: sin esto hereda el
   subrayado y el rojo globales de <a> y la lista queda toda subrayada.
   Vivia como estilo suelto en el markup de cada pantalla; el sitio es este.
   Para cualquier otro <a> que envuelva una fila o una tarjeta: .pt-enlace-bloque. */
.pt-orden,
.pt-enlace-bloque { text-decoration: none; color: inherit; }

.pt-orden__num   { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; font-size: var(--texto-16); font-weight: 600; color: var(--rojo); }
.pt-orden__placa { font-family: var(--fuente-mono); font-size: var(--texto-20); font-weight: 600; }
.pt-orden__dueno { font-size: var(--texto-14); color: var(--tinta-media); }
.pt-orden__dias  { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; font-size: var(--texto-14); text-align: right; }
.pt-orden .pt-sello { justify-self: start; }

/* Pie de lista: totales, como el pie de una factura */
.pt-ordenes__pie {
  display: flex;
  justify-content: space-between;
  padding: var(--e3) var(--e4);
  border-top: var(--regla-tinta);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Densidad B — compacta. Para el escritorio de recepción: cabe casi el
   doble de órdenes sin scroll. La placa manda; el vehículo se cae. */
.pt-ordenes--compacta .pt-orden,
.pt-ordenes--compacta .pt-ordenes__encabezado {
  grid-template-columns: 76px 116px 1fr 140px 50px;
  gap: var(--e3);
  height: 44px;
  padding: 0 var(--e4);
}
.pt-ordenes--compacta .pt-ordenes__encabezado { height: auto; padding: var(--e2) var(--e4); }
.pt-ordenes--compacta .pt-orden__num   { font-size: var(--texto-14); font-weight: 400; }
.pt-ordenes--compacta .pt-orden__placa { font-size: var(--texto-16); }
.pt-ordenes--compacta .pt-sello { padding: 3px 7px; }
.pt-ordenes--compacta .pt-sello--listo,
.pt-ordenes--compacta .pt-sello--entregado { padding: 4px 8px; }


/* 13b. PUESTA EN MARCHA (capítulo 0) ===================================== */
/* No es un wizard: el taller queda abierto con dos datos y la lista se tacha
   sola a medida que el dueño trabaja. Vive en el tablero y desaparece al
   completarse. Producto autoservicio: nadie va a configurar por teléfono. */
.pt-checklist { border: var(--regla-tinta); }
.pt-checklist__titulo {
  display: flex;
  justify-content: space-between;
  padding: var(--e3) var(--e4);
  border-bottom: var(--regla-tinta);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pt-checklist__avance { color: var(--rojo); }

.pt-pendiente {
  display: flex;
  gap: var(--e3);
  align-items: flex-start;
  min-height: var(--toque-app);
  padding: var(--e3) var(--e4);
  border-bottom: var(--regla-fina);
}
.pt-pendiente:last-of-type { border-bottom: 0; }

/* Casilla cuadrada de tinta. Marcada = llena, con el texto tachado:
   la gramática del formulario impreso, no un checkbox de sistema. */
.pt-pendiente__casilla {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--tinta);
  background: none;
}
.pt-pendiente__nombre { font-size: var(--texto-16); }
.pt-pendiente__nota { font-size: var(--texto-14); color: var(--tinta-media); margin-top: 2px; }

.pt-pendiente--hecho .pt-pendiente__casilla {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tinta);
  color: var(--papel);
  font-size: var(--texto-14);
}
.pt-pendiente--hecho .pt-pendiente__casilla::before { content: '✓'; }
.pt-pendiente--hecho .pt-pendiente__nombre { color: var(--tinta-tenue); text-decoration: line-through; }
.pt-pendiente--hecho .pt-pendiente__nota { display: none; }

.pt-checklist__pie {
  padding: var(--e3) var(--e4);
  border-top: var(--regla-tinta);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  color: var(--tinta-media);
}

/* Portada del capítulo 0 — la única pantalla con etiqueta de capítulo suelta */
.pt-portada__capitulo {
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rojo);
}


/* 13c. COBRO (capítulo 6) ================================================
   Dos modos conviven y comparten el mismo bloque de totales:
     CC-xxxxx  cuenta de cobro, numeración propia del taller, sin IVA
     FE-xxxxx  factura electrónica, resolución DIAN, con IVA y CUFE
   La DIAN es opcional: muchos talleres cobran por otro medio y el producto
   debe funcionar completo sin ella. El selector elige el modo por orden. */
.pt-modos { display: flex; border: var(--regla-tinta); }
.pt-modo {
  flex: 1;
  padding: var(--e3);
  border-left: var(--regla-tinta);
  text-align: center;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
  cursor: pointer;
}
.pt-modo:first-child { border-left: 0; }
.pt-modo--activo { background: var(--tinta); color: var(--papel); }

/* Bloque legal: resolución, rango y consecutivo. Solo en modo FE. */
.pt-resolucion {
  border: var(--regla-fina);
  background: var(--papel-sombra);
  padding: var(--e3) var(--e3);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  line-height: 1.5;
  color: var(--tinta-media);
}

/* Total del documento: la doble regla de la factura, a 26 px */
.pt-total td { border-top: var(--regla-tinta); border-bottom: 3px double var(--tinta); padding: var(--e3) 0; }
.pt-total__valor { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; font-size: var(--texto-26); font-weight: 600; text-align: right; }

/* Estados de documento — sellos, misma gramática que los de la orden */
.pt-sello--pagada   { padding: 5px 9px; border-color: var(--ok); background: var(--ok); color: var(--papel); }
.pt-sello--aceptada { padding: 5px 9px; border-color: var(--ok); background: var(--ok); color: var(--papel); }
.pt-sello--enviada  { }  /* contorno tinta: en tránsito hacia la DIAN */
.pt-sello--impaga   { border-color: var(--rojo); color: var(--rojo); }
.pt-sello--anulada  { border-color: var(--tinta-tenue); color: var(--tinta-tenue); }
.pt-doc--anulado { color: var(--tinta-tenue); }
.pt-doc--anulado .pt-cifra { text-decoration: line-through; }


/* 14. NAVEGACIÓN ========================================================= */
/* Los módulos son capítulos numerados. El número siempre en rojo y en mono;
   es la única constante que el usuario memoriza. */
.pt-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e6);
  padding: var(--e3) var(--e6);
  border-bottom: var(--regla-fina);
}
.pt-nav { display: flex; align-items: center; gap: var(--e6); }
.pt-nav__item {
  font-size: var(--texto-14);
  color: var(--tinta-media);
  text-decoration: none;
  padding-bottom: 2px;
}
.pt-nav__item::before {
  content: attr(data-cap) ' ';
  font-family: var(--fuente-mono);
  color: var(--rojo);
}
.pt-nav__item--activo {
  color: var(--tinta);
  font-weight: 700;
  border-bottom: 2px solid var(--rojo);
}
/* Capitulo aun no construido: se anuncia pero no navega */
.pt-nav__item--pronto { color: var(--tinta-tenue); cursor: default; }
.pt-nav__item--pronto::before { color: var(--tinta-tenue); }

/* Miga de pan: "4 Vehículos / 4.2 Historial" */
.pt-miga { font-family: var(--fuente-mono); font-size: var(--texto-13); color: var(--tinta-media); }
.pt-miga strong { color: var(--tinta); font-weight: 400; }

/* Filtros segmentados */
.pt-filtros { display: flex; border: var(--regla-fina); min-height: var(--toque-app); }
.pt-filtro {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--e4);
  border-left: var(--regla-fina);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-media);
  text-decoration: none;
  cursor: pointer;
}
.pt-filtro:first-child { border-left: 0; }
.pt-filtro--activo { background: var(--tinta); color: var(--papel); }
.pt-filtro--alerta { color: var(--rojo); }


/* Acceso: la portada del manual. Panel angosto centrado sobre el papel. */
.pt-acceso {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e6);
}
.pt-acceso__panel {
  width: 100%;
  max-width: 400px;
  border: var(--regla-tinta);
  border-top: 4px solid var(--rojo);
  padding: var(--e8) var(--e6);
}


/* 14b. MENU LATERAL ====================================================== */
/* La barra horizontal de capitulos aguanta siete entradas; con los maestros
   del taller se pasa. El indice del manual es vertical: los capitulos
   numerados y, debajo, los anexos -lo que el taller configura una vez y casi
   no vuelve a tocar-. Misma gramatica: numero rojo en mono, reglas, nada de
   sombras. */
.pt-marco { display: flex; min-height: 100vh; align-items: stretch; }

.pt-lateral {
  width: 232px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--e6);
  padding: var(--e4);
  border-right: var(--regla-tinta);
  background: var(--papel);
}
.pt-lateral__marca { padding-bottom: var(--e3); border-bottom: var(--regla-seccion); }
.pt-lateral__grupo { display: flex; flex-direction: column; }
.pt-lateral__titulo {
  padding: 0 0 var(--e2);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-tenue);
}
.pt-lateral__item {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  min-height: var(--toque-web);
  padding: var(--e2) var(--e2);
  border-bottom: var(--regla-fina);
  color: var(--tinta-media);
  text-decoration: none;
  font-size: var(--texto-14);
}
.pt-lateral__item:last-child { border-bottom: 0; }
.pt-lateral__item:hover { color: var(--tinta); background: var(--papel-sombra); }
.pt-lateral__num {
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
  color: var(--rojo);
  min-width: 22px;
}
/* El capitulo donde uno esta: tinta, negrita y una regla roja a la izquierda
   que hace de senalador. */
.pt-lateral__item--activo {
  color: var(--tinta);
  font-weight: 700;
  background: var(--papel-sombra);
  box-shadow: none;
  border-left: 3px solid var(--rojo);
  padding-left: calc(var(--e2) - 3px);
}
/* Capitulo anunciado pero no construido todavia. */
.pt-lateral__item--pronto { color: var(--tinta-tenue); cursor: default; }
.pt-lateral__item--pronto .pt-lateral__num { color: var(--tinta-tenue); }

/* El pie: donde estoy parado y quien soy. */
.pt-lateral__pie {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: var(--regla-fina);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  font-size: var(--texto-13);
}

.pt-lienzo { flex: 1; min-width: 0; }

/* Angosto: el indice se acuesta arriba y se desplaza de lado, en vez de
   comerse la pantalla del mostrador. */
@media (max-width: 820px) {
  .pt-marco { display: block; }
  .pt-lateral {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--e4);
    overflow-x: auto;
    border-right: 0;
    border-bottom: var(--regla-tinta);
  }
  .pt-lateral__marca { border-bottom: 0; padding-bottom: 0; }
  .pt-lateral__grupo { flex-direction: row; }
  .pt-lateral__titulo { display: none; }
  .pt-lateral__item { border-bottom: 0; white-space: nowrap; }
  .pt-lateral__item--activo { border-left: 0; border-bottom: 2px solid var(--rojo); }
  .pt-lateral__pie { margin-top: 0; padding-top: 0; border-top: 0; flex-direction: row; align-items: center; }
}


/* 15. APP =============================================================== */
/* Base 16, objetivos de 52 px: se usa de pie, con las manos sucias. */
.pt-app {
  font-size: var(--texto-16);
  --toque-web: var(--toque-app);
}
.pt-app .pt-btn { min-height: var(--toque-app); font-size: var(--texto-16); }
.pt-app .pt-input,
.pt-app .pt-select,
.pt-app .pt-textarea { min-height: var(--toque-app); font-size: var(--texto-16); }

/* En el teléfono los filtros se reparten el ancho: con dos o tres opciones,
   dejarlas apretadas a la izquierda deja media barra vacía y se lee como si
   faltara algo. En la web caben muchos y van al tamaño de su texto. */
.pt-app .pt-filtro { flex: 1; justify-content: center; }

/* El renglón de la firma: el marco de una figura, con la línea sobre la que
   se firma. Fondo papel para que el trazo se lea como tinta. */
.pt-firma {
  position: relative;
  border: var(--regla-tinta);
  background: var(--papel);
}
.pt-firma__lienzo {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;   /* o el dedo mueve la página en vez de firmar */
  cursor: crosshair;
}
.pt-firma__renglon {
  position: absolute;
  left: var(--e4);
  right: var(--e4);
  bottom: var(--e6);
  border-bottom: var(--regla-fina);
  pointer-events: none;
}
.pt-firma__pie {
  position: absolute;
  left: var(--e4);
  bottom: var(--e2);
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  color: var(--tinta-tenue);
  pointer-events: none;
}

/* Barra inferior — mismos capítulos numerados que la web */
.pt-app-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: var(--regla-tinta);
}
.pt-app-nav__item {
  padding: var(--e3) var(--e1);
  border-right: var(--regla-fina);
  text-align: center;
  text-decoration: none;
  color: var(--tinta-tenue);
}
.pt-app-nav__item:last-child { border-right: 0; }
.pt-app-nav__num    { font-family: var(--fuente-mono); font-size: var(--texto-16); }
.pt-app-nav__nombre { font-family: var(--fuente-mono); font-size: var(--texto-13); }
.pt-app-nav__item--activo { color: var(--tinta); }
.pt-app-nav__item--activo .pt-app-nav__num { color: var(--rojo); font-weight: 600; }
.pt-app-nav__item--activo .pt-app-nav__nombre { font-weight: 600; }

/* Cámara a pantalla completa: el único fondo oscuro del sistema */
.pt-camara { background: var(--tinta); color: var(--papel); }
.pt-camara .pt-tenue,
.pt-camara .pt-etiqueta { color: var(--tinta-tenue-inv); }
.pt-camara__marca {
  border: 1px solid var(--papel);
  padding: 5px 9px;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pt-camara__disparo {
  width: 68px;
  height: 68px;
  border: 3px solid var(--papel);
  border-radius: 50%;
  background: var(--rojo);
  cursor: pointer;
}

/* Dibujo de línea: sedán, hatchback, pickup, moto, camión liviano.
   Trazo 1.5 px tinta; los detalles secundarios en --tinta-tenue.
   Reemplaza toda ilustración de stock. */
.pt-linea { stroke: var(--tinta); stroke-width: 1.5; fill: none; }
.pt-linea__detalle { stroke: var(--tinta-tenue); }


/* 15.1 AVISOS: DÓNDE SALE CADA COSA ====================================== */
/* Dos canales, y no son intercambiables:
   - Lo que un formulario rechaza va PEGADO al campo que lo produjo
     (.pt-campo__aviso). Es del formulario, no de la aplicación: mandarlo
     lejos obliga a buscar qué falló.
   - Lo que le pasa a la aplicación —se encoló sin señal, terminó de
     sincronizar— va en la franja de la barra inferior (.pt-franja), porque
     no nace de ningún campo y tiene que verse sin importar dónde esté
     parado el usuario.

   La franja NO es un toast: no flota sobre el contenido, no tiene sombra ni
   esquinas redondas ni animación de entrada. Es la banda de advertencia
   impresa al pie de la página, al alcance del pulgar. Vive dentro de
   .pt-barra-inferior, junto a la navegación, para no tener que adivinar la
   altura de la barra. */

.pt-barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--papel);
  /* La app dibuja de borde a borde: --barra-abajo lo pone MainLayout con el
     inset de verdad (env(safe-area-inset-*) no funciona en el WebView de
     Android). En la web las dos valen 0 y no pasa nada. */
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--barra-abajo, 0px));
  padding-left: var(--barra-izquierda, 0px);
  padding-right: var(--barra-derecha, 0px);
}

/* 15.2 CHROME DE LA APP ================================================== */
/* En el telefono el pulgar llega abajo y la navegacion se usa dos veces al
   dia: abajo va LA ACCION de la pantalla, y los capitulos se van al indice,
   que es la tabla de contenido del manual y entra por el lado. */

.pt-barra-superior {
  /* Pegada arriba: en una orden larga hay que poder saltar a otro capitulo
     sin devolverse scrolleando hasta el principio. */
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  /* El papel llega hasta el borde y pasa por debajo del reloj; el contenido
     se separa lo que midan las barras. */
  padding: calc(var(--e2) + var(--barra-arriba, 0px))
           calc(var(--e4) + var(--barra-derecha, 0px))
           var(--e2)
           calc(var(--e4) + var(--barra-izquierda, 0px));
  border-bottom: var(--regla-tinta);
  background: var(--papel);
}

/* Boton de indice: cuadrado, mono, sin hamburguesa. Dice lo que hace. */
.pt-indice-abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--toque-app);
  padding: 0 var(--e3);
  border: var(--regla-tinta);
  background: none;
  cursor: pointer;
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta);
}

/* El indice entra por el lado. Sin sombra: se separa por su regla y por el
   velo, como una pagina que se dobla sobre la otra. */
/* Reusa .pt-lateral, pero ANULA su colapso a franja horizontal: esa regla
   existe para la web angosta (≤820px) y el telefono siempre esta por debajo
   de ese ancho, asi que sin esto el indice sale en una fila. Los selectores
   van compuestos a proposito -.pt-indice.pt-lateral pesa mas que .pt-lateral
   dentro de la media query-, que es lo que gana sin depender del orden. */
.pt-indice.pt-lateral {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: min(84vw, 320px);
  overflow-y: auto;
  padding: calc(var(--e4) + var(--barra-arriba, 0px))
           var(--e4)
           calc(var(--e4) + var(--barra-abajo, 0px))
           calc(var(--e4) + var(--barra-izquierda, 0px));
  flex-direction: column;
  align-items: stretch;
  gap: var(--e6);
  border-right: var(--regla-tinta);
  border-bottom: 0;
}
.pt-indice .pt-lateral__grupo { flex-direction: column; }
.pt-indice .pt-lateral__titulo { display: block; }
.pt-indice .pt-lateral__marca { padding-bottom: var(--e3); border-bottom: var(--regla-seccion); }
.pt-indice .pt-lateral__item { border-bottom: var(--regla-fina); }
.pt-indice .pt-lateral__item--activo { border-left: 3px solid var(--rojo); border-bottom: var(--regla-fina); }
.pt-indice .pt-lateral__pie {
  margin-top: auto;
  padding-top: var(--e4);
  border-top: var(--regla-seccion);
  flex-direction: column;
  align-items: flex-start;
}
.pt-indice__velo {
  position: fixed;
  inset: 0;
  z-index: 19;
  background: rgba(26, 26, 26, 0.45);
  border: 0;
  cursor: pointer;
}
.pt-indice__cerrar {
  min-width: var(--toque-app);
  min-height: var(--toque-app);
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--fuente-mono);
  font-size: var(--texto-20);
  color: var(--tinta-media);
}

/* La accion de la pantalla, a lo ancho y pegada al pulgar. */
.pt-accion { display: flex; }
.pt-accion .pt-btn {
  flex: 1;
  min-height: var(--toque-app);
  border-radius: 0;
}

.pt-franja {
  border-top: var(--regla-tinta);
  /* Con varios avisos encimados la franja no se puede comer la pantalla. */
  max-height: 45vh;
  overflow-y: auto;
}
.pt-franja .pt-aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  border-bottom: var(--regla-fina);
}
.pt-franja .pt-aviso:last-child { border-bottom: 0; }
.pt-franja__texto { flex: 1; min-width: 0; }
.pt-franja__cerrar {
  flex: none;
  min-width: var(--toque-app);
  min-height: var(--toque-app);
  margin: calc(var(--e3) * -1) calc(var(--e4) * -1) calc(var(--e3) * -1) 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--fuente-mono);
  font-size: var(--texto-16);
  color: var(--tinta-media);
}

/* Lo que un campo rechaza, dicho donde el campo está: texto en línea bajo el
   campo, con el prefijo ATENCIÓN en --precaución. Sin halo rojo y sin borde
   rojo en el campo — el rojo es la señal de la marca y se reserva; un
   formulario a medio llenar no es una emergencia. */
.pt-campo__aviso {
  display: block;
  margin-top: var(--e1);
  font-size: var(--texto-14);
  color: var(--tinta);
}
.pt-campo__aviso b {
  font-family: var(--fuente-mono);
  font-size: var(--texto-13);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--precaucion);
}


/* 16. RESPONSIVE ========================================================= */
/* El escritorio de recepción es una tablet tan a menudo como un PC.
   Orden de caída de columnas, definido una sola vez para todo el producto:
   trabajo → dueño → días. La placa y el estado nunca se caen. */
@media (max-width: 1100px) {
  .pt-orden,
  .pt-ordenes__encabezado { grid-template-columns: 88px 180px 1fr 150px 90px; }
  .pt-orden__trabajo,
  .pt-ordenes__encabezado > .pt-orden__trabajo { display: none; }
  .pt-cifras { grid-template-columns: repeat(2, 1fr); }
  .pt-cifra-bloque:nth-child(2) { border-right: 0; }
  .pt-cifra-bloque:nth-child(-n+2) { border-bottom: var(--regla-fina); }
}

@media (max-width: 820px) {
  .pt-pagina { padding: var(--e4); }
  .pt-orden,
  .pt-ordenes__encabezado { grid-template-columns: 80px 1fr 140px; gap: var(--e3); }
  .pt-orden__dueno,
  .pt-orden__dias { display: none; }
  .pt-rejilla > [class*="pt-col-"] { grid-column: span 12; }
  .pt-nav { display: none; }             /* el capítulo activo pasa a la miga */
  .pt-pasos { flex-wrap: wrap; gap: var(--e4); }
  .pt-conector { display: none; }
}


/* 17. IMPRESIÓN ========================================================== */
/* La orden de trabajo se imprime y se pega al parabrisas. El sistema ya es
   blanco y negro con reglas, así que casi no hay nada que corregir. */
@media print {
  .pt-barra, .pt-app-nav, .pt-filtros, .pt-btn { display: none !important; }
  body { font-size: 12pt; }
  .pt-caja, .pt-ordenes { break-inside: avoid; }
  a { color: var(--tinta); text-decoration: none; }
}