/*
   Advance Gráfica — sistema de diseño
   ------------------------------------------------------------------
   La paleta sale del oficio, no de un tema genérico: negro de tinta,
   papel sin estucar y el azul del cian de proceso. El magenta aparece
   en un solo lugar, y siempre significa lo mismo: algo espera tu acción.

   Todo se define como variable CSS. Ninguna pantalla escribe un color
   a mano: si mañana hay que ajustar la marca, se cambia acá.
*/

/* ── Tipografía local. No se depende de internet: el sistema tiene que
      arrancar igual en la LAN de un taller sin salida a la red. ────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
    /* Tinta y papel */
    --ag-ink: #101820;
    --ag-ink-80: #2A3644;
    --ag-ink-60: #5B6670;
    --ag-ink-40: #8A939C;
    --ag-paper: #F7F7F5;
    --ag-surface: #FFFFFF;
    --ag-surface-2: #FBFBFA;
    --ag-border: #E3E4E2;
    --ag-border-fuerte: #CFD2D0;

    /* Cian de proceso: la marca */
    --ag-primary: #00629B;
    --ag-primary-oscuro: #004E7C;
    --ag-primary-claro: #E8F1F7;
    --ag-primary-borde: #B9D5E7;

    /* Magenta de proceso: reservado para "requiere tu acción" */
    --ag-accion: #D0006F;

    /* Rampa categórica de los gráficos, separada a propósito de los colores semánticos.
       El magenta de acción quiere decir una sola cosa en todo el sistema —«esto espera una
       decisión»— y prestárselo a una categoría de un gráfico lo vacía de significado. El
       violeta no significa nada en el resto del sistema, que es justo lo que se necesita acá. */
    --ag-grafico-1: #00629B;
    --ag-grafico-2: #0F7B4F;
    --ag-grafico-3: #B45309;
    --ag-grafico-4: #5C3D8F;
    --ag-grafico-5: #8A939C;
    --ag-accion-claro: #FCE8F2;

    /* Semánticos */
    --ag-exito: #0F7B4F;
    --ag-exito-claro: #E6F4ED;
    --ag-alerta: #B45309;
    --ag-alerta-claro: #FDF3E7;
    --ag-peligro: #C42B1C;
    --ag-peligro-claro: #FCEAE8;
    --ag-neutro: #5B6670;
    --ag-neutro-claro: #EFF1F0;

    /* Rail lateral */
    --ag-rail-fondo: #101820;
    --ag-rail-texto: #E8EAEC;
    --ag-rail-texto-tenue: #9AA5B0;
    --ag-rail-hover: #1B2530;
    --ag-rail-activo: #223040;
    --ag-rail-ancho: 244px;
    --ag-rail-ancho-min: 68px;
    --ag-barra-alto: 56px;

    /* Ritmo de 4 px. Densidad alta: es una herramienta de trabajo diario. */
    --ag-e1: 4px;
    --ag-e2: 8px;
    --ag-e3: 12px;
    --ag-e4: 16px;
    --ag-e5: 20px;
    --ag-e6: 24px;
    --ag-e7: 32px;
    --ag-e8: 40px;

    /* Radios diferenciados por jerarquía, no uno solo para todo */
    --ag-radio-chico: 4px;
    --ag-radio: 6px;
    --ag-radio-tarjeta: 10px;

    /* Sombras sólo donde algo flota de verdad */
    --ag-sombra-elevada: 0 4px 16px rgba(16, 24, 32, .10), 0 1px 3px rgba(16, 24, 32, .06);
    --ag-sombra-menu: 0 8px 28px rgba(16, 24, 32, .14);

    --ag-transicion: 160ms cubic-bezier(.2, .6, .3, 1);

    /* Bootstrap toma estos valores: no se pisan clases, se reconfigura la base. */
    --bs-primary: var(--ag-primary);
    --bs-primary-rgb: 0, 98, 155;
    --bs-body-color: var(--ag-ink);
    --bs-body-bg: var(--ag-paper);
    --bs-border-color: var(--ag-border);
    --bs-border-radius: var(--ag-radio);
    --bs-link-color: var(--ag-primary);
    --bs-link-hover-color: var(--ag-primary-oscuro);
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ───────────────────────────────────────────────────────── */

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: var(--bs-font-sans-serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ag-ink);
    background: var(--ag-paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.011em;
    color: var(--ag-ink);
    margin: 0;
}

h1 { font-size: 1.5rem; line-height: 1.25; }
h2 { font-size: 1.175rem; line-height: 1.3; }
h3 { font-size: 1rem; }

a {
    color: var(--ag-primary);
    text-decoration: none;
}

a:hover {
    color: var(--ag-primary-oscuro);
    text-decoration: underline;
}

/* Foco siempre visible. Se dibuja con outline para que no mueva el layout. */
:focus-visible {
    outline: 2px solid var(--ag-primary);
    outline-offset: 2px;
    border-radius: var(--ag-radio-chico);
}

button, [role="button"], .ag-clic {
    cursor: pointer;
}

/*
   Cifras tabulares en todo dato numérico. En un sistema donde se comparan
   guaraníes y medidas en columna, que los dígitos no tengan el mismo ancho
   es lo que hace que una tabla se lea mal aunque los números estén bien.
*/
.ag-num,
td.ag-num,
th.ag-num,
.ag-kpi__valor,
.ag-medida,
input[type="number"],
.ag-tabla td.text-end,
.ag-tabla th.text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.ag-num, td.ag-num, th.ag-num {
    text-align: right;
    white-space: nowrap;
}

.ag-tenue { color: var(--ag-ink-60); }
.ag-chico { font-size: 0.8125rem; }
.ag-mini  { font-size: 0.75rem; }

/* ── Estructura de la aplicación ─────────────────────────────────── */

.ag-app {
    display: flex;
    min-height: 100dvh;
}

.ag-rail {
    width: var(--ag-rail-ancho);
    flex: 0 0 var(--ag-rail-ancho);
    background: var(--ag-rail-fondo);
    color: var(--ag-rail-texto);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow: hidden;
    z-index: 1030;
}

.ag-rail__marca {
    display: flex;
    align-items: center;
    gap: var(--ag-e3);
    height: var(--ag-barra-alto);
    padding: 0 var(--ag-e4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    flex: 0 0 auto;
}

.ag-rail__logo {
    width: 28px;
    height: 28px;
    border-radius: var(--ag-radio-chico);
    background: var(--ag-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.02em;
    flex: 0 0 auto;
}

.ag-rail__nombre {
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
}

.ag-rail__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ag-e3) var(--ag-e2) var(--ag-e5);
}

.ag-rail__grupo {
    padding: var(--ag-e4) var(--ag-e3) var(--ag-e1);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ag-rail-texto-tenue);
    letter-spacing: 0.02em;
}

.ag-rail__item {
    display: flex;
    align-items: center;
    gap: var(--ag-e3);
    padding: 7px var(--ag-e3);
    margin-bottom: 1px;
    border-radius: var(--ag-radio);
    color: var(--ag-rail-texto);
    font-size: 0.875rem;
    font-weight: 450;
    position: relative;
    transition: background var(--ag-transicion), color var(--ag-transicion);
}

.ag-rail__item:hover {
    background: var(--ag-rail-hover);
    color: #fff;
    text-decoration: none;
}

.ag-rail__item i {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex: 0 0 auto;
    color: var(--ag-rail-texto-tenue);
    transition: color var(--ag-transicion);
}

.ag-rail__item:hover i { color: var(--ag-rail-texto); }

.ag-rail__item.activo {
    background: var(--ag-rail-activo);
    color: #fff;
    font-weight: 550;
}

.ag-rail__item.activo i { color: #fff; }

/* Marca de posición: una barra fina al borde, no una píldora rellena. */
.ag-rail__item.activo::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--ag-primary);
}

.ag-rail__texto {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contador de pendientes: el único uso del magenta en la navegación. */
.ag-rail__cuenta {
    flex: 0 0 auto;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--ag-accion);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.ag-rail__pie {
    flex: 0 0 auto;
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding: var(--ag-e2);
}

.ag-rail__usuario {
    display: flex;
    align-items: center;
    gap: var(--ag-e3);
    padding: var(--ag-e2) var(--ag-e3);
    border-radius: var(--ag-radio);
    color: var(--ag-rail-texto);
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
}

.ag-rail__usuario:hover {
    background: var(--ag-rail-hover);
    color: #fff;
    text-decoration: none;
}

.ag-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ag-primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex: 0 0 auto;
}

/* ── Área principal ─────────────────────────────────────────────── */

.ag-principal {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ag-barra {
    /* `flex: 0 0 auto` no es decorativo: la barra es un hijo flexible de .ag-principal, y
       sin esto el navegador la encoge para hacerle lugar al contenido. En cualquier pantalla
       más alta que la ventana —la ficha de una OT, un listado largo— la barra se aplastaba de
       56 px a 14 y cortaba el título y la ruta por la mitad. */
    flex: 0 0 auto;
    height: var(--ag-barra-alto);
    background: var(--ag-surface);
    border-bottom: 1px solid var(--ag-border);
    display: flex;
    align-items: center;
    gap: var(--ag-e4);
    padding: 0 var(--ag-e6);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.ag-barra__titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-barra__ruta {
    font-size: 0.8125rem;
    color: var(--ag-ink-60);
}

.ag-barra__ruta a { color: var(--ag-ink-60); }
.ag-barra__ruta a:hover { color: var(--ag-primary); }

.ag-buscar {
    position: relative;
    max-width: 380px;
    flex: 1 1 260px;
}

.ag-buscar i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ag-ink-40);
    font-size: 0.875rem;
    pointer-events: none;
}

.ag-buscar input {
    width: 100%;
    height: 34px;
    padding: 0 var(--ag-e3) 0 32px;
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    background: var(--ag-surface-2);
    font-size: 0.875rem;
    color: var(--ag-ink);
}

.ag-buscar input:focus {
    outline: none;
    border-color: var(--ag-primary);
    background: var(--ag-surface);
    box-shadow: 0 0 0 3px var(--ag-primary-claro);
}

.ag-contenido {
    flex: 1 1 auto;
    padding: var(--ag-e6);
    max-width: 100%;
}

/* Los formularios se leen mejor en una medida corta; las tablas van a lo ancho. */
.ag-medida-lectura { max-width: 780px; }

.ag-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ag-e4);
    margin-bottom: var(--ag-e5);
    flex-wrap: wrap;
}

.ag-encabezado__texto { min-width: 0; }

.ag-encabezado__descripcion {
    color: var(--ag-ink-60);
    font-size: 0.875rem;
    margin-top: 2px;
}

.ag-acciones {
    display: flex;
    gap: var(--ag-e2);
    flex-wrap: wrap;
    align-items: center;
}

/* ── Tarjetas ───────────────────────────────────────────────────── */

.ag-tarjeta {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
}

.ag-tarjeta__cabecera {
    padding: var(--ag-e4) var(--ag-e5);
    border-bottom: 1px solid var(--ag-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e3);
    flex-wrap: wrap;
}

.ag-tarjeta__titulo {
    font-size: 0.9375rem;
    font-weight: 600;
}

.ag-tarjeta__cuerpo { padding: var(--ag-e5); }
.ag-tarjeta__cuerpo--pegado { padding: 0; }

.ag-tarjeta__pie {
    padding: var(--ag-e3) var(--ag-e5);
    border-top: 1px solid var(--ag-border);
    background: var(--ag-surface-2);
    border-radius: 0 0 var(--ag-radio-tarjeta) var(--ag-radio-tarjeta);
}

/* ── Indicadores del panel ──────────────────────────────────────── */

.ag-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ag-e3);
    margin-bottom: var(--ag-e5);
}

.ag-kpi {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
    padding: var(--ag-e4);
    display: block;
    color: inherit;
    transition: border-color var(--ag-transicion);
}

a.ag-kpi:hover {
    border-color: var(--ag-border-fuerte);
    text-decoration: none;
    color: inherit;
}

.ag-kpi__etiqueta {
    font-size: 0.8125rem;
    color: var(--ag-ink-60);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--ag-e2);
}

.ag-kpi__valor {
    font-size: 1.625rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.ag-kpi__detalle {
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    margin-top: var(--ag-e1);
}

.ag-kpi--accion { border-color: var(--ag-accion); }
.ag-kpi--accion .ag-kpi__valor { color: var(--ag-accion); }
.ag-kpi--alerta .ag-kpi__valor { color: var(--ag-alerta); }
.ag-kpi--peligro .ag-kpi__valor { color: var(--ag-peligro); }
.ag-kpi--exito .ag-kpi__valor { color: var(--ag-exito); }

/* ── Tablas ─────────────────────────────────────────────────────── */

.ag-tabla-caja {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ag-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ag-tabla thead th {
    position: sticky;
    top: 0;
    background: var(--ag-surface-2);
    border-bottom: 1px solid var(--ag-border);
    padding: var(--ag-e3) var(--ag-e4);
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    white-space: nowrap;
    z-index: 1;
}

.ag-tabla thead th a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ag-tabla thead th a:hover { color: var(--ag-primary); text-decoration: none; }

.ag-tabla tbody td {
    padding: var(--ag-e3) var(--ag-e4);
    border-bottom: 1px solid var(--ag-border);
    vertical-align: middle;
}

/* Sin cebra: una línea fina por fila deja leer mejor una tabla densa. */
.ag-tabla tbody tr:hover { background: var(--ag-surface-2); }
.ag-tabla tbody tr:last-child td { border-bottom: 0; }

.ag-tabla__principal {
    font-weight: 550;
    color: var(--ag-ink);
}

.ag-tabla__secundario {
    display: block;
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    margin-top: 1px;
}

.ag-tabla--clic tbody tr { cursor: pointer; }

.ag-tabla__acciones {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ── Estados: color más icono, nunca color solo ─────────────────── */

.ag-estado {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: var(--ag-radio-chico);
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid transparent;
}

.ag-estado i { font-size: 0.75rem; }

.ag-estado--neutro  { background: var(--ag-neutro-claro);  color: var(--ag-ink-80);   border-color: var(--ag-border); }
.ag-estado--info    { background: var(--ag-primary-claro); color: var(--ag-primary-oscuro); border-color: var(--ag-primary-borde); }
.ag-estado--exito   { background: var(--ag-exito-claro);   color: var(--ag-exito);    border-color: #BFE0CF; }
.ag-estado--alerta  { background: var(--ag-alerta-claro);  color: var(--ag-alerta);   border-color: #F0D6B4; }
.ag-estado--peligro { background: var(--ag-peligro-claro); color: var(--ag-peligro);  border-color: #F0C4BF; }
.ag-estado--accion  { background: var(--ag-accion-claro);  color: var(--ag-accion);   border-color: #F2C2DA; }

/* Punto de color configurable por la empresa para estados de OT y sectores. */
.ag-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.ag-prioridad--Urgente { color: var(--ag-peligro); }
.ag-prioridad--Alta    { color: var(--ag-alerta); }
.ag-prioridad--Normal  { color: var(--ag-ink-60); }
.ag-prioridad--Baja    { color: var(--ag-ink-40); }

/* ── Botones ────────────────────────────────────────────────────── */

.ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--ag-e3);
    border-radius: var(--ag-radio);
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 550;
    white-space: nowrap;
    transition: background var(--ag-transicion), border-color var(--ag-transicion), color var(--ag-transicion);
    text-decoration: none;
}

.ag-btn:hover { text-decoration: none; }
.ag-btn i { font-size: 0.9375rem; }

.ag-btn--primario {
    background: var(--ag-primary);
    color: #fff;
}

.ag-btn--primario:hover { background: var(--ag-primary-oscuro); color: #fff; }

.ag-btn--suave {
    background: var(--ag-surface);
    border-color: var(--ag-border-fuerte);
    color: var(--ag-ink);
}

.ag-btn--suave:hover { background: var(--ag-surface-2); color: var(--ag-ink); }

.ag-btn--fantasma {
    background: transparent;
    color: var(--ag-ink-60);
}

.ag-btn--fantasma:hover { background: var(--ag-neutro-claro); color: var(--ag-ink); }

/* Las acciones destructivas se ven distintas y se separan del resto. */
.ag-btn--peligro {
    background: var(--ag-surface);
    border-color: #E9BDB8;
    color: var(--ag-peligro);
}

.ag-btn--peligro:hover { background: var(--ag-peligro-claro); color: var(--ag-peligro); }

.ag-btn--accion {
    background: var(--ag-accion);
    color: #fff;
}

.ag-btn--accion:hover { background: #A80059; color: #fff; }

.ag-btn--chico { height: 28px; padding: 0 var(--ag-e2); font-size: 0.8125rem; }
.ag-btn--icono { width: 34px; padding: 0; }
.ag-btn--bloque { width: 100%; }

.ag-btn:disabled,
.ag-btn.disabled {
    opacity: .45;
    pointer-events: none;
}

/* Estado de guardado: el botón dice lo que está pasando. */
.ag-btn[data-cargando="true"] { pointer-events: none; opacity: .7; }

/* ── Formularios ────────────────────────────────────────────────── */

.ag-campo { margin-bottom: var(--ag-e4); }

.ag-campo__etiqueta {
    display: block;
    font-size: 0.8125rem;
    font-weight: 550;
    margin-bottom: 5px;
    color: var(--ag-ink-80);
}

.ag-campo__requerido {
    color: var(--ag-peligro);
    margin-left: 2px;
}

.ag-campo__ayuda {
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    margin-top: 4px;
}

.ag-campo__error {
    font-size: 0.75rem;
    color: var(--ag-peligro);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ag-control,
.form-control,
.form-select {
    width: 100%;
    min-height: 36px;
    padding: 6px var(--ag-e3);
    border: 1px solid var(--ag-border-fuerte);
    border-radius: var(--ag-radio);
    background: var(--ag-surface);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--ag-ink);
    transition: border-color var(--ag-transicion), box-shadow var(--ag-transicion);
}

.ag-control:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--ag-primary);
    box-shadow: 0 0 0 3px var(--ag-primary-claro);
}

.ag-control[readonly],
.form-control[readonly] {
    background: var(--ag-surface-2);
    color: var(--ag-ink-80);
}

.ag-control:disabled,
.form-control:disabled,
.form-select:disabled {
    background: var(--ag-neutro-claro);
    color: var(--ag-ink-40);
    cursor: not-allowed;
}

.ag-control.invalido,
.form-control.is-invalid {
    border-color: var(--ag-peligro);
}

.ag-control.invalido:focus,
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--ag-peligro-claro);
}

.ag-grilla {
    display: grid;
    gap: 0 var(--ag-e4);
    grid-template-columns: repeat(12, 1fr);
}

.ag-col-12 { grid-column: span 12; }
.ag-col-8  { grid-column: span 8; }
.ag-col-7  { grid-column: span 7; }
.ag-col-6  { grid-column: span 6; }
.ag-col-5  { grid-column: span 5; }
.ag-col-4  { grid-column: span 4; }
.ag-col-3  { grid-column: span 3; }

/* Resumen de errores al pie del envío fallido. Recibe el foco. */
.ag-resumen-errores {
    background: var(--ag-peligro-claro);
    border: 1px solid #F0C4BF;
    border-radius: var(--ag-radio);
    padding: var(--ag-e3) var(--ag-e4);
    margin-bottom: var(--ag-e4);
    color: var(--ag-peligro);
    font-size: 0.875rem;
}

.ag-resumen-errores ul { margin: var(--ag-e2) 0 0; padding-left: var(--ag-e5); }
.ag-resumen-errores a { color: var(--ag-peligro); font-weight: 550; }

/* ── Filtros ────────────────────────────────────────────────────── */

.ag-filtros {
    display: flex;
    gap: var(--ag-e2);
    flex-wrap: wrap;
    align-items: flex-end;
    padding: var(--ag-e4) var(--ag-e5);
    border-bottom: 1px solid var(--ag-border);
}

.ag-filtros .ag-campo { margin-bottom: 0; min-width: 150px; }
.ag-filtros__crece { flex: 1 1 220px; }

/* ── Estados vacíos: una invitación a hacer algo, no un cartel ──── */

.ag-vacio {
    text-align: center;
    padding: var(--ag-e8) var(--ag-e5);
    color: var(--ag-ink-60);
}

.ag-vacio i {
    font-size: 2rem;
    color: var(--ag-ink-40);
    display: block;
    margin-bottom: var(--ag-e3);
}

.ag-vacio__titulo {
    font-weight: 600;
    color: var(--ag-ink);
    margin-bottom: var(--ag-e1);
}

.ag-vacio__texto { font-size: 0.875rem; margin-bottom: var(--ag-e4); }

/* ── Paginación ─────────────────────────────────────────────────── */

.ag-paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e3);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--ag-ink-60);
}

.ag-paginacion__botones { display: flex; gap: var(--ag-e1); }

/* ── Avisos ─────────────────────────────────────────────────────── */

.ag-aviso {
    display: flex;
    gap: var(--ag-e3);
    padding: var(--ag-e3) var(--ag-e4);
    border-radius: var(--ag-radio);
    border: 1px solid;
    font-size: 0.875rem;
    margin-bottom: var(--ag-e4);
    align-items: flex-start;
}

.ag-aviso i { font-size: 1rem; flex: 0 0 auto; margin-top: 1px; }
.ag-aviso--exito   { background: var(--ag-exito-claro);   border-color: #BFE0CF; color: #0B5C3B; }
.ag-aviso--peligro { background: var(--ag-peligro-claro); border-color: #F0C4BF; color: #962015; }
.ag-aviso--alerta  { background: var(--ag-alerta-claro);  border-color: #F0D6B4; color: #8A3F07; }
.ag-aviso--info    { background: var(--ag-primary-claro); border-color: var(--ag-primary-borde); color: var(--ag-primary-oscuro); }

/* Confirmación de guardado. No roba el foco: la anuncia aria-live. */
.ag-brindis {
    position: fixed;
    right: var(--ag-e5);
    bottom: var(--ag-e5);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--ag-e2);
    max-width: min(360px, calc(100vw - 32px));
}

.ag-brindis__item {
    display: flex;
    align-items: flex-start;
    gap: var(--ag-e2);
    background: var(--ag-ink);
    color: #fff;
    padding: var(--ag-e3) var(--ag-e4);
    border-radius: var(--ag-radio);
    box-shadow: var(--ag-sombra-menu);
    font-size: 0.875rem;
    animation: ag-entrar 200ms cubic-bezier(.2, .6, .3, 1);
}

.ag-brindis__item i { color: #6BD79E; }
.ag-brindis__item--error i { color: #FF9B90; }

@keyframes ag-entrar {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ── La cota: el momento donde el diseño se hace cargo del oficio ──
      3,20 × 1,80 × 2 = 11,52 m² se lee como la acotación de un plano,
      no como el resultado de un formulario. */

.ag-cota {
    display: flex;
    align-items: baseline;
    gap: var(--ag-e2);
    font-variant-numeric: tabular-nums;
    padding: var(--ag-e3) var(--ag-e4);
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-border);
    border-left: 3px solid var(--ag-primary);
    border-radius: 0 var(--ag-radio) var(--ag-radio) 0;
    flex-wrap: wrap;
}

.ag-cota__formula {
    font-size: 0.9375rem;
    color: var(--ag-ink-60);
    letter-spacing: 0.01em;
}

.ag-cota__igual { color: var(--ag-ink-40); }

.ag-cota__resultado {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ag-ink);
}

.ag-cota__unidad {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ag-ink-60);
}

/* ── Espina del proceso: presupuesto, OT, producción, entrega, cobro ──
      Se numera porque es de verdad una secuencia. */

.ag-espina {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: var(--ag-e2) 0;
}

.ag-espina__paso {
    flex: 1 1 0;
    min-width: 128px;
    padding: var(--ag-e3) var(--ag-e4);
    border-top: 3px solid var(--ag-border);
    position: relative;
}

.ag-espina__paso--hecho { border-top-color: var(--ag-exito); }
.ag-espina__paso--actual { border-top-color: var(--ag-primary); }
.ag-espina__paso--traba { border-top-color: var(--ag-accion); }

.ag-espina__orden {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ag-ink-40);
    font-variant-numeric: tabular-nums;
}

.ag-espina__nombre {
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 2px;
}

.ag-espina__dato {
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.ag-espina__paso--hecho .ag-espina__orden { color: var(--ag-exito); }
.ag-espina__paso--actual .ag-espina__nombre { color: var(--ag-primary); }
.ag-espina__paso--traba .ag-espina__nombre { color: var(--ag-accion); }

/* ── Tablero de producción ──────────────────────────────────────── */

.ag-tablero {
    display: flex;
    gap: var(--ag-e3);
    overflow-x: auto;
    padding-bottom: var(--ag-e3);
    align-items: flex-start;
}

.ag-columna {
    flex: 0 0 288px;
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 200px);
}

.ag-columna__cabecera {
    padding: var(--ag-e3) var(--ag-e4);
    border-bottom: 1px solid var(--ag-border);
    display: flex;
    align-items: center;
    gap: var(--ag-e2);
    position: sticky;
    top: 0;
    background: var(--ag-surface-2);
    border-radius: var(--ag-radio-tarjeta) var(--ag-radio-tarjeta) 0 0;
    z-index: 1;
}

.ag-columna__nombre { font-size: 0.8125rem; font-weight: 600; flex: 1 1 auto; }

.ag-columna__cuenta {
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    font-variant-numeric: tabular-nums;
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: 10px;
    padding: 0 7px;
}

.ag-columna__lista {
    padding: var(--ag-e2);
    display: flex;
    flex-direction: column;
    gap: var(--ag-e2);
    overflow-y: auto;
    min-height: 60px;
}

.ag-ficha {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    padding: var(--ag-e3);
    display: block;
    color: inherit;
    transition: border-color var(--ag-transicion), box-shadow var(--ag-transicion);
}

.ag-ficha:hover {
    border-color: var(--ag-border-fuerte);
    box-shadow: var(--ag-sombra-elevada);
    text-decoration: none;
    color: inherit;
}

.ag-ficha__alto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e2);
    margin-bottom: 5px;
}

.ag-ficha__numero {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ag-primary);
    font-variant-numeric: tabular-nums;
}

.ag-ficha__titulo {
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.35;
    margin-bottom: 3px;
    overflow-wrap: anywhere;
}

.ag-ficha__cliente {
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    margin-bottom: var(--ag-e2);
    overflow-wrap: anywhere;
}

.ag-ficha__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e2);
    font-size: 0.6875rem;
    color: var(--ag-ink-60);
}

.ag-ficha--atrasada { border-left: 3px solid var(--ag-peligro); }
.ag-ficha--urgente  { border-left: 3px solid var(--ag-alerta); }

/* ── Menú desplegable ───────────────────────────────────────────── */

.dropdown-menu {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    box-shadow: var(--ag-sombra-menu);
    padding: var(--ag-e1);
    font-size: 0.875rem;
}

.dropdown-item {
    border-radius: var(--ag-radio-chico);
    padding: 6px var(--ag-e3);
    display: flex;
    align-items: center;
    gap: var(--ag-e2);
}

.dropdown-item:active { background: var(--ag-primary); }
.dropdown-item.text-danger:hover { background: var(--ag-peligro-claro); }
.dropdown-divider { margin: var(--ag-e1) 0; border-color: var(--ag-border); }

.modal-content {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
}

.modal-header, .modal-footer { border-color: var(--ag-border); }

/* ── Ingreso ────────────────────────────────────────────────────── */

.ag-ingreso {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    background: var(--ag-paper);
}

.ag-ingreso__panel {
    display: grid;
    place-items: center;
    padding: var(--ag-e6);
}

.ag-ingreso__caja { width: 100%; max-width: 380px; }

.ag-ingreso__lateral {
    display: none;
    background: var(--ag-ink);
    color: var(--ag-rail-texto);
    padding: var(--ag-e8);

    /* Dos filas: la frase se centra en el espacio libre —a la misma altura que el
       formulario de la izquierda, que es lo que hace que la pantalla partida se lea
       como una sola composición— y el crédito queda abajo. Con space-between, en un
       monitor alto el medio del panel quedaba vacío y parecía una pantalla sin terminar. */
    grid-template-rows: 1fr auto;
    align-items: center;
}

.ag-ingreso__frase {
    /* Crece con el ancho del panel: en un monitor de taller la frase es lo primero
       que se ve, y a 1,5 rem fijo se perdía en medio del negro. */
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff;
    max-width: 26ch;
}

.ag-ingreso__pasos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ag-e2);
    margin-top: var(--ag-e5);
}

.ag-ingreso__paso {
    font-size: 0.8125rem;
    color: var(--ag-rail-texto-tenue);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    padding: 3px 11px;
}

@media (min-width: 992px) {
    .ag-ingreso { grid-template-columns: 1fr 1fr; }
    .ag-ingreso__lateral { display: grid; }
}

/* ── Responsive ─────────────────────────────────────────────────── */

.ag-rail__cerrar,
.ag-barra__menu { display: none; }

@media (max-width: 991.98px) {
    .ag-rail {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        transition: transform var(--ag-transicion);
        box-shadow: var(--ag-sombra-menu);
    }

    .ag-app.rail-abierto .ag-rail { transform: none; }

    .ag-velo {
        position: fixed;
        inset: 0;
        background: rgba(16, 24, 32, .5);
        z-index: 1025;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--ag-transicion);
    }

    .ag-app.rail-abierto .ag-velo { opacity: 1; pointer-events: auto; }

    .ag-barra__menu,
    .ag-rail__cerrar { display: inline-flex; }

    .ag-barra { padding: 0 var(--ag-e4); }
    .ag-contenido { padding: var(--ag-e4); }

    body { font-size: 15px; }

    /* 16 px en los controles: por debajo, iOS hace zoom al enfocar. */
    .ag-control, .form-control, .form-select, .ag-buscar input { font-size: 16px; }

    .ag-grilla > [class*="ag-col-"] { grid-column: span 12; }

    /* Todo lo que se toca llega a 44 px en pantalla chica. */
    .ag-btn { height: 44px; padding: 0 var(--ag-e4); }
    .ag-btn--chico { height: 38px; }
    .ag-btn--icono { width: 44px; }
    .ag-rail__item { padding: 11px var(--ag-e3); }
    .ag-tabla tbody td { padding: var(--ag-e4); }

    .ag-columna { flex-basis: 84vw; }
}

/*
   En el celular la tabla no se encoge: se convierte en una lista de fichas.
   Achicar una tabla de escritorio deja columnas ilegibles justo cuando el
   operario está parado frente a la máquina con una mano ocupada.
*/
@media (max-width: 767.98px) {
    .ag-tabla--fichas thead { display: none; }

    .ag-tabla--fichas tbody tr {
        display: block;
        border: 1px solid var(--ag-border);
        border-radius: var(--ag-radio-tarjeta);
        margin-bottom: var(--ag-e2);
        padding: var(--ag-e3);
        background: var(--ag-surface);
    }

    .ag-tabla--fichas tbody td {
        display: flex;
        align-items: center;
        gap: var(--ag-e3);
        border: 0;
        padding: 5px 0;
        text-align: right;
    }

    /* La etiqueta empuja con `margin-inline-end: auto` en vez de que el td use
       `space-between`: hay celdas con dos valores —«en 5 días» y la fecha— y
       repartiendo el espacio entre los tres, el primero quedaba flotando en el medio,
       alineado con nada. Así la etiqueta queda a la izquierda y los valores juntos
       a la derecha, sin importar cuántos sean. */
    .ag-tabla--fichas tbody td::before {
        content: attr(data-etiqueta);
        font-size: 0.75rem;
        color: var(--ag-ink-60);
        font-weight: 550;
        text-align: left;
        flex: 0 0 auto;
        margin-inline-end: auto;
    }

    .ag-tabla--fichas tbody td:first-child {
        display: block;
        text-align: left;
        padding-bottom: var(--ag-e2);
        border-bottom: 1px solid var(--ag-border);
        margin-bottom: var(--ag-e2);
    }

    .ag-tabla--fichas tbody td:first-child::before { content: none; }
    .ag-tabla--fichas .ag-tabla__acciones { justify-content: flex-end; width: auto; }

    .ag-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .ag-kpi__valor { font-size: 1.375rem; }
}

/* ── Reconexión de Blazor ────────────────────────────────────────────
      El cartel que aparece cuando se corta la red en las tres pantallas con
      circuito. Está oculto salvo que Blazor le ponga una de sus clases. */

.ag-reconexion {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(16, 24, 32, .55);
    backdrop-filter: blur(2px);
    place-items: center;
    padding: var(--ag-e4);
}

.ag-reconexion.components-reconnect-show,
.ag-reconexion.components-reconnect-failed,
.ag-reconexion.components-reconnect-rejected { display: grid; }

.ag-reconexion__caja {
    background: var(--ag-surface);
    border-radius: var(--ag-radio-tarjeta);
    box-shadow: 0 18px 48px rgba(16, 24, 32, .28);
    padding: var(--ag-e6);
    max-width: 420px;
    text-align: center;
}

.ag-reconexion__caja strong { display: block; margin-bottom: var(--ag-e2); }
.ag-reconexion__caja p { margin: 0 0 var(--ag-e4); color: var(--ag-ink-60); font-size: .875rem; }
.ag-reconexion__caja p:last-child { margin-bottom: 0; }
.ag-reconexion__caja i { font-size: 1.75rem; color: var(--ag-alerta); display: block; margin-bottom: var(--ag-e3); }

/* Cada estado muestra su propio bloque. */
.ag-reconexion__reintentando,
.ag-reconexion__caida,
.ag-reconexion__rechazada { display: none; }

.components-reconnect-show .ag-reconexion__reintentando,
.components-reconnect-failed .ag-reconexion__caida,
.components-reconnect-rejected .ag-reconexion__rechazada { display: block; }

/* Hilo de progreso: dice que algo está pasando sin prometer cuándo termina. */
.ag-reconexion__hilo {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: var(--ag-surface-2);
    margin-bottom: var(--ag-e4);
    overflow: hidden;
    position: relative;
}

.ag-reconexion__hilo::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 40%;
    border-radius: 999px;
    background: var(--ag-primary);
    animation: ag-reconexion-hilo 1.4s ease-in-out infinite;
}

@keyframes ag-reconexion-hilo {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

/* Sin movimiento para quien lo pidió: la barra queda quieta y llena. */
@media (prefers-reduced-motion: reduce) {
    .ag-reconexion__hilo::after { animation: none; width: 100%; }
}

/* ── Impresión ──────────────────────────────────────────────────── */

@media print {
    .ag-rail, .ag-barra, .ag-acciones, .ag-filtros, .ag-paginacion, .ag-velo,
    .ag-brindis, .ag-reconexion, .no-imprimir { display: none !important; }

    body { background: #fff; font-size: 11pt; }
    .ag-app { display: block; }
    .ag-contenido { padding: 0; }
    .ag-tarjeta { border: 0; }
    .ag-tabla { font-size: 10pt; }
    .ag-tabla thead th { background: #fff; border-bottom: 1px solid #000; }
    a { color: #000; text-decoration: none; }
    .solo-imprimir { display: block !important; }
}

.solo-imprimir { display: none; }

/* ── Movimiento reducido ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Enlace para saltar al contenido, primero en el orden de tabulación. */
.ag-saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ag-primary);
    color: #fff;
    padding: var(--ag-e2) var(--ag-e4);
    border-radius: 0 0 var(--ag-radio) 0;
    z-index: 2000;
}

.ag-saltar:focus {
    left: 0;
    color: #fff;
}

/* ── Instalación en obra ─────────────────────────────────────────────
      Todo este bloque está dimensionado para un celular sostenido con una mano:
      objetivos de 44px, texto de 16px y nada que dependa de apuntar con precisión. */

.ag-obra {
    display: flex;
    align-items: flex-start;
    gap: var(--ag-e3);
    padding: var(--ag-e3) var(--ag-e4);
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-border);
    border-left: 3px solid var(--ag-primary);
    border-radius: 0 var(--ag-radio) var(--ag-radio) 0;
}

.ag-obra > i {
    color: var(--ag-primary);
    font-size: 1.25rem;
    line-height: 1.3;
}

.ag-obra__direccion {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.ag-obra__nota {
    display: block;
    font-size: 0.875rem;
    color: var(--ag-ink-60);
    margin-top: 2px;
}

/* Momento de la obra: antes, durante, después, problemas. */

.ag-momento + .ag-momento {
    margin-top: var(--ag-e5);
    padding-top: var(--ag-e4);
    border-top: 1px solid var(--ag-border);
}

.ag-momento__cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e3);
    margin-bottom: var(--ag-e3);
    flex-wrap: wrap;
}

.ag-momento__titulo {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* La etiqueta hace de botón para el campo de archivo, que queda oculto:
   así se ve un botón del sistema y no el control gris del navegador. */
.ag-momento__subir label {
    cursor: pointer;
    margin: 0;
}

.ag-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--ag-e3);
}

.ag-galeria__item {
    margin: 0;
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    overflow: hidden;
    background: var(--ag-surface-2);
}

.ag-galeria__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.ag-galeria__item figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ag-e2);
    padding: 6px var(--ag-e2);
    font-size: 0.75rem;
    color: var(--ag-ink-60);
}

.ag-galeria__quitar {
    background: none;
    border: 0;
    color: var(--ag-peligro);
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--ag-radio-chico);
    min-height: 32px;
}

.ag-galeria__quitar:hover { background: var(--ag-peligro-claro); }

/* Firma: el lienzo donde firma el cliente y la firma ya guardada. */

.ag-firma-pad {
    position: relative;
    border: 1px dashed var(--ag-border-fuerte);
    border-radius: var(--ag-radio);
    background: #fff;
    /* La línea sobre la que se firma, como en un remito de papel. */
    background-image: linear-gradient(to right, var(--ag-border) 50%, transparent 50%);
    background-size: 8px 1px;
    background-repeat: repeat-x;
    background-position: center bottom 34px;
}

.ag-firma-pad canvas {
    display: block;
    width: 100%;
    height: 200px;
    touch-action: none;
    cursor: crosshair;
}

.ag-firma-pad__limpiar {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-chico);
    font-size: 0.75rem;
    padding: 4px 8px;
    color: var(--ag-ink-60);
    min-height: 32px;
}

.ag-firma {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    padding: var(--ag-e3);
    background: #fff;
    text-align: center;
}

.ag-firma img {
    max-height: 160px;
    margin: 0 auto;
}

.ag-firma__pie {
    display: block;
    margin-top: var(--ag-e2);
    padding-top: var(--ag-e2);
    border-top: 1px solid var(--ag-border);
    font-size: 0.75rem;
    color: var(--ag-ink-60);
}

.ag-lista-simple {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ag-lista-simple li + li { margin-top: 4px; }

@media print {
    .ag-firma-pad, .ag-momento__subir, .ag-galeria__quitar { display: none !important; }
}

/* Fila seleccionada en una lista maestro-detalle, como la de roles. */
.ag-fila--activa {
    background: var(--ag-surface-2);
    box-shadow: inset 3px 0 0 var(--ag-primary);
}

/* ── Barra de composición ────────────────────────────────────────────
      Reparto de un total en partes. Sin librería de gráficos: son cinco
      divs con un ancho porcentual, y así imprime y escala igual de bien.

      Se llama `ag-composicion` y no `ag-barra` porque ese nombre ya es el de la
      barra superior de la aplicación: mientras se llamó igual, esta regla —que
      viene después en el archivo— le imponía 14 px de alto a la barra de TODAS
      las pantallas y le cortaba el título por la mitad. */

.ag-composicion {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--ag-surface-2);
    border: 1px solid var(--ag-border);
}

.ag-composicion__parte { display: block; height: 100%; }

.ag-punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: baseline;
}

.ag-composicion__parte--materiales,    .ag-punto--materiales   { background: var(--ag-grafico-1); }
.ag-composicion__parte--manodeobra,    .ag-punto--manodeobra   { background: var(--ag-grafico-2); }
.ag-composicion__parte--tercerización, .ag-punto--tercerización{ background: var(--ag-grafico-3); }
.ag-composicion__parte--instalación,   .ag-punto--instalación  { background: var(--ag-grafico-4); }
.ag-composicion__parte--otros,         .ag-punto--otros        { background: var(--ag-grafico-5); }

/* Detalle de cambios en la bitácora. <details> nativo: sin JavaScript y accesible por teclado. */
.ag-cambios { margin-top: var(--ag-e2); }

.ag-cambios > summary {
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--ag-primary);
    padding: 2px 0;
}

.ag-cambios[open] > summary { margin-bottom: var(--ag-e2); }

/* ── Página pública de aprobación ────────────────────────────────────
      La ve un cliente, en su celular, una sola vez. Nada de barra lateral,
      nada de menú: el arte, y dos botones. */

.ag-publico {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--ag-e5) var(--ag-e4) var(--ag-e7);
}

.ag-publico__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ag-e4);
    padding-bottom: var(--ag-e4);
    border-bottom: 1px solid var(--ag-border);
    margin-bottom: var(--ag-e5);
}

.ag-publico__empresa {
    font-size: 0.8125rem;
    color: var(--ag-ink-60);
    text-transform: none;
}

.ag-publico__titulo {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    margin: 2px 0 0;
}

.ag-publico__orden {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ag-ink-60);
}

.ag-publico__intro {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: var(--ag-e5);
}

.ag-publico__arte {
    margin: 0 0 var(--ag-e5);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
    overflow: hidden;
    background: var(--ag-surface-2);
}

.ag-publico__arte img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
}

.ag-publico__descarga {
    padding: var(--ag-e7) var(--ag-e4);
    text-align: center;
    color: var(--ag-ink-60);
}

.ag-publico__descarga i { font-size: 2rem; display: block; margin-bottom: var(--ag-e3); }

.ag-publico__arte figcaption {
    padding: var(--ag-e3) var(--ag-e4);
    font-size: 0.8125rem;
    color: var(--ag-ink-60);
    border-top: 1px solid var(--ag-border);
    background: var(--ag-surface);
}

.ag-publico__respuesta {
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio-tarjeta);
    padding: var(--ag-e5);
    background: var(--ag-surface);
}

.ag-publico__acciones {
    display: flex;
    gap: var(--ag-e3);
    margin-top: var(--ag-e4);
    flex-wrap: wrap;
}

.ag-publico__acciones .ag-btn { flex: 1 1 200px; }

.ag-publico__nota {
    margin: var(--ag-e4) 0 0;
    font-size: 0.75rem;
    color: var(--ag-ink-60);
    text-align: center;
}

/* ── Tres estados: conforme, no conforme, sin revisar ────────────────
      Radios nativos estilizados. Sin JavaScript, accesible por teclado, y
      con área de toque cómoda para usarlo parado frente a la máquina. */

.ag-tres-estados {
    display: inline-flex;
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    overflow: hidden;
}

.ag-tres-estados label { margin: 0; cursor: pointer; }

.ag-tres-estados input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ag-tres-estados span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    min-height: 40px;
    color: var(--ag-ink-60);
    border-right: 1px solid var(--ag-border);
    white-space: nowrap;
}

.ag-tres-estados label:last-child span { border-right: 0; }

.ag-tres-estados input:checked + .ag-tres-estados__si {
    background: var(--ag-exito);
    color: #fff;
}

.ag-tres-estados input:checked + .ag-tres-estados__no {
    background: var(--ag-peligro);
    color: #fff;
}

.ag-tres-estados input:checked + .ag-tres-estados__sin {
    background: var(--ag-surface-2);
    color: var(--ag-ink);
}

.ag-tres-estados input:focus-visible + span {
    outline: 2px solid var(--ag-primary);
    outline-offset: -2px;
}

/* ── Calendario del planificador ─────────────────────────────────────
      Rejilla de días. En celular se apila: siete columnas de 40px no las
      lee nadie, y quien mira el calendario en el teléfono quiere el día. */

.ag-calendario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--ag-e2);
}

.ag-dia {
    background: var(--ag-surface);
    border: 1px solid var(--ag-border);
    border-radius: var(--ag-radio);
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.ag-dia--hoy { border-color: var(--ag-primary); box-shadow: 0 0 0 1px var(--ag-primary); }
.ag-dia--finde { background: var(--ag-surface-2); }

.ag-dia__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: var(--ag-e2) var(--ag-e3);
    border-bottom: 1px solid var(--ag-border);
}

.ag-dia__nombre {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ag-ink-60);
    margin-right: 6px;
}

.ag-dia__fecha { font-size: 1.125rem; font-weight: 650; }

.ag-dia--hoy .ag-dia__fecha { color: var(--ag-primary); }

.ag-dia__cuenta {
    font-size: 0.75rem;
    background: var(--ag-surface-2);
    border-radius: 999px;
    padding: 1px 8px;
    color: var(--ag-ink-60);
}

.ag-dia__carga { height: 3px; background: var(--ag-surface-2); }
.ag-dia__carga span { display: block; height: 100%; background: var(--ag-primary); }

.ag-dia__cuerpo {
    padding: var(--ag-e2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ag-dia__vacio { color: var(--ag-ink-40); text-align: center; margin: auto 0; }

.ag-compromiso {
    display: block;
    border-left: 3px solid var(--ag-border-fuerte);
    border-radius: var(--ag-radio-chico);
    background: var(--ag-surface-2);
    padding: 6px 8px;
    font-size: 0.75rem;
    color: inherit;
    text-decoration: none;
}

a.ag-compromiso:hover { background: var(--ag-border); text-decoration: none; color: inherit; }

.ag-compromiso__titulo { display: block; font-weight: 600; }
.ag-compromiso__cliente { display: block; color: var(--ag-ink-60); }

.ag-compromiso--cerrado { opacity: 0.5; }

.ag-compromiso--entrega { border-left-color: var(--ag-primary); }
.ag-compromiso--instalacion { border-left-color: var(--ag-accion); }
.ag-compromiso--tercerizacion { border-left-color: var(--ag-alerta); }
.ag-compromiso--presupuesto { border-left-color: var(--ag-exito); }

.ag-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ag-e2);
}

.ag-leyenda .ag-compromiso { display: inline-block; }