/* ============================================================ */
/* INDECO — Librería de componentes (rediseño 2026-07)          */
/* Prefijo ui- para adopción incremental sin colisiones.        */
/* Estética ANGULAR (radio 0). Táctil. Sin bordes laterales de  */
/* color: jerarquía con fondo, peso y sello superior rojo.      */
/* Requiere los tokens --ds-* de estilos.css.                   */
/* ============================================================ */

/* ---------- Tipografía utilitaria ---------- */
.ui-h1 { font-size: var(--ds-fs-2xl); font-weight: 800; color: var(--ds-tinta); letter-spacing: 0.2px; }
.ui-h2 { font-size: var(--ds-fs-xl);  font-weight: 800; color: var(--ds-tinta); text-transform: uppercase; letter-spacing: 0.5px; }
.ui-h3 { font-size: var(--ds-fs-lg);  font-weight: 700; color: var(--ds-tinta); }
.ui-text     { font-size: var(--ds-fs-base); color: var(--ds-tinta); }
.ui-text-sec { font-size: var(--ds-fs-sm);   color: var(--ds-tinta-2); }
.ui-muted    { color: var(--ds-tinta-3); }

/* ============================================================ */
/* BOTÓN                                                        */
/* ============================================================ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-sp-2);
    min-height: var(--ds-touch);
    padding: 0 var(--ds-sp-5);
    border: 2px solid transparent;
    border-radius: var(--ds-radio);
    background: var(--ds-sup-2);
    color: var(--ds-tinta);
    font-size: var(--ds-fs-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.06s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.ui-btn:active { transform: translateY(2px); }
.ui-btn:focus-visible { outline: 3px solid var(--ds-azul); outline-offset: 2px; }

.ui-btn--bloque { width: 100%; }
.ui-btn--lg { min-height: var(--ds-touch-lg); font-size: var(--ds-fs-lg); padding: 0 var(--ds-sp-6); }

.ui-btn--primario { background: var(--ds-rojo); color: #fff; border-bottom: 4px solid var(--ds-rojo-700); }
.ui-btn--primario:active { background: var(--ds-rojo-700); border-bottom-width: 2px; }

.ui-btn--add { background: var(--ds-add); color: #fff; border-bottom: 4px solid var(--ds-add-700); }
.ui-btn--add:active { background: var(--ds-add-700); border-bottom-width: 2px; }

.ui-btn--out { background: var(--ds-out); color: #fff; border-bottom: 4px solid var(--ds-out-700); }
.ui-btn--out:active { background: var(--ds-out-700); border-bottom-width: 2px; }

.ui-btn--secundario { background: var(--ds-azul); color: #fff; border-bottom: 4px solid var(--ds-azul-700); }
.ui-btn--secundario:active { background: var(--ds-azul-700); border-bottom-width: 2px; }

.ui-btn--fantasma { background: #fff; color: var(--ds-tinta); border: 2px solid var(--ds-borde); }
.ui-btn--fantasma:active { background: var(--ds-sup-2); }

.ui-btn:disabled, .ui-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ */
/* CAMPO (input / select / textarea con etiqueta)              */
/* ============================================================ */
.ui-field { display: flex; flex-direction: column; gap: var(--ds-sp-2); }
.ui-field > label {
    font-size: var(--ds-fs-sm);
    font-weight: 700;
    color: var(--ds-tinta-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.ui-input, .ui-select, .ui-textarea {
    width: 100%;
    min-height: var(--ds-touch);
    padding: 0 var(--ds-sp-4);
    border: 2px solid var(--ds-borde);
    border-radius: var(--ds-radio);
    background: #fff;
    color: var(--ds-tinta);
    font-size: var(--ds-fs-base);
    font-family: inherit;
}
.ui-textarea { padding: var(--ds-sp-3) var(--ds-sp-4); min-height: calc(var(--ds-touch) + 8px); resize: vertical; }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus {
    outline: none;
    border-color: var(--ds-rojo);
    box-shadow: 0 0 0 3px var(--ds-rojo-50);
}
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--ds-tinta-3); }
.ui-input.error, .ui-select.error { border-color: var(--ds-out); box-shadow: 0 0 0 3px var(--ds-out-50); }
.ui-hint { font-size: var(--ds-fs-xs); color: var(--ds-tinta-3); }

/* ============================================================ */
/* CARD                                                         */
/* ============================================================ */
.ui-card {
    background: var(--ds-sup);
    border: 1px solid var(--ds-borde-2);
    border-radius: var(--ds-radio);
    box-shadow: var(--ds-sombra-1);
}
.ui-card--sello { border-top: var(--ds-sello); }
.ui-card__cuerpo { padding: var(--ds-sp-5); }

/* ============================================================ */
/* BADGE / CHIP (sin bordes laterales de color)                */
/* ============================================================ */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-sp-1);
    padding: var(--ds-sp-1) var(--ds-sp-3);
    border-radius: var(--ds-radio);
    font-size: var(--ds-fs-sm);
    font-weight: 700;
    background: var(--ds-sup-2);
    color: var(--ds-tinta);
    border: 1px solid var(--ds-borde-2);
}
/* Badge de ubicación: alto contraste, borde rojo fino completo (no lateral) */
.ui-badge--ubic { background: #fff; color: var(--ds-tinta); border: 2px solid var(--ds-rojo); }
.ui-badge--ubic .ui-badge__cant { color: var(--ds-rojo); font-weight: 800; }
.ui-badge--add { background: var(--ds-add-50); color: var(--ds-add-700); border-color: transparent; }
.ui-badge--out { background: var(--ds-out-50); color: var(--ds-out-700); border-color: transparent; }
.ui-badge--neutro { background: var(--ds-sup-2); color: var(--ds-tinta-2); }

/* Contenedor de chips */
.ui-chips { display: flex; flex-wrap: wrap; gap: var(--ds-sp-2); }

/* Chip seleccionable (elegir ubicación tocando) */
.ui-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--ds-touch);
    padding: 0 var(--ds-sp-4);
    border: 2px solid var(--ds-borde);
    border-radius: var(--ds-radio);
    background: #fff;
    color: var(--ds-tinta);
    font-size: var(--ds-fs-base);
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ui-chip[aria-pressed="true"], .ui-chip.activo {
    border-color: var(--ds-rojo);
    background: var(--ds-rojo-50);
    color: var(--ds-rojo-700);
}
.ui-chip__cant { margin-left: var(--ds-sp-2); color: var(--ds-tinta-3); font-weight: 800; }

/* ============================================================ */
/* STEPPER (cantidad – N +)                                     */
/* ============================================================ */
.ui-stepper { display: inline-flex; align-items: stretch; gap: var(--ds-sp-2); }
.ui-stepper__btn {
    width: var(--ds-touch-lg);
    height: var(--ds-touch-lg);
    border: 2px solid var(--ds-borde);
    background: #fff;
    color: var(--ds-tinta);
    font-size: var(--ds-fs-2xl);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--ds-radio);
    -webkit-tap-highlight-color: transparent;
}
.ui-stepper__btn:active { background: var(--ds-sup-2); transform: translateY(2px); }
.ui-stepper__input {
    width: 110px;
    height: var(--ds-touch-lg);
    text-align: center;
    border: 2px solid var(--ds-borde);
    border-radius: var(--ds-radio);
    font-size: var(--ds-fs-xl);
    font-weight: 800;
    color: var(--ds-tinta);
}
.ui-stepper__input:focus { outline: none; border-color: var(--ds-rojo); }

/* ============================================================ */
/* CABECERA con pestañas (compartida por todas las páginas)     */
/* ============================================================ */
.ds-cab-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-3); }
.logo-cabecera { width: 170px; height: auto; }
.ds-tabs-nav { flex: 1 1 auto; justify-content: flex-end; }
.ds-tab-salir { color: var(--ds-tinta-3); }
@media (max-width: 860px) {
    .ds-cab-row { justify-content: center; }
    .ds-tabs-nav { width: 100%; justify-content: stretch; border-top: 1px solid var(--ds-borde-2); }
    .ds-tabs-nav .ui-tab { flex: 1; padding: 0 var(--ds-sp-2); }
}

/* ============================================================ */
/* PESTAÑAS (navegación táctil)                                 */
/* ============================================================ */
.ui-tabs { display: flex; gap: 0; flex-wrap: wrap; }
.ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--ds-touch);
    padding: 0 var(--ds-sp-5);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ds-tinta-2);
    font-size: var(--ds-fs-base);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ui-tab:active { background: var(--ds-sup-2); }
.ui-tab--activa { color: var(--ds-rojo); border-bottom-color: var(--ds-rojo); }

/* ============================================================ */
/* MODAL (carcasa única)                                        */
/* ============================================================ */
.ui-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(17, 24, 39, 0.55);
    padding: var(--ds-sp-4);
    overflow-y: auto;
}
.ui-modal.abierto { display: flex; align-items: flex-start; justify-content: center; }
.ui-modal__panel {
    background: var(--ds-sup);
    width: 100%;
    max-width: 640px;
    margin: var(--ds-sp-6) auto;
    border-radius: var(--ds-radio);
    border-top: var(--ds-sello);
    box-shadow: var(--ds-sombra-2);
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}
.ui-modal__panel--sm { max-width: 460px; }
.ui-modal__panel--lg { max-width: 920px; }
.ui-modal__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-sp-3);
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-bottom: 1px solid var(--ds-borde-2);
}
.ui-modal__titulo { font-size: var(--ds-fs-xl); font-weight: 800; color: var(--ds-tinta); text-transform: uppercase; letter-spacing: 0.4px; }
/* Variantes de cabecera para reforzar la acción */
.ui-modal__cab--add { background: var(--ds-add); border-bottom-color: var(--ds-add-700); }
.ui-modal__cab--add .ui-modal__titulo, .ui-modal__cab--add .ui-modal__x { color: #fff; }
.ui-modal__cab--out { background: var(--ds-out); border-bottom-color: var(--ds-out-700); }
.ui-modal__cab--out .ui-modal__titulo, .ui-modal__cab--out .ui-modal__x { color: #fff; }
.ui-modal__x {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    font-size: 28px; line-height: 1; color: var(--ds-tinta-2);
    cursor: pointer; border-radius: var(--ds-radio);
}
.ui-modal__x:active { background: rgba(0,0,0,0.08); }
.ui-modal__cuerpo { padding: var(--ds-sp-5); overflow-y: auto; }
.ui-modal__pie {
    display: flex; gap: var(--ds-sp-3);
    padding: var(--ds-sp-4) var(--ds-sp-5);
    border-top: 1px solid var(--ds-borde-2);
}
.ui-modal__pie .ui-btn { flex: 1; }

/* ============================================================ */
/* ESTADOS                                                      */
/* ============================================================ */
.ui-estado { text-align: center; padding: var(--ds-sp-7) var(--ds-sp-4); color: var(--ds-tinta-2); }
.ui-estado__titulo { font-size: var(--ds-fs-lg); font-weight: 700; color: var(--ds-tinta-2); }
.ui-spinner {
    width: 40px; height: 40px; margin: 0 auto var(--ds-sp-4);
    border: 4px solid var(--ds-borde-2);
    border-top-color: var(--ds-rojo);
    border-radius: 50%;
    animation: ui-girar 0.8s linear infinite;
}
@keyframes ui-girar { to { transform: rotate(360deg); } }

/* ---------- utilidades de layout ---------- */
.ui-stack > * + * { margin-top: var(--ds-sp-4); }
.ui-row { display: flex; gap: var(--ds-sp-3); flex-wrap: wrap; }
.ui-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-sp-4); }
@media (max-width: 560px) { .ui-grid-2 { grid-template-columns: 1fr; } }