/* ═══════════════════════════════════════════════════════════════════════════
   GESCIR — Hoja de estilos principal
   Paleta:  fondo #0b0f1a · superficie #141824 · acento #00d4ff · texto #e2e8f0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:          #0b0f1a;
    --surface:     #141824;
    --surface-2:   #1c2233;
    --border:      #252d42;
    --accent:      #00d4ff;
    --accent-dim:  rgba(0, 212, 255, .15);
    --green:       #00e676;
    --green-dim:   rgba(0, 230, 118, .15);
    --orange:      #ffab40;
    --orange-dim:  rgba(255, 171, 64, .15);
    --red:         #ff5252;
    --red-dim:     rgba(255, 82, 82, .15);
    --text:        #e2e8f0;
    --text-muted:  #8896ae;
    --radius:      10px;
    --radius-sm:   6px;
    --shadow:      0 4px 24px rgba(0, 0, 0, .5);
    --font:        'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:   'Cascadia Code', 'Consolas', monospace;
}

html.theme-light {
    --bg:          #f0f4f8;
    --surface:     #ffffff;
    --surface-2:   #e4eaf4;
    --border:      #c8d3e6;
    --accent:      #0077aa;
    --accent-dim:  rgba(0, 119, 170, .12);
    --green:       #00814a;
    --green-dim:   rgba(0, 129, 74, .12);
    --orange:      #b85c00;
    --orange-dim:  rgba(184, 92, 0, .12);
    --red:         #c0001a;
    --red-dim:     rgba(192, 0, 26, .12);
    --text:        #1a2332;
    --text-muted:  #5a6a82;
    --shadow:      0 4px 24px rgba(0, 0, 0, .10);
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    line-height: 1.6;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

code {
    font-family: var(--font-mono);
    background: var(--surface-2);
    color: var(--accent);
    padding: .1em .4em;
    border-radius: 4px;
    font-size: .88em;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 2rem;
}

.header-inner {
    max-width: 1100px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand { display: flex; align-items: center; gap: .85rem; }

.brand-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    flex-shrink: 0;
}

.brand-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--accent);
    line-height: 1.1;
}

.brand-sub {
    display: block;
    font-size: .72rem;
    color: var(--text-muted);
    letter-spacing: .03em;
}

.version-badge {
    font-size: .7rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .25em .7em;
    border-radius: 999px;
    white-space: nowrap;
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color .2s, border-color .2s, background .2s;
}

.theme-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Main / layout ────────────────────────────────────────────────────────── */
.main {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
    text-align: center;
    padding: 2.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    background-image:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,212,255,.06) 0%, transparent 70%);
}

.hero-title {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: .5rem;
}

.hero-desc {
    color: var(--text-muted);
    max-width: 540px;
    margin: 0 auto 1.75rem;
    font-size: .95rem;
}

/* ── Botón principal ──────────────────────────────────────────────────────── */
.btn-check {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: filter .2s, transform .1s;
}

.btn-check svg { width: 18px; height: 18px; }
.btn-check:hover  { filter: brightness(1.15); }
.btn-check:active { transform: scale(.97); }
.btn-check:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
}

/* ── Resumen: grid de 3 tarjetas ──────────────────────────────────────────── */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    position: relative;
    overflow: hidden;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--card-accent, var(--accent));
    border-radius: var(--radius) var(--radius) 0 0;
}

.summary-card__label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.summary-card__value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--card-accent, var(--accent));
    line-height: 1.1;
}

.summary-card__sub {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ── Tabla de tablas ──────────────────────────────────────────────────────── */
.tables-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.tables-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

.tables-card__title svg { width: 18px; height: 18px; color: var(--accent); }

.table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .65rem;
}

/* Fila de tabla individual */
.table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem .85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color .2s;
}

.table-row:hover { border-color: var(--accent); }

.table-row__name {
    font-family: var(--font-mono);
    font-size: .8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badges de estado */
.badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2em .65em;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}

.badge--ok      { background: var(--green-dim);  color: var(--green);  }
.badge--created { background: var(--accent-dim); color: var(--accent); }
.badge--error   { background: var(--red-dim);    color: var(--red);    }

.badge svg { width: 11px; height: 11px; }

/* ── Loader ───────────────────────────────────────────────────────────────── */
.loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: .9rem;
    padding: 2rem;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error global ─────────────────────────────────────────────────────────── */
.global-error {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--red-dim);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    color: var(--text);
}

.global-error svg {
    width: 22px;
    height: 22px;
    color: var(--red);
    flex-shrink: 0;
    margin-top: .1rem;
}

.global-error strong { display: block; color: var(--red); margin-bottom: .25rem; }
.global-error p      { font-size: .88rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.app-footer {
    text-align: center;
    padding: 1rem;
    font-size: .72rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

/* ── Botón "Volver" del header ────────────────────────────────────────────── */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
}
.btn-back svg { width: 15px; height: 15px; }
.btn-back:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ── Cabecera de página de módulo ─────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header__right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.page-header__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(0, 212, 255, .12);
    color: var(--accent);
}

.page-header__icon svg { width: 26px; height: 26px; }

.page-header__icon--circuits  { background: rgba(0, 212, 255, .12); color: #00d4ff; }
.page-header__icon--import     { background: rgba(255, 171, 64, .12); color: #ffab40; }
.page-header__icon--components { background: rgba(179, 157, 219, .12); color: #b39ddb; }
.page-header__icon--stock      { background: rgba(0, 230, 118, .12); color: #00e676; }
.page-header__icon--catalogs   { background: rgba(244, 143, 177, .12); color: #f48fb1; }

.page-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.page-header__sub {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .15rem;
}

.record-count {
    font-size: .78rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .3em .85em;
    border-radius: 999px;
    white-space: nowrap;
}

/* ── Barra de búsqueda ────────────────────────────────────────────────────── */
.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}

.search-bar__icon {
    position: absolute;
    left: .85rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-bar__input {
    width: 100%;
    padding: .65rem 2.5rem .65rem 2.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9rem;
    font-family: var(--font);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}

.search-bar__input::placeholder { color: var(--text-muted); }
.search-bar__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.search-bar__count {
    position: absolute;
    right: .85rem;
    font-size: .72rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    pointer-events: none;
}

/* ── Tabla de datos ───────────────────────────────────────────────────────── */
.data-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.data-table thead tr {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.data-table th {
    padding: .75rem 1.1rem;
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}

.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }

.data-table td {
    padding: .75rem 1.1rem;
    color: var(--text);
    vertical-align: middle;
}

/* Columnas */
.col-codigo  { width: 140px; }
.col-version { width: 130px; text-align: center; }
.col-desc    { /* ocupa el resto */ }

.data-table th.col-version { text-align: center; }

/* Píldora de código */
.code-pill {
    font-family: var(--font-mono);
    font-size: .8rem;
    background: var(--surface-2);
    color: var(--accent);
    padding: .2em .6em;
    border-radius: 4px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* Badge de versión */
.version-badge-cell {
    display: inline-flex;
    align-items: center;
    padding: .2em .7em;
    background: rgba(0, 212, 255, .12);
    color: var(--accent);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.version-none {
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── Filas expandibles de circuitos ──────────────────────────────────────── */
.circ-row {
    cursor: pointer;
    user-select: none;
}

/* ── Filas clickables de componentes ─────────────────────────────────────── */
.comp-row {
    cursor: pointer;
    user-select: none;
}

.circ-row:hover .circ-expand-icon,
.circ-row--expanded .circ-expand-icon { color: var(--accent); }

.circ-row--expanded { background: var(--surface-2) !important; }

.circ-expand-icon {
    display: inline-block;
    font-size: .6rem;
    color: var(--text-muted);
    margin-right: .4rem;
    vertical-align: middle;
    transition: color .15s;
    line-height: 1;
}

.versions-row { border-bottom: 2px solid var(--accent) !important; }

.versions-cell {
    padding: .6rem 1rem .8rem 2.5rem !important;
    background: var(--bg);
}

.versions-cell--error {
    color: var(--red);
    font-size: .82rem;
}

.versions-empty {
    color: var(--text-muted);
    font-size: .82rem;
    margin: .4rem 0;
}

.versions-sub-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.versions-sub-table th {
    color: var(--text-muted);
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
    padding: .3rem .75rem;
    border-bottom: 1px solid var(--border);
}

.versions-sub-table td {
    padding: .4rem .75rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.versions-sub-table tbody tr:last-child td { border-bottom: none; }
.versions-sub-table tbody tr:hover { background: rgba(255,255,255,.03); }

.badge--info { background: rgba(0,212,255,.1); color: var(--accent); }


.table-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    padding: 3.5rem 1rem;
    color: var(--text-muted);
    font-size: .9rem;
}

.table-state svg { width: 24px; height: 24px; flex-shrink: 0; }
.table-state--error { color: var(--red); }
.table-state--error svg { color: var(--red); }

/* ── Módulos principales ──────────────────────────────────────────────────── */
.modules { display: flex; flex-direction: column; gap: 1rem; }

.modules__title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

/* Tarjeta de módulo */
.module-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.25rem 1.4rem 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    overflow: hidden;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    cursor: pointer;
}

/* Franja de color izquierda */
.module-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--mod-color, var(--accent));
    border-radius: var(--radius) 0 0 var(--radius);
    transition: width .2s;
}

/* Resplandor de fondo sutil al hacer hover */
.module-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 20% 50%, var(--mod-glow, rgba(0,212,255,.07)) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}

.module-card:hover {
    border-color: var(--mod-color, var(--accent));
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.module-card:hover::before { width: 6px; }
.module-card:hover::after  { opacity: 1; }
.module-card:active        { transform: translateY(0); }

/* Icono */
.module-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--mod-icon-bg, rgba(0,212,255,.12));
    color: var(--mod-color, var(--accent));
    transition: background .2s;
}

.module-card__icon svg {
    width: 26px;
    height: 26px;
}

.module-card:hover .module-card__icon {
    background: var(--mod-icon-bg-hover, rgba(0,212,255,.2));
}

/* Texto */
.module-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.module-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.module-card__desc {
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Flecha */
.module-card__arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: color .2s, transform .2s;
}

.module-card:hover .module-card__arrow {
    color: var(--mod-color, var(--accent));
    transform: translateX(4px);
}

/* ── Colores por módulo ───────────────────────────────────────────────────── */
.module-card--circuits {
    --mod-color:        #00d4ff;
    --mod-glow:         rgba(0, 212, 255, .08);
    --mod-icon-bg:      rgba(0, 212, 255, .12);
    --mod-icon-bg-hover: rgba(0, 212, 255, .22);
}

.module-card--import {
    --mod-color:         #ffab40;
    --mod-glow:          rgba(255, 171, 64, .08);
    --mod-icon-bg:       rgba(255, 171, 64, .12);
    --mod-icon-bg-hover: rgba(255, 171, 64, .22);
}

.module-card--components {
    --mod-color:         #b39ddb;
    --mod-glow:          rgba(179, 157, 219, .08);
    --mod-icon-bg:       rgba(179, 157, 219, .12);
    --mod-icon-bg-hover: rgba(179, 157, 219, .22);
}

.module-card--stock {
    --mod-color:         #00e676;
    --mod-glow:          rgba(0, 230, 118, .08);
    --mod-icon-bg:       rgba(0, 230, 118, .12);
    --mod-icon-bg-hover: rgba(0, 230, 118, .22);
}

.module-card--catalogs {
    --mod-color:         #f48fb1;
    --mod-glow:          rgba(244, 143, 177, .08);
    --mod-icon-bg:       rgba(244, 143, 177, .12);
    --mod-icon-bg-hover: rgba(244, 143, 177, .22);
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ── Enlace de utilidad (Mantenimiento) ──────────────────────────────────── */
.utility-strip {
    display: flex;
    justify-content: flex-end;
}

.utility-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.utility-link svg { width: 15px; height: 15px; }
.utility-link:hover { color: var(--text); border-color: var(--text-muted); }

/* ── Backup: grid de tarjetas ────────────────────────────────────────────── */
.backup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 680px) {
    .backup-grid { grid-template-columns: 1fr; }
}

.backup-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.backup-card__header {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.backup-card__header svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.backup-card__header h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.backup-card p {
    font-size: .84rem;
    color: var(--text-muted);
    margin: 0;
}

.backup-card__file {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.backup-card__filename {
    font-size: .82rem;
    color: var(--text-muted);
    font-style: italic;
}

.backup-card__actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.backup-card__status {
    font-size: .82rem;
    color: var(--text-muted);
}

/* ── Secciones / pasos del wizard de importación ─────────────────────────── */
.import-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.step-header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: .78rem;
    font-weight: 800;
    flex-shrink: 0;
}

.step-title { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.step-desc  { font-size: .88rem; color: var(--text-muted); max-width: 640px; }

/* ── Zona de arrastre ────────────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 3rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    outline: none;
}

.drop-zone svg {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    transition: color .2s;
}

.drop-zone:hover,
.drop-zone:focus,
.drop-zone--over {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.drop-zone:hover svg,
.drop-zone:focus svg,
.drop-zone--over svg { color: var(--accent); }

.drop-zone__title { font-size: 1rem; font-weight: 600; color: var(--text); }
.drop-zone__sub   { font-size: .82rem; color: var(--text-muted); }

/* ── Opciones de importación ─────────────────────────────────────────────── */
.import-options {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.import-options__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
}

.radio-option input[type="radio"] { display: none; }

.radio-option__box {
    flex-shrink: 0;
    margin-top: .2rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    transition: border-color .2s, background .2s;
    position: relative;
}

.radio-option input:checked ~ .radio-option__box {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.radio-option input:checked ~ .radio-option__box::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent);
}

.radio-option--danger input:checked ~ .radio-option__box {
    border-color: var(--red);
    background: var(--red-dim);
}
.radio-option--danger input:checked ~ .radio-option__box::after { background: var(--red); }

.radio-option div { display: flex; flex-direction: column; gap: .15rem; }
.radio-option strong { font-size: .88rem; color: var(--text); }
.radio-option span  { font-size: .78rem; color: var(--text-muted); }
.radio-option em    { color: var(--red); font-style: normal; font-weight: 600; }

/* ── Confirmación de sobrescritura ───────────────────────────────────────── */
.overwrite-confirm {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--red-dim);
    border: 1px solid var(--red);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}

.overwrite-confirm svg {
    width: 20px;
    height: 20px;
    color: var(--red);
    flex-shrink: 0;
    margin-top: .1rem;
}

.overwrite-confirm label {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .85rem;
    color: var(--text);
    cursor: pointer;
}

.overwrite-confirm input[type="checkbox"] {
    accent-color: var(--red);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Botones de acción ───────────────────────────────────────────────────── */
.step-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.25rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: color .2s, border-color .2s;
}
.btn-outline:hover { color: var(--text); border-color: var(--text-muted); }

.btn-import {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.5rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--bg);
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: filter .2s, transform .1s;
}
.btn-import svg { width: 16px; height: 16px; }
.btn-import:hover   { filter: brightness(1.12); }
.btn-import:active  { transform: scale(.97); }
.btn-import:disabled {
    opacity: .4;
    cursor: not-allowed;
    filter: none;
}

/* ── Barra de progreso ───────────────────────────────────────────────────── */
.progress-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar-track {
    flex: 1;
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .35s ease;
}

.progress-label {
    font-size: .78rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Panel de log de importación ─────────────────────────────────────────── */
.log-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    max-height: 360px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .82rem;
}

.log-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .35rem .5rem;
    border-radius: 4px;
    background: var(--surface);
}

.log-row__header {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.log-row__spinner { flex-shrink: 0; display: flex; align-items: center; }
.log-row__spinner .spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.log-row__name {
    flex: 1;
    color: var(--text);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-row__msg         { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.log-row__msg--ok      { color: var(--green); }
.log-row__msg--warning { color: var(--orange); }
.log-row__msg--error   { color: var(--red); }

.log-row__errors {
    margin-left: 1.5rem;
    font-size: .76rem;
    color: var(--text-muted);
}
.log-row__errors summary {
    cursor: pointer;
    color: var(--orange);
    padding: .15rem 0;
    user-select: none;
    list-style: none;
}
.log-row__errors summary::before { content: '\25B6\00A0'; font-size: .65rem; }
.log-row__errors[open] summary::before { content: '\25BC\00A0'; font-size: .65rem; }
.log-row__errors ul {
    margin: .3rem 0 .2rem 1rem;
    padding: 0;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    max-height: 160px;
    overflow-y: auto;
}
.log-row__errors li {
    font-family: var(--font-mono);
    font-size: .73rem;
    color: var(--red);
    word-break: break-all;
}

.log-summary {
    margin-top: .5rem;
    padding: .75rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .85rem;
}
.log-summary--ok   { background: var(--green-dim);  color: var(--green);  border: 1px solid var(--green); }
.log-summary--warn { background: var(--orange-dim); color: var(--orange); border: 1px solid var(--orange); }
.log-summary strong { font-weight: 700; }

/* Spinner pequeño (heredado) */
.spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .header-inner { height: auto; padding: .75rem 0; flex-wrap: wrap; }
    .main         { padding: 1.5rem 1rem 2rem; }
    .hero         { padding: 1.75rem .75rem; }
}

/* ── Vista de detalle (panel inline, sustituye la lista) ──────────────────── */
.detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .85rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
    flex-shrink: 0;
}
.btn-back svg { width: 15px; height: 15px; }
.btn-back:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(0,212,255,.06);
}

.detail-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    flex-wrap: wrap;
    min-width: 0;
}

.detail-section {
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--border);
}
.detail-section:last-child { border-bottom: none; }

.detail-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.detail-section__title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}


/* ── Modal de detalle de circuito ─────────────────────────────────────────── */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(5, 8, 18, .82);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem 1rem;
    overflow-y: auto;
}

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.6);
    animation: modalIn .18s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0);     }
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
    flex-shrink: 0;
}

.modal__title {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    flex-wrap: wrap;
    min-width: 0;
}

.modal__title .code-pill { font-size: .85rem; }

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.modal__close svg { width: 15px; height: 15px; }
.modal__close:hover { color: var(--red); border-color: var(--red); background: var(--red-dim); }

.modal__body {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    max-height: calc(100vh - 10rem);
}

/* ── Secciones del modal ─────────────────────────────────────────────────── */
.modal-section {
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--border);
}
.modal-section:last-child { border-bottom: none; }

.modal-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.modal-section__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* pequeño botón acento */
.btn--sm {
    padding: .35rem .9rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity .15s, background .15s;
}
.btn--accent {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.btn--accent:hover { opacity: .88; }
.btn--accent:disabled { opacity: .35; cursor: not-allowed; }

/* botón grande (call-to-action) */
.btn--lg {
    padding: .75rem 1.75rem;
    font-size: .95rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: transform .12s, box-shadow .15s, opacity .15s;
}
.btn--lg:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.btn--lg:active:not(:disabled) { transform: translateY(0); }
.btn--lg:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }

/* ── Opciones de versión ─────────────────────────────────────────────────── */
.version-options {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.version-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.version-option:hover { border-color: var(--accent); background: var(--accent-dim); }

.version-option input[type="radio"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.version-option--current {
    border-color: var(--green);
    background: var(--green-dim);
}
.version-option--current:hover { border-color: var(--accent); }

.version-option__body {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

.version-option__desc {
    flex: 1;
    color: var(--text);
    font-size: .85rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.version-option__desc em { color: var(--text-muted); font-style: italic; }

.version-option__date {
    font-family: var(--font-mono);
    font-size: .75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.version-option__badges { display: flex; gap: .3rem; flex-shrink: 0; }

/* ── Caja de herramientas ────────────────────────────────────────────────── */
.toolbox {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: .75rem;
}

.tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: .75rem 1.1rem;
    min-width: 90px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.tool-btn svg { width: 22px; height: 22px; }
.tool-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.tool-btn--active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}

/* ── Tabla de componentes ────────────────────────────────────────────────── */
.comp-table-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.comp-table-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .9rem;
    font-size: .75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.comp-group-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    user-select: none;
    color: var(--text-muted);
    font-size: .75rem;
}

.comp-group-label input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.comp-table-scroll {
    overflow-x: auto;
    scrollbar-width: none;
}

.comp-table-scroll::-webkit-scrollbar {
    display: none;
}

.comp-scroll-mirror {
    position: sticky;
    bottom: 0;
    overflow-x: auto;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}

.comp-scroll-mirror__inner {
    height: 1px;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
}

.comp-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 700;
    font-size: .67rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: left;
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.comp-table td {
    padding: .38rem .75rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    white-space: nowrap;
}

.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table tbody tr:hover { background: rgba(255,255,255,.03); }

.comp-row--no-montar td { opacity: .45; text-decoration: line-through; }
.comp-row--no-montar td:last-child { opacity: 1; text-decoration: none; }

.nm-toggle {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
}
.nm-toggle:disabled { opacity: .45; cursor: not-allowed; }
.nm-toggle--on {
    background: rgba(255,171,64,.14);
    color: var(--orange);
    border-color: rgba(255,171,64,.3);
}
.nm-toggle--on:hover:not(:disabled) { background: rgba(255,171,64,.28); }
.nm-toggle--off {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.nm-toggle--off:hover:not(:disabled) { background: rgba(255,255,255,.05); color: var(--text); }

.smi-toggle {
    display: inline-block;
    padding: .18rem .5rem;
    border-radius: 4px;
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.4;
    transition: opacity .15s, background .15s;
    white-space: nowrap;
}
.smi-toggle:disabled { opacity: .45; cursor: not-allowed; }
.smi-toggle--on {
    background: rgba(0,212,255,.12);
    color: var(--accent);
    border-color: rgba(0,212,255,.3);
}
.smi-toggle--on:hover:not(:disabled) { background: rgba(0,212,255,.24); }
.smi-toggle--off {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.smi-toggle--off:hover:not(:disabled) { background: rgba(255,255,255,.05); color: var(--text); }

.comp-td-pos { font-family: var(--font-mono); font-size: .75rem; }
.comp-td-qty { text-align: right; font-family: var(--font-mono); font-size: .78rem; }
.comp-td-val { font-family: var(--font-mono); font-size: .75rem; }
.comp-table td.comp-td-desc { min-width: 200px; white-space: normal; word-break: break-word; vertical-align: top; }

/* ── Badges adicionales ──────────────────────────────────────────────────── */
.badge--warn { background: rgba(255,171,64,.14); color: var(--orange); }

/* ── Estados del modal ───────────────────────────────────────────────────── */
.modal-loading {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--text-muted);
    font-size: .85rem;
    padding: .75rem 0;
}

.modal-msg {
    color: var(--text-muted);
    font-size: .85rem;
    padding: .5rem 0;
}
.modal-msg--error { color: var(--red); }

/* ── BOM Export Panel ────────────────────────────────────────────────────── */
.bom-panel {
    padding: .9rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bom-panel__section {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.bom-panel__label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bom-panel__options {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.bom-panel__radio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--surface-2);
    transition: border-color .15s, background .15s;
}

.bom-panel__radio:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.bom-panel__radio input[type="radio"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.bom-panel__radio span {
    font-weight: 600;
    font-size: .83rem;
    color: var(--text);
}

.bom-panel__radio small {
    font-size: .7rem;
    color: var(--text-muted);
}

.bom-panel__fields {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
}

.bom-panel__check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.bom-panel__check input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
}

.bom-panel__actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-top: .25rem;
}

.bom-panel__status {
    font-size: .78rem;
    color: var(--text-muted);
}

.bom-panel__status--error { color: var(--red); }

/* ── Formulario de edición de componente ─────────────────────────────────── */
.field-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.field-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem 1.5rem;
}

@media (max-width: 640px) {
    .field-form__grid { grid-template-columns: 1fr; }
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field-row--full { grid-column: 1 / -1; }

.field-label {
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.field-input,
.field-textarea,
select.field-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font);
    font-size: .88rem;
    padding: .45rem .65rem;
    width: 100%;
    transition: border-color .15s;
}

.field-input:focus,
.field-textarea:focus,
select.field-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.field-textarea {
    resize: vertical;
    min-height: 72px;
}

select.field-input {
    cursor: pointer;
    appearance: auto;
}

.field-readonly {
    font-size: .88rem;
    color: var(--text-muted);
    padding: .35rem 0;
}

.field-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .88rem;
    cursor: pointer;
    padding: .35rem 0;
}

.field-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.save-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}

.save-status          { font-size: .82rem; }
.save-status--ok      { color: var(--green); }
.save-status--error   { color: var(--red); }

/* ── Módulo Catálogos ────────────────────────────────────────────────────── */
.cat-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
}

.cat-tabs {
    display: flex;
    gap: .25rem;
}

.cat-tab {
    padding: .4rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.cat-tab:hover {
    background: var(--surface-2);
    color: var(--text);
}

.cat-tab--active {
    background: var(--surface-2);
    border-color: var(--accent);
    color: var(--accent);
}

.cat-add-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.cat-actions {
    width: 72px;
    text-align: right;
    white-space: nowrap;
}

.cat-actions-th { width: 72px; }

.cat-edit-row > td { padding: .75rem .5rem; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.icon-btn svg { width: 14px; height: 14px; pointer-events: none; }

.icon-btn--edit {
    color: var(--accent);
}
.icon-btn--edit:hover  { background: var(--accent-dim); }

.icon-btn--delete {
    color: var(--red);
}
.icon-btn--delete:hover { background: var(--red-dim); }

.btn--ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

/* ── Módulo Importación de Estructura (PcbDoc / OLE Inspector) ───────────── */
.pcb-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
    margin-bottom: 1.25rem;
}
.pcb-drop-zone:hover,
.pcb-drop-zone--over {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.pcb-drop-zone__icon { width: 40px; height: 40px; color: var(--text-muted); }
.pcb-drop-zone__text { font-size: .95rem; font-weight: 600; color: var(--text); }
.pcb-drop-zone__sub  { font-size: .78rem; color: var(--text-muted); }

.pcb-file-info {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.pcb-file-info__row   { display: flex; align-items: center; gap: .5rem; }
.pcb-file-info__label { font-size: .72rem; font-weight: 700; text-transform: uppercase;
                         letter-spacing: .06em; color: var(--text-muted); }
.pcb-file-info__value { font-size: .85rem; }

.ole-inspector {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 800px) {
    .ole-inspector { grid-template-columns: 1fr; }
}

.ole-tree-section,
.ole-viewer-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ole-tree-scroll { max-height: 60vh; overflow-y: auto; }

.ole-tree-table { font-size: .78rem; }
.ole-tree-table th { font-size: .64rem; }

.ole-entry-row--stream,
.ole-entry-row--storage { cursor: pointer; }
.ole-entry-row--active td { background: var(--accent-dim); }
.ole-entry-icon { margin-right: .35rem; }
.ole-entry-name { font-family: var(--font-mono); font-size: .76rem; }

.ole-viewer-section .detail-section__head { padding: .5rem .75rem; }
.ole-stream-viewer {
    font-family: var(--font-mono);
    font-size: .73rem;
    line-height: 1.55;
    padding: .75rem;
    margin: 0;
    max-height: 60vh;
    overflow: auto;
    color: var(--text);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
}
.ole-stream-viewer pre {
    white-space: pre;
    font: inherit;
    margin: 0;
}

/* ── Propiedades de componentes Altium ───────────────────────────────────── */
.comp-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    overflow: hidden;
}
.comp-block__head {
    display: block;
    padding: .35rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.comp-block__head::-webkit-details-marker { display: none; }
.comp-block[open] .comp-block__head { border-bottom: 1px solid var(--border); }
.comp-props-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .73rem;
}
.comp-props-table tr + tr td { border-top: 1px solid var(--border); }
.comp-prop-key {
    width: 38%;
    padding: .3rem .75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}
.comp-prop-val {
    padding: .3rem .75rem;
    word-break: break-all;
    font-family: var(--font-mono);
}

/* ── Agrupación por componente (SchDoc) ──────────────────────────────────── */
.comp-group {
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    overflow: hidden;
}
.comp-group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding: .5rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--accent-dim, var(--surface));
    color: var(--accent);
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.comp-group__head::-webkit-details-marker { display: none; }
.comp-group__seq {
    background: var(--accent);
    color: var(--bg);
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}
.comp-group__field {
    color: var(--text);
    font-weight: 400;
    font-size: .76rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.comp-group__field strong { color: var(--accent); font-weight: 700; }
.comp-group__field--warn { color: var(--orange); }
.comp-group__field--warn svg { stroke: var(--orange); }
.comp-group__count { color: var(--text-muted); font-weight: 500; font-size: .72rem; margin-left: auto; }
.comp-group--orphan { border-color: var(--border); }
.comp-group--orphan .comp-group__head { color: var(--text-muted); background: var(--surface); }
.comp-group__body { padding: .6rem .75rem; background: var(--bg); }
.comp-group__body .comp-block:last-child { margin-bottom: 0; }

/* ── Login page ───────────────────────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 1.5rem;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.75rem;
}
.login-brand__logo { font-size: 1.4rem; }
.login-brand__name {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--accent);
}

.login-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: .35rem;
}

.login-subtitle {
    font-size: .83rem;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
    line-height: 1.45;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-error {
    color: var(--red);
    background: var(--red-dim);
    padding: .6rem .8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 82, 82, .35);
    font-size: .83rem;
}

.login-loading {
    display: none;
    align-items: center;
    gap: .6rem;
    color: var(--text-muted);
    font-size: .83rem;
    margin-top: 1rem;
}
.login-loading.visible { display: flex; }

.login-loading__spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    flex-shrink: 0;
}

.btn-login {
    width: 100%;
    padding: .65rem 1rem;
    font-size: .95rem;
    font-weight: 700;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: .02em;
    transition: opacity .15s;
    margin-top: .25rem;
}
.btn-login:hover:not(:disabled) { opacity: .88; }
.btn-login:disabled { opacity: .4; cursor: not-allowed; }

/* ── Auth user bar (injected into .header-inner) ─────────────────────────── */
.auth-user-bar {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
    font-size: .78rem;
}

.auth-user-bar__name {
    font-weight: 600;
    color: var(--text);
}

.auth-user-bar__role {
    background: var(--accent-dim);
    color: var(--accent);
    font-size: .68rem;
    padding: .15em .5em;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.btn-logout {
    padding: .3rem .8rem;
    font-size: .75rem;
    font-weight: 600;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.btn-logout:hover {
    color: var(--red);
    border-color: var(--red);
}

/* ── Badge variants for usuarios module ──────────────────────────────────── */
.badge--admin    { background: var(--accent-dim); color: var(--accent); }
.badge--user     { background: var(--green-dim);  color: var(--green);  }
.badge--active   { background: var(--green-dim);  color: var(--green);  }
.badge--inactive { background: var(--red-dim);    color: var(--red);    }

/* ── Usuarios module — general layout ───────────────────────────────────── */
.header-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: inherit;
}
.header-brand__logo { font-size: 1.2rem; }
.header-brand__name {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--accent);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 1.5rem;
}

.nav-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
.nav-link:hover, .nav-link--active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.app-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.page-subtitle { font-size: .82rem; color: var(--text-muted); margin-top: .25rem; }

.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.text-muted { color: var(--text-muted); font-size: .85rem; }

/* ── btn + .btn--primary (general purpose) ──────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1.1rem;
    font-size: .82rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.btn:hover { background: var(--border); }
.btn--primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}
.btn--primary:hover { opacity: .88; }
.btn--danger {
    background: transparent;
    color: var(--red);
    border-color: var(--red);
}
.btn--danger:hover { background: var(--red-dim); }

/* ── detail-panel (form overlay) ────────────────────────────────────────── */
.detail-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.detail-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

.detail-panel__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.detail-panel__body { padding: 1.5rem; }

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .4rem;
    border-radius: var(--radius-sm);
    transition: color .15s, background .15s;
}
.btn-close:hover { color: var(--text); background: var(--border); }

/* ── form helpers ───────────────────────────────────────────────────────── */
.form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.form-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.form-control {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: .5rem .75rem;
    font-size: .88rem;
    font-family: var(--font);
    transition: border-color .15s;
    width: 100%;
}
.form-control:focus {
    outline: none;
    border-color: var(--accent);
}
.form-control::placeholder { color: var(--text-muted); opacity: .6; }

.form-hint {
    font-size: .77rem;
    color: var(--text-muted);
    margin-top: .1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text);
}

.form-actions {
    display: flex;
    gap: .75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}