/* ============================================================
   CRM Impo Salon - itage2.css
   CSS NUEVO Y PROPIO. Replica visualmente el Panel ITAGE
   (paleta, tipografia Inter, iconos Material Symbols Rounded,
   patrones de componentes) SIN importar ni referenciar
   styles.css ni ningun archivo de un producto ITAGE existente.
   Todas las clases usan el prefijo propio "it2-".
   Requerimientos: R5.1, R5.2, R5.3, R5.4, R5.5.
   ============================================================ */

/* ---- Tokens de diseño (paleta R5.2, replicada como referencia) ---- */
:root {
    --it2-green: #00b894;
    --it2-green-dark: #00a381;
    --it2-coral: #e17055;
    --it2-blue: #0984e3;
    --it2-blue-soft: #74b9ff;
    --it2-gray: #2d3436;
    --it2-muted: #636e72;
    --it2-muted-soft: #b2bec3;
    --it2-bg: #f8f9fa;
    --it2-bg-alt: #f6f8fb;
    --it2-surface: #ffffff;
    --it2-border: #e9ecef;
    --it2-border-soft: #f1f3f5;
    --it2-input-border: #dfe6e9;

    /* Colores de estado (equivalentes propios) */
    --it2-green-bg: #e6fff6;
    --it2-coral-bg: #ffeaea;
    --it2-blue-bg: #e8f4fd;
    --it2-orange: #f39c12;
    --it2-orange-bg: #fef9e7;

    --it2-radius: 8px;
    --it2-radius-lg: 12px;
    --it2-sidebar-w: 240px;
    --it2-header-h: 60px;
    --it2-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    font-family: var(--it2-font);
    background: var(--it2-bg);
    color: var(--it2-gray);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    user-select: none;
}

/* ---- Bootstrap / carga inicial ---- */
.it2-boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 100vh;
    color: var(--it2-muted);
}
.it2-boot__spinner {
    font-size: 40px;
    color: var(--it2-green);
    animation: it2-spin 1s linear infinite;
}
.it2-boot__text { font-size: 0.9rem; }
@keyframes it2-spin { to { transform: rotate(360deg); } }

/* ============================================================
   LAYOUT: sidebar + header (equivalente propio a .header / nav lateral)
   ============================================================ */
.it2-app { min-height: 100vh; }

.it2-shell {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar / menu lateral (R5.1) ---- */
.it2-sidebar {
    width: var(--it2-sidebar-w);
    background: var(--it2-surface);
    border-right: 1px solid var(--it2-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.it2-sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--it2-border);
}
.it2-sidebar__brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--it2-green) 0%, var(--it2-blue) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.it2-sidebar__brand-text { line-height: 1.2; }
.it2-sidebar__brand-title { font-size: 0.95rem; font-weight: 700; color: var(--it2-gray); }
.it2-sidebar__brand-sub { font-size: 0.68rem; color: var(--it2-muted); }

.it2-nav { padding: 12px 0; flex: 1; }
.it2-nav__group-title {
    padding: 14px 20px 6px;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--it2-muted-soft);
}
.it2-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 20px;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.83rem;
    color: var(--it2-muted);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
.it2-nav__item:hover { background: var(--it2-bg); color: var(--it2-gray); }
.it2-nav__item.is-active {
    background: var(--it2-border-soft);
    color: var(--it2-gray);
    font-weight: 600;
    border-left-color: var(--it2-coral);
}
.it2-nav__item .material-symbols-rounded { font-size: 20px; }

/* ---- Columna principal ---- */
.it2-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Header superior (equivalente propio a .header) ---- */
.it2-header {
    background: var(--it2-surface);
    border-bottom: 1px solid var(--it2-border);
    padding: 0 28px;
    height: var(--it2-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}
.it2-header__left { display: flex; align-items: center; gap: 12px; }
.it2-header__toggle {
    display: none;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--it2-muted);
}
.it2-header__title { font-size: 1.05rem; font-weight: 700; color: var(--it2-gray); }
.it2-header__right { display: flex; align-items: center; gap: 18px; }
.it2-header__date { font-size: 0.78rem; color: var(--it2-muted); }
.it2-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 16px;
    border-left: 1px solid var(--it2-border);
}
.it2-user__name { font-size: 0.8rem; font-weight: 500; color: var(--it2-gray); }
.it2-user__role {
    font-size: 0.7rem;
    color: var(--it2-muted);
    background: var(--it2-border-soft);
    padding: 3px 10px;
    border-radius: 20px;
}

/* ---- Area de contenido ---- */
.it2-content { padding: 24px 28px 80px; flex: 1; }
.it2-view__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
    flex-wrap: wrap;
}
.it2-view__title { font-size: 1.2rem; font-weight: 700; color: var(--it2-gray); }
.it2-view__subtitle { font-size: 0.82rem; color: var(--it2-muted); margin-top: 2px; }

/* ============================================================
   COMPONENTES (equivalentes propios a los patrones del Panel ITAGE, R5.3)
   ============================================================ */

/* ---- Cards ---- */
.it2-card {
    background: var(--it2-surface);
    border: 1px solid var(--it2-border);
    border-radius: var(--it2-radius);
    padding: 20px 24px;
}

/* ---- Stat cards (equivalente propio a .stat-card) ---- */
.it2-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.it2-stat-card {
    background: var(--it2-surface);
    border: 1px solid var(--it2-border);
    border-radius: var(--it2-radius);
    padding: 16px 20px;
    text-align: center;
}
.it2-stat-card__label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--it2-muted);
    margin-bottom: 6px;
}
.it2-stat-card__value { font-size: 1.9rem; font-weight: 700; color: var(--it2-gray); }
.it2-stat-card__sub { font-size: 0.7rem; color: var(--it2-muted-soft); margin-top: 4px; }
.it2-stat-card__value--green { color: var(--it2-green); }
.it2-stat-card__value--coral { color: var(--it2-coral); }
.it2-stat-card__value--blue { color: var(--it2-blue); }

/* ---- Barra de filtros (equivalente propio a .filters-bar) ---- */
.it2-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    background: var(--it2-surface);
    border: 1px solid var(--it2-border);
    border-radius: var(--it2-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* ---- Inputs, selects, textarea ---- */
.it2-input, .it2-select, .it2-textarea {
    padding: 9px 12px;
    border: 1px solid var(--it2-input-border);
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    background: var(--it2-bg);
    color: var(--it2-gray);
    transition: border-color 0.2s, background 0.2s;
}
.it2-input:focus, .it2-select:focus, .it2-textarea:focus {
    border-color: var(--it2-blue-soft);
    background: var(--it2-surface);
}
.it2-input--grow { flex: 1; min-width: 200px; }
.it2-select { cursor: pointer; min-width: 120px; }
.it2-textarea { width: 100%; resize: vertical; min-height: 80px; }

/* ---- Formularios ---- */
.it2-form { max-width: 640px; }
.it2-form__group { margin-bottom: 16px; }
.it2-form__label {
    display: block;
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--it2-muted);
    margin-bottom: 4px;
}
.it2-form__hint {
    font-size: 0.8rem;
    color: var(--it2-muted);
    margin: 0 0 12px;
}
.it2-form__group .it2-input,
.it2-form__group .it2-select,
.it2-form__group .it2-textarea { width: 100%; }
.it2-form__row { display: flex; gap: 16px; flex-wrap: wrap; }
.it2-form__row .it2-form__group { flex: 1; min-width: 180px; }
.it2-form__actions { display: flex; gap: 12px; margin-top: 20px; }

/* ---- Botones (equivalente propio a .btn) ---- */
.it2-btn {
    padding: 8px 16px;
    border-radius: var(--it2-radius);
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.it2-btn .material-symbols-rounded { font-size: 18px; }
.it2-btn--primary { background: var(--it2-green); color: #fff; }
.it2-btn--primary:hover { background: var(--it2-green-dark); }
.it2-btn--danger { background: var(--it2-coral-bg); color: var(--it2-coral); }
.it2-btn--danger:hover { background: #ffdbdb; }
.it2-btn--outline {
    background: var(--it2-surface);
    border: 1px solid var(--it2-input-border);
    color: var(--it2-muted);
}
.it2-btn--outline:hover { background: var(--it2-bg); border-color: var(--it2-muted-soft); }
.it2-btn--sm { padding: 5px 12px; font-size: 0.78rem; }

/* ---- Tablas (equivalente propio a .orders-table / .admin-table / .sa-table) ---- */
/* El contenedor recorta esquinas en escritorio (border-radius) y, cuando la
   tabla no cabe, permite scroll horizontal tactil en pantallas angostas
   (equivalente propio a .table-container del Panel ITAGE). */
.it2-table-wrap {
    background: var(--it2-surface);
    border: 1px solid var(--it2-border);
    border-radius: var(--it2-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.it2-table { width: 100%; border-collapse: collapse; }
.it2-table th {
    text-align: left;
    padding: 11px 16px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--it2-muted);
    background: var(--it2-bg);
    border-bottom: 1px solid var(--it2-border);
    font-weight: 600;
}
.it2-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--it2-border-soft);
    font-size: 0.83rem;
    vertical-align: middle;
}
.it2-table tr:last-child td { border-bottom: none; }
.it2-table tbody tr:hover td { background: var(--it2-bg); }

/* ---- Badges (equivalente propio a .badge) ---- */
.it2-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}
.it2-badge--green { background: var(--it2-green-bg); color: var(--it2-green); }
.it2-badge--coral { background: var(--it2-coral-bg); color: var(--it2-coral); }
.it2-badge--blue { background: var(--it2-blue-bg); color: var(--it2-blue); }
.it2-badge--orange { background: var(--it2-orange-bg); color: var(--it2-orange); }
.it2-badge--gray { background: var(--it2-border-soft); color: var(--it2-muted); }
/* Badge con icono (p. ej. indicador de capacidad por rol en el header de vista) */
.it2-badge--icon { display: inline-flex; align-items: center; gap: 4px; }
.it2-badge--icon .material-symbols-rounded { font-size: 0.95rem; }

/* ---- Estado vacio (equivalente propio a .empty-state) ---- */
.it2-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--it2-muted-soft);
}
.it2-empty__icon { font-size: 2.6rem; margin-bottom: 12px; display: block; }
.it2-empty__text { font-size: 0.95rem; }
.it2-empty__sub { font-size: 0.8rem; margin-top: 4px; }

/* ---- Estado de carga ---- */
.it2-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--it2-muted-soft);
    font-size: 0.9rem;
}
.it2-loading .material-symbols-rounded {
    font-size: 26px;
    color: var(--it2-green);
    animation: it2-spin 1s linear infinite;
}

/* ---- Placeholder de vista (andamiaje) ---- */
.it2-placeholder {
    border: 1px dashed var(--it2-input-border);
    border-radius: var(--it2-radius);
    background: var(--it2-bg-alt);
    padding: 40px;
    text-align: center;
    color: var(--it2-muted);
}
.it2-placeholder__icon { font-size: 2.4rem; color: var(--it2-muted-soft); display: block; margin-bottom: 10px; }
.it2-placeholder__title { font-size: 1rem; font-weight: 600; color: var(--it2-gray); margin-bottom: 4px; }
.it2-placeholder__hint { font-size: 0.8rem; }

/* ---- Modal (equivalente propio a .modal-overlay / .modal-content) ---- */
.it2-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 16px;
}
.it2-modal {
    background: var(--it2-surface);
    border-radius: 16px;
    padding: 28px 32px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.it2-modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--it2-gray);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--it2-border-soft);
}

/* ---- Toast (equivalente propio a .toast) ---- */
.it2-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--it2-gray);
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 0.85rem;
    z-index: 600;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    max-width: 90vw;
}
.it2-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.it2-toast--error { background: var(--it2-coral); }
.it2-toast--success { background: var(--it2-green); }

/* ---- Pantalla de acceso denegado / sin sesion ---- */
.it2-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 14px;
    text-align: center;
    padding: 24px;
}
.it2-gate__icon { font-size: 3rem; color: var(--it2-coral); }
.it2-gate__title { font-size: 1.2rem; font-weight: 700; color: var(--it2-gray); }
.it2-gate__text { font-size: 0.9rem; color: var(--it2-muted); max-width: 420px; }

/* ============================================================
   RESPONSIVE (R5.5 / R25.1 / R25.2) - coherente con el Panel ITAGE
   ------------------------------------------------------------
   Se replica el comportamiento responsivo del Panel_ITAGE
   (styles.css) usando SOLO CSS propio (it2-*), sin importarlo ni
   referenciarlo. Los puntos de quiebre coinciden con los del
   Panel: 1024px (tablet), 768px (movil / mobile overhaul) y
   480px (telefonos pequenos). El producto es exclusivamente web
   responsivo, sin app nativa (R25.2).
   ============================================================ */
.it2-sidebar__backdrop { display: none; }

/* Bloqueo de scroll del fondo cuando el menu off-canvas esta abierto (movil). */
.it2-no-scroll { overflow: hidden; }

/* ---- Tablet (<=1024px): mismo umbral que el Panel ITAGE ----
   Se compacta el padding y las stat-cards pasan a 2 columnas,
   igual que .stats-row/.stat-card del Panel en este rango. */
@media (max-width: 1024px) {
    .it2-header { padding: 0 16px; }
    .it2-content { padding: 16px 16px 80px; }
    .it2-stats { grid-template-columns: repeat(2, 1fr); }
    .it2-detail__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Movil (<=768px): "mobile overhaul" equivalente al Panel ----
   El Panel colapsa su navegacion (tabs/nav lateral) a un patron
   compacto, oculta la fecha del header, hace las tablas scrolleables
   horizontalmente con min-width, apila filtros y formularios, y
   reduce el ancho/padding de los modales. Aqui el menu lateral pasa
   a off-canvas con backdrop (patron sidebar propio, R5.1). */
@media (max-width: 768px) {
    /* Sidebar off-canvas + boton toggle en el header (equivalente
       al colapso de navegacion del Panel en movil). */
    .it2-header__toggle { display: inline-flex; }
    .it2-header { padding: 0 12px; gap: 8px; }
    /* La fecha se oculta en movil, igual que .header-date del Panel. */
    .it2-header__date { display: none; }
    .it2-header__title { font-size: 0.95rem; }
    .it2-header__right { gap: 10px; }
    .it2-user { padding-left: 8px; border-left: none; }

    .it2-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 400;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
    }
    .it2-shell.is-sidebar-open .it2-sidebar { transform: translateX(0); }
    .it2-shell.is-sidebar-open .it2-sidebar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 300;
    }
    /* Objetivos tactiles mas comodos en el menu (>=44px de alto). */
    .it2-nav__item { padding: 12px 20px; font-size: 0.9rem; }

    .it2-content { padding: 12px 12px 80px; }
    .it2-stats { grid-template-columns: 1fr; }

    /* Encabezado de vista apilado; las acciones ocupan todo el ancho. */
    .it2-view__header { align-items: flex-start; }
    .it2-view__actions { width: 100%; }

    /* Filtros a ancho completo (equivalente a .filters-bar del Panel). */
    .it2-filters { padding: 10px 12px; }
    .it2-filters .it2-input,
    .it2-filters .it2-select { flex: 1 1 100%; min-width: 100%; }
    .it2-filters .it2-btn { flex: 1 1 100%; justify-content: center; }

    /* Formularios apilados (una columna). */
    .it2-form__row { flex-direction: column; gap: 0; }
    .it2-form__row .it2-form__group { min-width: 100%; margin-bottom: 12px; }
    .it2-form { max-width: 100%; }
    .it2-detail__grid { grid-template-columns: 1fr; }

    /* Tablas: scroll horizontal (via .it2-table-wrap) manteniendo un
       ancho minimo legible, igual que .orders-table/.admin-table del
       Panel en movil (min-width + overflow-x en el contenedor). El
       min-width solo aplica a las tablas dentro de un .it2-table-wrap
       para no desbordar tablas simples embebidas en cards. */
    .it2-table { font-size: 0.8rem; }
    .it2-table th { padding: 9px 10px; font-size: 0.66rem; }
    .it2-table td { padding: 10px 10px; }
    .it2-table-wrap .it2-table { min-width: 620px; }

    /* Modal a casi ancho completo, con menos padding (equivalente a
       .modal-content del Panel en movil). */
    .it2-modal { padding: 20px 16px; max-width: 100%; max-height: 88vh; }
    .it2-modal__title { font-size: 1rem; }

    /* Botones un poco mas compactos, manteniendo area tactil. */
    .it2-view__actions .it2-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- Telefonos pequenos (<=480px): equivalente a los umbrales
   400/480px del Panel ITAGE (una sola columna en grillas densas). */
@media (max-width: 480px) {
    .it2-stats,
    .it2-stats--compact,
    .it2-dashboard__rotation { grid-template-columns: 1fr; }
    .it2-header__title { font-size: 0.88rem; }
    .it2-user__name { display: none; }
    .it2-modal { padding: 18px 14px; }
}

/* ============================================================
   COMPONENTES DE VISTAS (ventas / clientes) - tarea 6.5
   CSS NUEVO Y PROPIO (it2-*). Extiende los patrones del Panel
   ITAGE replicados arriba, sin referenciar styles.css.
   ============================================================ */

/* ---- Acciones en el encabezado de vista y en filas de tabla ---- */
.it2-view__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.it2-table__actions { text-align: right; white-space: nowrap; }

/* ---- Cabecera del modal (titulo + boton cerrar) ---- */
.it2-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--it2-border-soft);
}
.it2-modal__head .it2-modal__title {
    margin: 0;
    padding: 0;
    border: none;
}
.it2-modal__close {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--it2-muted);
    display: inline-flex;
    padding: 2px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.it2-modal__close:hover { background: var(--it2-bg); color: var(--it2-gray); }

/* ---- Bloque de detalle (cliente / venta) ---- */
.it2-detail { margin-bottom: 20px; }
.it2-detail__head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.it2-detail__name { font-size: 1.05rem; font-weight: 700; color: var(--it2-gray); }
.it2-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 20px;
    margin-bottom: 16px;
}
.it2-detail__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--it2-muted);
    margin-bottom: 2px;
}
.it2-detail__value { font-size: 0.86rem; color: var(--it2-gray); word-break: break-word; }
.it2-detail__notes { margin-top: 4px; }
.it2-detail__notes-text {
    font-size: 0.85rem;
    color: var(--it2-gray);
    background: var(--it2-bg);
    border: 1px solid var(--it2-border-soft);
    border-radius: var(--it2-radius);
    padding: 10px 12px;
    min-height: 40px;
}

/* ---- Stats compactos (dentro del detalle de cliente) ---- */
.it2-stats--compact {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.it2-stats--compact .it2-stat-card { padding: 12px 14px; }
.it2-stats--compact .it2-stat-card__value { font-size: 1.35rem; }

/* ---- Alertas (advertencia de duplicados NO bloqueante, R17.3/R17.4) ---- */
.it2-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--it2-radius);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 0.83rem;
    line-height: 1.45;
}
.it2-alert .material-symbols-rounded { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.it2-alert--warning { background: var(--it2-orange-bg); color: #8a5a00; border: 1px solid #f4d58a; }
.it2-alert--warning .material-symbols-rounded { color: var(--it2-orange); }
.it2-alert--info { background: var(--it2-blue-bg); color: #0b5a94; border: 1px solid #b6ddfb; }
.it2-alert--info .material-symbols-rounded { color: var(--it2-blue); }
.it2-alert__list { margin: 6px 0 0; padding-left: 18px; }
.it2-alert__list li { margin-bottom: 3px; }

/* ---- Error de campo en formularios ---- */
.it2-field-error {
    color: var(--it2-coral);
    font-size: 0.74rem;
    margin-top: 4px;
}

/* ---- Grupos de formulario en linea (checkbox) ---- */
.it2-form__group--inline { display: flex; align-items: center; }
.it2-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.83rem;
    color: var(--it2-gray);
    cursor: pointer;
}
.it2-checkbox input { width: 16px; height: 16px; accent-color: var(--it2-green); cursor: pointer; }

/* ---- Editor de lineas de venta (productos) ---- */
.it2-line-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.it2-line-item {
    display: grid;
    grid-template-columns: 2fr 0.8fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.it2-line-item .it2-input,
.it2-line-item .it2-select { width: 100%; min-width: 0; }
.it2-line-item__remove { padding: 6px 8px; }
/* Variante de 4 columnas (p. ej. lineas de importacion: producto, cant., costo, quitar) */
.it2-line-item--4 { grid-template-columns: 2fr 0.9fr 1fr auto; }

/* ---- Fila de total del formulario de venta ---- */
.it2-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px 0;
    margin-top: 8px;
    border-top: 1px solid var(--it2-border-soft);
    font-size: 0.95rem;
}
.it2-total-row strong { font-size: 1.15rem; color: var(--it2-green); }

/* ---- Responsive: editor de lineas apilado en movil ---- */
@media (max-width: 768px) {
    .it2-line-item {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding: 10px;
        border: 1px solid var(--it2-border-soft);
        border-radius: var(--it2-radius);
    }
    .it2-line-item__product { grid-column: 1 / -1; }
    .it2-line-item__remove { grid-column: 1 / -1; justify-self: end; }
    .it2-table__actions { text-align: left; }
}

/* ============================================================
   Dashboard principal (R9). Componentes propios que replican el
   patron .stat-card del Panel_ITAGE. Los seis KPIs de stock se
   muestran de forma incondicional (R9.2) y cada tarjeta navega
   al detalle correspondiente (R9.5).
   ============================================================ */
.it2-dashboard { display: block; }
.it2-dashboard__section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--it2-gray);
    margin: 20px 0 12px;
}
.it2-dashboard__section-title:first-child { margin-top: 4px; }

/* Stat-card clickeable (navegacion al detalle, R9.5). Reutiliza .it2-stat-card
   pero es un <button>, por lo que se normaliza su apariencia. */
.it2-stat-card--link {
    width: 100%;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.it2-stat-card--link:hover {
    border-color: var(--it2-green);
    box-shadow: 0 2px 10px rgba(0, 184, 148, 0.12);
    transform: translateY(-1px);
}
.it2-stat-card--link:focus-visible {
    outline: 2px solid var(--it2-blue);
    outline-offset: 2px;
}

/* Titulo de una card generica del dashboard (ventas por canal, rotacion). */
.it2-card__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--it2-gray);
    margin-bottom: 12px;
}
.it2-card__title .material-symbols-rounded { font-size: 1.2rem; color: var(--it2-muted); }

/* Fila de tabla clickeable (ventas por canal -> detalle, R9.5). */
.it2-table__row--link { cursor: pointer; }
.it2-table__row--link:hover { background: var(--it2-bg-alt); }

/* Bloque de rotacion (alta / baja) en dos columnas responsivas. */
.it2-dashboard__rotation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Lista de productos de rotacion; cada item navega al detalle (R9.5). */
.it2-rotation-list { display: flex; flex-direction: column; gap: 2px; }
.it2-rotation-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--it2-radius);
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--it2-gray);
    cursor: pointer;
    text-align: left;
}
.it2-rotation-list__item:hover { background: var(--it2-bg-alt); }
.it2-rotation-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it2-rotation-list__units { font-weight: 600; color: var(--it2-muted); flex-shrink: 0; }