/* Estilos base de la app, sobre Bootstrap + tokens. Se carga DESPUÉS de Bootstrap. */

body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--on-background);
}

/* Identificadores de incidencia (nº de parte): mono para separar 0/O, 1/l. */
.code-ref {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Etiquetas de sección en versalitas (metadatos). */
.label-caps {
    font-size: var(--fs-label-caps);
    font-weight: var(--fw-label-caps);
    letter-spacing: var(--ls-label-caps);
    text-transform: uppercase;
    color: var(--on-surface-variant);
}

/* Chips de estado (pastilla). El color lo fija una clase por estado. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-body-sm);
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.status-received  { background: var(--status-received); color: #1a1d21; }
.status-assigned  { background: var(--status-assigned); }
.status-progress  { background: var(--status-progress); }
.status-blocked   { background: var(--status-blocked); color: #3d2c00; }
.status-signature { background: var(--status-signature); }
.status-completed { background: var(--status-completed); }
.status-urgent    { background: var(--status-urgent); }

/* Objetivo táctil mínimo para la PWA (guantes / movimiento). */
.touch-target { min-height: var(--touch-target-min); }

.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: #00459e;
    --bs-btn-hover-border-color: #00459e;
    --bs-btn-active-bg: #003b87;
}

/* ── Autocompletar (lib/combo.js) ─────────────────────────────────────────────
   Vive aquí, en la hoja COMÚN, porque lo usan el escritorio (`shell.css`) y la PWA (`pwa.css`): en
   cualquiera de las dos habría que copiarlo en la otra. El envoltorio lo crea el JS. */
.combo { position: relative; display: block; width: 100%; }
/* El envoltorio se interpone entre el campo y su contenedor (a veces un flex), así que el campo tiene
   que seguir ocupando el ancho por su cuenta: sin esto encoge al contenido en `.cap-campo`. */
.combo > input { width: 100%; }

.combo-lista {
    position: absolute;
    z-index: 1080;                    /* por encima del cuerpo de un modal de Bootstrap (1055) */
    inset-inline: 0;
    top: calc(100% + 2px);
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 15rem;
    overflow-y: auto;
    background: var(--surface, #fff);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    box-shadow: 0 6px 20px rgb(0 0 0 / 12%);
}

.combo-op {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius);
    cursor: pointer;
    /* Objetivo táctil: en la PWA se elige el parte con guantes y a pulso. */
    min-height: var(--touch-target-min);
    justify-content: center;
}
.combo-op.is-marcado { background: var(--surface-container-highest); }
/* «Crear «X»» al final de un combo que admite valores nuevos (14-10, punto 7). */
.combo-op--nuevo .combo-op-texto { color: var(--primary); font-weight: 600; }
.combo-op-texto { font-size: var(--fs-body-md); font-weight: 500; }
.combo-op-sub   { font-size: var(--fs-body-sm); color: var(--on-surface-variant); }

.combo-vacio {
    padding: 0.6rem;
    font-size: var(--fs-body-sm);
    color: var(--on-surface-variant);
    text-align: center;
}

/* ── Etiquetas (lib/etiquetas.js) ─────────────────────────────────────────────
   Selección múltiple sobre el autocompletar: lo elegido queda encima del campo como pastillas. */
.etiquetas-lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.etiqueta {
    display: inline-flex; align-items: center; gap: 0.15rem;
    padding: 0.15rem 0.2rem 0.15rem 0.65rem;
    border-radius: var(--radius-full);
    background: var(--primary-container); color: var(--on-primary-container);
    font-size: var(--fs-body-sm); font-weight: 500;
}
.etiqueta-quitar {
    display: inline-grid; place-items: center;
    width: 1.6rem; height: 1.6rem; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.etiqueta-quitar:hover { background: rgb(255 255 255 / 20%); }
.etiqueta-quitar .material-symbols-outlined { font-size: 1.05rem; }

/* ── Selector de fecha y hora (lib/fechahora.js) ──────────────────────────────
   Calendario del mes + horas + minutos a cuartos. En el escritorio el panel flota junto al campo
   (`fixed`, lo coloca el JS) con calendario y horas lado a lado; en las hojas de la PWA va en línea y
   en una columna (ver pwa.css), porque la hoja tiene su propio scroll y lo cortaría. */
.fh { position: relative; display: block; width: 100%; }
.fh-campo {
    display: flex; align-items: center; gap: 0.45rem; width: 100%;
    text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden;
}
.fh-campo .material-symbols-outlined { font-size: 1.15em; color: var(--on-surface-variant); }
.fh-campo > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.fh-vacio { color: var(--on-surface-variant); }

.fh-panel {
    position: fixed; z-index: 1080;
    width: min(36rem, calc(100vw - 1rem)); overflow-y: auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem;
    padding: 0.6rem 0.8rem;
    background: var(--surface-container-lowest, #fff);
    border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgb(0 0 0 / 14%);
}
@media (max-width: 600px) { .fh-panel { grid-template-columns: 1fr; } }
.fh-panel[hidden] { display: none; }
.fh-col > .fh-etiqueta:first-child { margin-top: 0.45rem; }
.fh-mes { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.fh-mes-titulo { font-weight: 600; text-transform: capitalize; }
.fh-nav {
    display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--on-surface); cursor: pointer;
}
.fh-nav:hover { background: var(--surface-container-high); }

.fh-dias, .fh-horas, .fh-minutos { display: grid; gap: 0.2rem; }
.fh-dias { grid-template-columns: repeat(7, 1fr); }
/* Hora y minutos lado a lado; la hora es una columna con scroll de cinco filas a la vista. */
.fh-reloj { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.6rem; align-items: start; }
.fh-reloj .fh-etiqueta { margin-top: 0.45rem; }
.fh-horas {
    position: relative;   /* offsetParent de sus botones: para centrar la elegida */
    max-height: calc(5 * 2.25rem + 4 * 0.2rem); overflow-y: auto;
    scroll-snap-type: y proximity; overscroll-behavior: contain;
    padding-right: 0.15rem;
}
.fh-horas .fh-hora { scroll-snap-align: center; }
/* Degradado arriba y abajo: dice que la columna sigue, sin barra de scroll que lo anuncie. */
.fh-horas { mask-image: linear-gradient(transparent, #000 1rem, #000 calc(100% - 1rem), transparent); }
.fh-minutos { grid-auto-rows: 2.25rem; }
.fh-dia-sem {
    text-align: center; font-size: var(--fs-body-sm); font-weight: 600;
    color: var(--on-surface-variant); padding-block: 0.2rem;
}
.fh-dia, .fh-hora, .fh-minuto {
    min-height: 2.25rem; padding: 0;
    border: 0; border-radius: var(--radius-md);
    background: transparent; color: var(--on-surface);
    font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.fh-hora, .fh-minuto { background: var(--surface-container-low); }
.fh-dia:hover, .fh-hora:hover, .fh-minuto:hover { background: var(--surface-container-high); }
.fh-dia.is-hoy { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); font-weight: 600; }
.fh-dia.is-activo, .fh-hora.is-activo, .fh-minuto.is-activo {
    background: var(--primary); color: var(--on-primary); font-weight: 600;
}
.fh-etiqueta {
    margin: 0.55rem 0 0.25rem; font-size: var(--fs-body-sm); font-weight: 600;
    color: var(--on-surface-variant); text-transform: uppercase; letter-spacing: 0.04em;
}
.fh-pie { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.fh-listo {
    padding: 0.35rem 0.9rem; border: 0; border-radius: var(--radius-full);
    background: transparent; color: var(--primary); font: inherit; font-weight: 600; cursor: pointer;
}
.fh-listo:hover { background: var(--surface-container-high); }

/* Semáforo de un pedido de material por lote (052): gris = sin cargar, naranja = falta algo (queda
   otro viaje), verde = todo cargado. Vive en app.css porque es lo único que cargan las dos capas (escritorio y PWA). */
.semaforo {
    display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 3px 8px; border-radius: var(--radius);
}
.semaforo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.semaforo--pendiente { background: var(--surface-container-highest); color: var(--on-surface-variant); }
.semaforo--parcial   { background: #fde3c8; color: #9a4700; }
.semaforo--completo  { background: #d9f2e1; color: #0e5a2c; }
/* Doble clase a propósito: gana a `.log-card`/`.fm-lote` (que fijan su propio borde) sea cual sea el orden de carga. */
.lote.lote--pendiente, .lote.lote--parcial, .lote.lote--completo { border-left-width: 4px; border-left-style: solid; }
.lote.lote--pendiente { border-left-color: var(--outline); }
.lote.lote--parcial   { border-left-color: #f08c00; }
.lote.lote--completo  { border-left-color: var(--status-progress); }