/* ============================================================


   MyCar LinkService — Operations Panel


   v2.0.2.4 · Modern UI Redesign


   ============================================================ */





@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');





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





:root {


    --red:        #e8192c;


    --red-dark:   #9f0018;


    --red-dim:    rgba(232,25,44,0.1);


    --red-glow:   rgba(232,25,44,0.35);


    --bg:         #f2f4f7;


    --surface:    #ffffff;


    --surface-2:  #f8f9fb;


    --border:     #e5e7eb;


    --border-2:   #d1d5db;


    --text-1:     #0d0f12;


    --text-2:     #4b5563;


    --text-3:     #9ca3af;


    --sb-bg:      #0c0e14;


    --sb-bg2:     #131620;


    --sb-border:  rgba(255,255,255,0.06);


    --sb-text:    #e2e4ec;


    --sb-muted:   #596070;


    --sb-width:   256px;


    --sb-closed:  62px;


    --sb-ease:    0.3s cubic-bezier(0.4,0,0.2,1);


    --font:       'DM Sans', system-ui, sans-serif;


    --mono:       'DM Mono', 'Fira Code', monospace;


    --r-sm:  6px;


    --r-md:  10px;


    --r-lg:  14px;


    --r-xl:  18px;


    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);


    --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);


}





body {


    font-family: var(--font);


    background: var(--bg);


    color: var(--text-1);


    -webkit-font-smoothing: antialiased;


    min-height: 100vh;


}





/* ── LAYOUT ── */


.mycar-ops-container {


    display: flex; flex-direction: column;


    width: 100%; height: 100svh; overflow: hidden;


}


.mycar-ops-content {


    display: flex; flex: 1; min-height: 0; overflow: hidden;


}





/* ── SIDEBAR ── */


.mycar-sidebar {


    width: var(--sb-width); flex-shrink: 0;


    background: var(--sb-bg);


    display: flex; flex-direction: column;


    position: relative;


    transition: width var(--sb-ease);


    z-index: 100; overflow: visible; align-self: stretch;


    box-shadow: 1px 0 0 var(--sb-border), 6px 0 24px rgba(0,0,0,0.18);


}


.mycar-sidebar::after {


    content: ''; position: absolute;


    right: 0; top: 20%; bottom: 20%; width: 1px;


    background: linear-gradient(180deg, transparent, var(--red) 40%, var(--red) 60%, transparent);


    opacity: 0.2; pointer-events: none;


}


.mycar-sidebar.collapsed { width: var(--sb-closed); }





.mycar-sidebar-inner {


    display: flex; flex-direction: column;


    height: 100%; overflow-y: auto; overflow-x: hidden;


    scrollbar-width: none; padding-bottom: 16px;


}


.mycar-sidebar-inner::-webkit-scrollbar { display: none; }





/* Hamburger */


.mycar-hamburger {


    position: absolute; top: 20px; right: -13px;


    width: 26px; height: 26px;


    background: var(--red); border: none; border-radius: 50%;


    cursor: pointer; display: flex; flex-direction: column;


    align-items: center; justify-content: center; gap: 4px; padding: 0;


    z-index: 200; box-shadow: 0 2px 10px var(--red-glow);


    transition: transform 0.2s, box-shadow 0.2s;


}


.mycar-hamburger:hover { transform: scale(1.1); box-shadow: 0 4px 16px var(--red-glow); }


.mycar-hamburger span {


    display: block; width: 11px; height: 1.5px;


    background: #fff; border-radius: 2px;


    transition: all 0.25s ease; transform-origin: center;


}


.mycar-sidebar:not(.collapsed) .mycar-hamburger span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }


.mycar-sidebar:not(.collapsed) .mycar-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }


.mycar-sidebar:not(.collapsed) .mycar-hamburger span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }





/* Logout */


.mycar-logout-btn {


    display: none; margin-left: auto; flex-shrink: 0;


    width: 28px; height: 28px;


    align-items: center; justify-content: center;


    border-radius: var(--r-sm); color: var(--sb-muted);


    text-decoration: none; transition: background 0.15s, color 0.15s;


}


.mycar-logout-btn svg { width: 14px; height: 14px; }


.mycar-logout-btn:hover { background: rgba(232,25,44,0.14); color: #ff6b8a; }


.mycar-sidebar:not(.collapsed) .mycar-logout-btn { display: flex; }





.mycar-mobile-logout-btn {


    display: flex; align-items: center; gap: 7px;


    margin-top: 12px; padding: 9px 14px;


    background: rgba(232,25,44,0.08);


    border: 1px solid rgba(232,25,44,0.2);


    border-radius: var(--r-md); color: #ff6b8a;


    font-size: 12px; font-weight: 600;


    text-decoration: none; transition: background 0.15s;


}


.mycar-mobile-logout-btn svg { width: 13px; height: 13px; stroke: currentColor; flex-shrink: 0; }


.mycar-mobile-logout-btn:hover { background: rgba(232,25,44,0.16); text-decoration: none; color: #ff6b8a; }





/* Brand */


.mycar-sidebar-brand {


    display: flex; align-items: center; gap: 11px;


    padding: 18px 14px 16px;


    border-bottom: 1px solid var(--sb-border);


    overflow: hidden; white-space: nowrap; min-height: 62px;


}


.mycar-sidebar-brand-icon {


    width: 30px; height: 30px;


    background: linear-gradient(135deg, var(--red), var(--red-dark));


    border-radius: var(--r-sm);


    display: flex; align-items: center; justify-content: center;


    flex-shrink: 0; box-shadow: 0 3px 12px var(--red-glow);


}


.mycar-sidebar-brand-icon svg { width: 15px; height: 15px; stroke: #fff; }


.mycar-sidebar-brand-text {


    font-size: 14px; font-weight: 600; color: var(--sb-text);


    letter-spacing: -0.1px;


    transition: opacity var(--sb-ease), transform var(--sb-ease);


}


.mycar-sidebar-brand-text strong { color: var(--red); font-weight: 700; }


.mycar-sidebar.collapsed .mycar-sidebar-brand-text { opacity: 0; transform: translateX(-8px); pointer-events: none; }





/* Nav groups */


.mycar-nav-group { position: relative; margin: 2px 8px; }


.mycar-nav-category {


    display: flex; align-items: center; gap: 0;


    padding: 8px 6px; border-radius: var(--r-md);


    cursor: pointer; transition: background 0.18s; user-select: none; position: relative;


}


.mycar-nav-category:hover { background: rgba(255,255,255,0.04); }


.mycar-nav-category-icon {


    width: 34px; height: 34px; border-radius: var(--r-sm);


    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);


    display: flex; align-items: center; justify-content: center;


    flex-shrink: 0; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; position: relative;


}


.mycar-nav-category-icon svg { width: 15px; height: 15px; stroke: var(--sb-muted); transition: stroke 0.2s; }


.mycar-nav-category:hover .mycar-nav-category-icon,


.mycar-nav-group.open .mycar-nav-category-icon {


    background: rgba(232,25,44,0.14); border-color: rgba(232,25,44,0.3);


    box-shadow: 0 0 12px rgba(232,25,44,0.18);


}


.mycar-nav-category:hover .mycar-nav-category-icon svg,


.mycar-nav-group.open .mycar-nav-category-icon svg { stroke: #ff6b8a; }





.mycar-sidebar.collapsed .mycar-nav-group.has-active .mycar-nav-category-icon {


    background: rgba(232,25,44,0.1); border-color: rgba(232,25,44,0.4);


}


.mycar-sidebar.collapsed .mycar-nav-group.has-active .mycar-nav-category-icon::after {


    content: ''; position: absolute; bottom: 2px; right: 2px;


    width: 6px; height: 6px; background: var(--red);


    border-radius: 50%; border: 1.5px solid var(--sb-bg);


}





.mycar-nav-category-label {


    flex: 1; font-size: 11px; font-weight: 700; color: var(--sb-muted);


    letter-spacing: 0.7px; text-transform: uppercase; margin-left: 10px;


    white-space: nowrap; overflow: hidden;


    transition: color 0.2s, opacity var(--sb-ease), transform var(--sb-ease);


}


.mycar-nav-category:hover .mycar-nav-category-label,


.mycar-nav-group.open .mycar-nav-category-label { color: var(--sb-text); }





.mycar-nav-category-arrow {


    width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;


    flex-shrink: 0; transition: transform 0.25s, opacity var(--sb-ease);


}


.mycar-nav-category-arrow svg { width: 12px; height: 12px; stroke: var(--sb-muted); }


.mycar-nav-group.open .mycar-nav-category-arrow { transform: rotate(180deg); }


.mycar-nav-group.open .mycar-nav-category-arrow svg { stroke: #ff6b8a; }





.mycar-sidebar.collapsed .mycar-nav-category-label,


.mycar-sidebar.collapsed .mycar-nav-category-arrow {


    opacity: 0; transform: translateX(-6px); pointer-events: none; width: 0; margin: 0; padding: 0;


}





/* Submenu */


.mycar-nav-submenu {


    overflow: hidden; max-height: 0; opacity: 0; padding-left: 16px;


    transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s;


}


.mycar-nav-group.open .mycar-nav-submenu { max-height: 300px; opacity: 1; }


.mycar-sidebar.collapsed .mycar-nav-submenu { max-height: 0 !important; opacity: 0 !important; pointer-events: none; }





.mycar-nav-item {


    display: flex; align-items: center; gap: 8px;


    width: 100%; padding: 7px 10px; border: none; background: transparent;


    text-align: left; cursor: pointer; font-size: 13px; font-family: var(--font);


    color: var(--sb-muted); border-radius: var(--r-sm);


    transition: background 0.15s, color 0.15s; position: relative; margin: 1px 0; white-space: nowrap;


}


.mycar-nav-item::before {


    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);


    width: 2px; height: 0; background: var(--red); border-radius: 2px; transition: height 0.2s;


}


.mycar-nav-item:hover { background: rgba(255,255,255,0.04); color: var(--sb-text); }


.mycar-nav-item:hover::before { height: 55%; }


.mycar-nav-item.active { background: rgba(232,25,44,0.12); color: #ff8fa3; font-weight: 600; }


.mycar-nav-item.active::before { height: 65%; background: var(--red); }





.mycar-nav-dot {


    width: 5px; height: 5px; border-radius: 50%; background: currentColor;


    opacity: 0.4; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s;


}


.mycar-nav-item:hover .mycar-nav-dot,


.mycar-nav-item.active .mycar-nav-dot { opacity: 1; transform: scale(1.3); }





/* Tooltip */


.mycar-nav-tooltip {


    position: fixed; left: 80px; top: 0;


    background: #1a1d28; border: 1px solid rgba(255,255,255,0.1);


    border-radius: var(--r-lg); padding: 8px; min-width: 200px;


    box-shadow: 12px 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,25,44,0.18);


    z-index: 99999; opacity: 0; pointer-events: none;


    transform: translateX(-8px); transition: opacity 0.18s, transform 0.18s;


}


.mycar-nav-tooltip.visible { opacity: 1; pointer-events: all; transform: translateX(0); }


.mycar-nav-tooltip::before {


    content: ''; position: absolute; left: -7px; top: var(--arrow-top, 50%);


    transform: translateY(-50%); border: 7px solid transparent;


    border-right-color: rgba(255,255,255,0.1);


}


.mycar-nav-tooltip::after {


    content: ''; position: absolute; left: -5px; top: var(--arrow-top, 50%);


    transform: translateY(-50%); border: 6px solid transparent; border-right-color: #1a1d28;


}


.mycar-nav-tooltip-title {


    font-size: 10px; font-weight: 700; text-transform: uppercase;


    letter-spacing: 0.8px; color: var(--red);


    padding: 4px 8px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 4px;


}


.mycar-nav-tooltip-item {


    display: block; width: 100%; padding: 7px 10px;


    background: transparent; border: none; text-align: left;


    color: #c0c4d4; font-size: 12.5px; font-family: var(--font);


    cursor: pointer; border-radius: var(--r-sm); transition: background 0.15s, color 0.15s;


}


.mycar-nav-tooltip-item:hover { background: rgba(232,25,44,0.15); color: #fff; }





/* ═══════════════════════════════════════════════════════════════


   CONTENT AREA — LIGHT ENTERPRISE STYLE


   Inspirado en la referencia visual: cards sin header de color,


   dot rojo como indicador, tipografía limpia y estructurada


   ═══════════════════════════════════════════════════════════════ */





/* ── PAGE TABS (contenedor principal) ──────────────────────── */


.mycar-tab {


    display: none;


    padding: 32px 36px;


    flex: 1; min-width: 0; overflow-y: auto;


    background: #f0f2f5;


    animation: mcls-fadein 0.2s ease;


}


.mycar-tab.active { display: block; }





@keyframes mcls-fadein {


    from { opacity: 0; transform: translateY(4px); }


    to   { opacity: 1; transform: translateY(0); }


}





/* ── PAGE HEADING ────────────────────────────────────────────── */


.mycar-tab h2 {


    font-size: 13px;


    font-weight: 700;


    color: #e8192c;


    letter-spacing: 0.8px;


    text-transform: uppercase;


    margin-bottom: 20px;


    padding-bottom: 10px;


    border-bottom: 2px solid #e8192c;


    display: flex;


    align-items: center;


    gap: 8px;


    position: relative;


}


.mycar-tab h2::after { display: none; }


.mycar-tab h2 .h2-accent { display: none; }





.mycar-tab h3 {


    font-size: 10px; font-weight: 700; color: #9ca3af;


    text-transform: uppercase; letter-spacing: 1px;


    margin: 24px 0 12px;


}





/* ── RESULT TABS (Datos del Equipo / Softwares) ─────────────── */


.mycar-result { margin-top: 20px; }





.mycar-result-tabs {


    margin-top: 20px;


    background: transparent;


    border: none;


    box-shadow: none;


    overflow: visible;


}


.mycar-result-tab-bar {


    display: flex; gap: 0;


    padding: 0;


    background: transparent;


    border-bottom: 2px solid #e5e7eb;


    margin-bottom: -10px;


}


.mycar-result-tab-btn {


    display: inline-flex; align-items: center; gap: 6px;


    padding: 10px 18px;


    font-size: 11px; font-weight: 700; font-family: var(--font);


    letter-spacing: 0.7px; text-transform: uppercase;


    color: #9ca3af;


    background: transparent !important; border: 1px solid transparent;


    border-bottom: 2.5px solid transparent;


    border-radius: 12px 12px 0 0;


    margin-bottom: -2px;


    box-shadow: none !important;


    cursor: pointer;


    transition: color 0.14s, border-color 0.14s, background-color 0.14s;


}


.mycar-result-tab-btn:hover { color: #e8192c; background: rgba(232,25,44,0.04) !important; }


.mycar-result-tab-btn.active {


    color: #c51424;


    background: #fff !important;


    border-color: #f1d5d9;


    border-bottom-color: #fff;


    font-weight: 800;


}


.mycar-result-tab-panel { display: none; }


.mycar-result-tab-panel.active { display: block; }

.mycar-result-tab-panel.dv2-tab-panel.active { display: grid; }





/* ── RESULT GRID ─────────────────────────────────────────────── */


.mycar-result-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    gap: 12px;


    align-items: start;


}


.mycar-result-grid.mycar-result-single { grid-template-columns: 1fr; max-width: 580px; }


.mycar-result-col { display: flex; flex-direction: column; gap: 12px; }





/* ── CARDS — estilo referencia visual ────────────────────────── */


.mycar-card {


    background: #ffffff;


    border: 1px solid #dde1e7;


    border-radius: 10px;


    overflow: hidden;


    margin-bottom: 16px;


    box-shadow: 0 1px 3px rgba(0,0,0,0.05);


    transition: box-shadow 0.18s, transform 0.18s;


    position: relative;


}


.mycar-card::before { display: none; }


.mycar-card > * { position: relative; z-index: 1; }


.mycar-card:hover {


    box-shadow: 0 3px 12px rgba(0,0,0,0.09);


}





/* Card title — dot rojo + texto uppercase, fondo blanco */


.mycar-card-title {


    display: flex;


    align-items: center;


    gap: 7px;


    font-size: 9.5px;


    font-weight: 800;


    text-transform: uppercase;


    letter-spacing: 1px;


    color: #374151;


    background: #ffffff;


    padding: 11px 14px 9px;


    border-bottom: 1px solid #f0f2f5;


}


/* El dot rojo se genera via ::before */


.mycar-card-title::before {


    content: '';


    display: inline-block;


    width: 7px; height: 7px;


    background: #e8192c;
    display: none;


    border-radius: 50%;


    flex-shrink: 0;


}





/* Card body */


.mycar-card-body { padding: 0; }





/* ── FIELDS GRID ─────────────────────────────────────────────── */


.mycar-fields-grid {


    display: grid;


    grid-template-columns: 1fr 1fr;


    background: #fff;


    border-radius: 0 0 6px 6px;


    overflow: hidden;


}


.mycar-field {


    padding: 12px 14px;


    display: flex; flex-direction: column; gap: 4px;


    background: #fff;


    border-bottom: 1px solid #f0f2f5;


    border-right: 1px solid #f0f2f5;


    transition: background 0.12s;


}


.mycar-field:nth-child(2n) { border-right: none; }


.mycar-field.full { grid-column: 1 / -1; border-right: none; }


.mycar-field:last-child, .mycar-field:nth-last-child(2):not(.full) { border-bottom: none; }


.mycar-field-label {


    font-size: 9px;


    font-weight: 700;


    text-transform: uppercase;


    letter-spacing: 0.8px;


    color: #9ca3af;


    margin-bottom: 2px;


}


.mycar-field-value {


    font-size: 14px;


    font-weight: 700;


    color: #111827;


    word-break: break-word;


    line-height: 1.4;


    user-select: text; cursor: text;


}


.mycar-fields-grid::after { content: ''; background: #fff; }





/* ── INLINE STATUS BADGE (REGISTERED, ACTIVE, etc.) ─────────── */


/* Estos se generan como spans inline en field-value */


span[style*="background:#dbeafe"],


span[style*="background: #dbeafe"] {


    display: inline-flex !important;


    align-items: center;


    padding: 2px 10px !important;


    border-radius: 4px !important;


    font-size: 11px !important;


    font-weight: 700 !important;


    letter-spacing: 0.5px;


}





/* ── FORM ELEMENTS ───────────────────────────────────────────── */


.mycar-form-group { margin-bottom: 18px; max-width: 500px; }


.mycar-form-group label {


    display: block; margin-bottom: 6px;


    font-size: 10.5px; font-weight: 700;


    text-transform: uppercase; letter-spacing: 0.7px; color: #6b7280;


}


.mycar-input,


.mycar-form-group select {


    width: 100%;


    padding: 10px 13px;


    border: 1.5px solid #dde1e7;


    border-radius: 6px;


    font-size: 14px; font-family: var(--font); color: #111827;


    background: #ffffff;


    box-shadow: 0 1px 2px rgba(0,0,0,0.03);


    transition: border-color 0.15s, box-shadow 0.15s;


    outline: none; -webkit-appearance: none;


}


.mycar-input::placeholder { color: #d1d5db; }


.mycar-input:hover, .mycar-form-group select:hover { border-color: #c4c9d4; }


.mycar-input:focus, .mycar-form-group select:focus {


    border-color: #e8192c;


    box-shadow: 0 0 0 3px rgba(232,25,44,0.08);


    background: #fff;


}





/* ── BUTTONS ─────────────────────────────────────────────────── */


.mycar-form-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }


.mycar-form-buttons--compact { margin-top: 12px; gap: 8px; }





.mycar-btn {


    display: inline-flex; align-items: center; justify-content: center; gap: 6px;


    padding: 9px 20px;


    border: none; border-radius: 6px;


    font-size: 11.5px; font-weight: 700; font-family: var(--font);


    letter-spacing: 0.5px; text-transform: uppercase;


    cursor: pointer;


    transition: all 0.15s ease;


    min-width: 110px; text-align: center; white-space: nowrap;


}


.mycar-btn:active { transform: scale(0.97); }





.mycar-btn-primary {


    background: #e8192c; color: #fff;


    box-shadow: 0 2px 6px rgba(232,25,44,0.25);


}


.mycar-btn-primary:hover {


    background: #c9141e;


    box-shadow: 0 4px 12px rgba(232,25,44,0.32);


    transform: translateY(-1px);


}





.mycar-btn-warning {


    background: #111827; color: #fff;


    box-shadow: 0 2px 6px rgba(0,0,0,0.15);


}


.mycar-btn-warning:hover {


    background: #1f2937;


    transform: translateY(-1px);


}





.mycar-btn-secondary { background: #f3f4f6; color: #374151; border: 1.5px solid #dde1e7; }


.mycar-btn-secondary:hover { background: #e5e7eb; color: #111827; }





.mycar-btn-dark { background: #111827; color: rgba(255,255,255,0.88); }


.mycar-btn-dark:hover { background: #1f2937; }





.mycar-btn-success {


    background: #16a34a; color: #fff;


    box-shadow: 0 2px 6px rgba(22,163,74,0.22);


}


.mycar-btn-success:hover { background: #15803d; transform: translateY(-1px); }





.mycar-btn-sm { padding: 7px 14px; font-size: 10.5px; min-width: unset; border-radius: 5px; }





.mycar-btn.mycar-btn-outline, button.mycar-btn-outline {


    background: #fff !important; border: 1.5px solid #dde1e7 !important;


    color: #6b7280 !important; box-shadow: none !important;


}


.mycar-btn.mycar-btn-outline:hover, button.mycar-btn-outline:hover {


    border-color: #e8192c !important; color: #e8192c !important;


    background: rgba(232,25,44,0.04) !important;


}





/* ── ACTIONS BAR ─────────────────────────────────────────────── */


.mycar-actions {


    display: flex; flex-wrap: wrap; gap: 7px;


    padding: 10px 14px;


    background: #fafafa;


    border-top: 1px solid #f0f2f5;


}


.mycar-mini-btn {


    display: inline-flex; align-items: center; gap: 5px;


    border: 1.5px solid #dde1e7; background: #fff;


    color: #6b7280; padding: 5px 11px; border-radius: 5px;


    cursor: pointer; font-size: 11px; font-weight: 600; font-family: var(--font);


    transition: border-color 0.13s, color 0.13s, background 0.13s;


}


.mycar-mini-btn:hover { border-color: #e8192c; color: #e8192c; background: rgba(232,25,44,0.04); }


.mycar-mini-btn-primary { background: #e8192c; border-color: #e8192c; color: #fff; }


.mycar-mini-btn-primary:hover { background: #c9141e; color: #fff; }





/* ── LOADER ──────────────────────────────────────────────────── */


.mycar-loader-wrap {


    display: flex; flex-direction: column; align-items: center;


    justify-content: center; padding: 48px 20px; gap: 12px;


}


.mycar-loader-text { font-size: 12px; color: #9ca3af; font-weight: 600; letter-spacing: 0.4px; }


.mycar-loader-ring { display: inline-block; position: relative; width: 36px; height: 36px; }


.mycar-loader-ring div {


    box-sizing: border-box; display: block; position: absolute;


    width: 28px; height: 28px; margin: 4px;


    border: 2.5px solid transparent; border-top-color: #e8192c;


    border-radius: 50%; animation: mcls-spin 1s cubic-bezier(0.5,0,0.5,1) infinite;


}


.mycar-loader-ring div:nth-child(1) { animation-delay: -0.3s; }


.mycar-loader-ring div:nth-child(2) { animation-delay: -0.2s; border-top-color: rgba(232,25,44,0.55); }


.mycar-loader-ring div:nth-child(3) { animation-delay: -0.1s; border-top-color: rgba(232,25,44,0.25); }


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





/* ── RAW JSON ────────────────────────────────────────────────── */


.mycar-raw summary {


    cursor: pointer; padding: 9px 14px;


    color: #9ca3af; font-size: 10.5px; font-weight: 700;


    background: #fafafa;


    border-top: 1px solid #f0f2f5;


    list-style: none; letter-spacing: 0.5px; text-transform: uppercase;


    transition: color 0.13s;


}


.mycar-raw summary::-webkit-details-marker { display: none; }


.mycar-raw summary::before { content: '▸  '; }


details[open] .mycar-raw summary::before { content: '▾  '; }


.mycar-raw summary:hover { color: #e8192c; }


.mycar-raw pre {


    background: #f8f9fb; padding: 12px 14px; margin: 0;


    overflow: auto; max-height: 280px;


    font-size: 11px; font-family: var(--mono); line-height: 1.65;


    border-top: 1px solid #eaecf0; color: #374151;


}





/* ── TABLE ───────────────────────────────────────────────────── */


.mycar-table {


    width: 100%; border-collapse: collapse; font-size: 12.5px;


}


.mycar-table th {


    padding: 8px 12px; text-align: left;


    background: #f8f9fb; color: #6b7280;


    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;


    border-bottom: 1.5px solid #e9edf2;


}


.mycar-table td {


    padding: 9px 12px; color: #111827;


    border-bottom: 1px solid #f3f4f6;


    font-weight: 500; font-size: 13px;


}


.mycar-table tr:last-child td { border-bottom: none; }


.mycar-table tr:hover td { background: #fafafa; }





/* ── CREDENTIALS TAB ─────────────────────────────────────────── */


.mycar-cred-info {


    display: flex; gap: 12px;


    background: #eff6ff; border: 1px solid #bfdbfe; border-left: 3px solid #2563eb;


    border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;


    align-items: flex-start; max-width: 580px;


}


.mycar-cred-info-icon { font-size: 17px; line-height: 1; margin-top: 2px; }


.mycar-cred-info-text { font-size: 13px; color: #1e3a5f; line-height: 1.6; }


.mycar-cred-info-text strong { display: block; margin-bottom: 3px; }


.mycar-cred-info-text p { margin: 4px 0 0; color: #3b6baf; }





.mycar-cred-status {


    display: flex; align-items: center; gap: 8px; padding: 9px 13px;


    border-radius: 6px; font-size: 13px; margin-bottom: 16px; max-width: 580px;


}


.mycar-cred-status--ok    { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }


.mycar-cred-status--empty { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }


.mycar-cred-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }


.mycar-cred-status--ok    .mycar-cred-status-dot { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,0.45); }


.mycar-cred-status--empty .mycar-cred-status-dot { background: #f59e0b; }


.mycar-cred-btn-link {


    background: none; border: none; color: #166534; text-decoration: underline;


    cursor: pointer; font-size: 12px; margin-left: auto; padding: 0; font-family: var(--font);


}


.mycar-cred-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 4px; }


.mycar-cred-field { display: flex; flex-direction: column; gap: 5px; }


.mycar-cred-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #9ca3af; }





/* ── APP DOWNLOAD ────────────────────────────────────────────── */


.mycar-app-info-card {


    background: #fff; border: 1px solid #dde1e7;


    border-radius: 6px; padding: 16px; margin-top: 8px;


    box-shadow: 0 1px 3px rgba(0,0,0,0.04);


}


.mycar-app-info-header {


    display: flex; align-items: center; gap: 12px;


    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #f0f2f5;


}


.mycar-app-info-name { font-size: 14px; font-weight: 700; color: #111827; line-height: 1.3; }


.mycar-app-info-package { font-size: 11px; color: #9ca3af; font-family: var(--mono); margin-top: 2px; }


.mycar-app-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }


.mycar-app-info-item { display: flex; flex-direction: column; gap: 3px; }


.mycar-app-info-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #b0bac9; }


.mycar-app-info-value { font-size: 13px; color: #1e293b; font-weight: 500; }


.mycar-app-info-value.mono { font-family: var(--mono); font-size: 11px; }


.mycar-version-badge {


    display: inline-block; background: #e8192c; color: #fff;


    font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 4px;


}





/* ── APK SHORT LINK ──────────────────────────────────────────── */


.apk-short-url-box {


    font-size: 12px; font-family: var(--mono); color: #e8192c;


    background: rgba(232,25,44,0.05); border: 1px solid rgba(232,25,44,0.15);


    border-radius: 6px; padding: 8px 12px; word-break: break-all; margin-bottom: 8px;


}


.apk-btn-copy {


    display: flex; align-items: center; justify-content: center; gap: 7px;


    width: 100%; padding: 10px 18px; border-radius: 6px; border: none;


    background: #e8192c; color: #fff; font-size: 12px; font-weight: 700;


    font-family: var(--font); cursor: pointer;


    box-shadow: 0 3px 8px rgba(232,25,44,0.22);


    transition: opacity 0.15s, transform 0.15s;


}


.apk-btn-copy:hover { opacity: 0.9; transform: translateY(-1px); }


.apk-btn-copy:active { transform: scale(0.98); }


.apk-btn-copy.copied { background: #16a34a; box-shadow: 0 3px 8px rgba(22,163,74,0.22); }





/* ── FOOTER ──────────────────────────────────────────────────── */


.mycar-footer-bar {


    display: flex; align-items: center; justify-content: center; gap: 8px;


    padding: 6px 16px; border-top: 1px solid var(--sb-border);


    background: var(--sb-bg); font-size: 11px; color: rgba(255,255,255,0.2);


    letter-spacing: 0.2px; flex-shrink: 0; z-index: 10;


}


.mycar-footer-bar strong { color: rgba(255,255,255,0.38); font-weight: 600; }


.mycar-footer-bar a { color: var(--red); text-decoration: none; opacity: 0.8; }


.mycar-footer-mobile { display: none; }


.mycar-mobile-profile { display: none; }





/* ── SOFTWARES & EXPANSIONES ─────────────────────────────────── */


/* Las sw cards usan estilos inline en el JS, pero heredan .mycar-card */


@keyframes mcls-spin {


    from { transform: rotate(0deg); }


    to   { transform: rotate(360deg); }


}


.mycar-swe-accordion { transition: box-shadow .15s; }


.mycar-swe-accordion:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }


.mycar-swe-acc-body { animation: sweSlideIn .18s ease; }


@keyframes sweSlideIn {


    from { opacity: 0; transform: translateY(-5px); }


    to   { opacity: 1; transform: translateY(0); }


}








.mycar-swe-summary-grid {


    display: grid;


    grid-template-columns: repeat(4, minmax(0, 1fr));


    gap: 12px;


}


.mycar-swe-package-base .mycar-swe-package-index.base {


    min-width: 64px;


    padding: 12px 14px;


    background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);


    font-size: 14px;


    letter-spacing: 0.8px;


}


.mycar-swe-package-base .mycar-swe-package-name {


    color: #0f172a;


}


.mycar-swe-package-base .mycar-swe-acc-header {


    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);


}


.mycar-swe-package-base .mycar-swe-acc-body {


    border-top: 1px solid #dbeafe;


}





/* ── RESPONSIVE ──────────────────────────────────────────────── */


@media (max-width: 900px) {


    .mycar-result-grid { grid-template-columns: 1fr; gap: 0; }


    .mycar-result-grid.mycar-result-single { max-width: 100%; }


}





@media (max-width: 768px) {


    .mycar-ops-container { height: 100svh; overflow: hidden; }


    .mycar-ops-content { flex-direction: column; overflow-y: auto; flex: 1; }





    .mycar-sidebar {


        position: relative !important; width: 100% !important;


        height: auto !important; min-height: unset !important; flex-shrink: 0;


        transform: none !important; transition: none !important;


        background: linear-gradient(135deg, #0c0e14 0%, #131620 50%, #120810 100%) !important;


        box-shadow: 0 2px 16px rgba(232,25,44,0.1), 0 1px 0 rgba(232,25,44,0.12);


    }


    .mycar-sidebar::after { display: none; }


    .mycar-sidebar::before {


        content: ''; position: absolute; inset: 0;


        background-image:


            linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),


            linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);


        background-size: 18px 18px; pointer-events: none; z-index: 0;


    }


    .mycar-sidebar-inner {


        position: relative; z-index: 1;


        display: flex; flex-direction: row; align-items: center;


        justify-content: center; gap: 2px; padding: 5px 10px;


        overflow: visible; height: auto;


    }


    .mycar-hamburger { display: none !important; }


    .mycar-sidebar-brand-text { display: none !important; }


    .mycar-nav-category-label,


    .mycar-nav-category-arrow { display: none !important; }


    .mycar-nav-submenu { display: none !important; }





    .mycar-sidebar-brand {


        padding: 0 10px 0 0; border-bottom: none;


        border-right: 1px solid rgba(232,25,44,0.2); margin-right: 6px;


        flex-shrink: 0; display: flex; align-items: center; gap: 6px;


    }


    .mycar-sidebar-brand-icon { width: 24px; height: 24px; cursor: pointer; flex-shrink: 0; }


    .mycar-sidebar-brand-text {


        display: flex !important; flex-direction: column;


        line-height: 1.1; font-size: 9px; font-weight: 500;


        color: rgba(255,255,255,0.6); white-space: nowrap;


    }


    .mycar-sidebar-brand-text strong { font-size: 10px; font-weight: 700; color: var(--red); }





    .mycar-nav-group {


        margin: 0; position: relative; flex: 1;


        display: flex; justify-content: center; max-width: 54px;


    }


    .mycar-nav-category {


        padding: 0; justify-content: center; width: 100%;


        aspect-ratio: 1; max-width: 36px; max-height: 36px; border-radius: var(--r-sm);


    }


    .mycar-nav-category-icon { width: 28px; height: 28px; max-width: 100%; border-radius: 7px; }


    .mycar-nav-category-icon svg { width: 13px; height: 13px; }





    .mycar-nav-tooltip {


        display: block !important; position: absolute !important;


        top: calc(100% + 10px) !important; left: 50% !important;


        transform: translateX(-50%) translateY(-4px) !important;


        z-index: 9999; min-width: 185px;


    }


    .mycar-nav-tooltip.visible {


        transform: translateX(-50%) translateY(0) !important; opacity: 1; pointer-events: all;


    }


    .mycar-nav-tooltip::before {


        left: 50% !important; top: -7px !important; transform: translateX(-50%) !important;


        border-top: none !important; border-bottom: 7px solid rgba(255,255,255,0.1) !important;


        border-left: 7px solid transparent !important; border-right: 7px solid transparent !important;


    }


    .mycar-nav-tooltip::after {


        left: 50% !important; top: -5px !important; transform: translateX(-50%) !important;


        border-top: none !important; border-bottom: 6px solid #1a1d28 !important;


        border-left: 6px solid transparent !important; border-right: 6px solid transparent !important;


    }





    .mycar-mobile-profile {


        display: block; position: absolute; top: calc(100% + 10px); left: 8px;


        z-index: 9999; background: var(--sb-bg);


        border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r-xl);


        padding: 16px; min-width: 195px;


        box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(232,25,44,0.15);


        opacity: 0; pointer-events: none; transform: translateY(-4px);


        transition: opacity 0.18s, transform 0.18s;


    }


    .mycar-mobile-profile.visible { opacity: 1; pointer-events: all; transform: translateY(0); }


    .mycar-mobile-profile::before {


        content: ''; position: absolute; left: 18px; top: -7px;


        border: 7px solid transparent; border-bottom-color: rgba(255,255,255,0.08);


    }


    .mycar-mobile-profile::after {


        content: ''; position: absolute; left: 19px; top: -5px;


        border: 6px solid transparent; border-bottom-color: var(--sb-bg);


    }


    .mycar-mobile-profile-logo {


        display: flex; align-items: center; gap: 10px;


        margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.07);


    }


    .mycar-mobile-profile-logo svg { width: 26px; height: 26px; }


    .mycar-mobile-profile-name { font-size: 13px; font-weight: 700; color: #fff; }


    .mycar-mobile-profile-name span { color: var(--red); }


    .mycar-mobile-profile-user { font-size: 11.5px; color: rgba(255,255,255,0.4); margin-bottom: 10px; }


    .mycar-mobile-profile-badge {


        display: inline-flex; align-items: center; gap: 5px;


        background: var(--red-dim); border: 1px solid rgba(232,25,44,0.28);


        border-radius: 20px; padding: 3px 10px;


        font-size: 11px; color: #ff8fa3; font-weight: 600;


    }





    .mycar-tab { padding: 16px 14px; background: #f0f2f5; }


    .mycar-tab h2 { font-size: 11px; }


    .mycar-form-group { max-width: 100%; }


    .mycar-form-buttons { flex-direction: column; gap: 8px; }


    .mycar-btn { width: 100%; min-width: unset; padding: 12px 16px; }


    .mycar-sidebar-overlay { display: none !important; }


    .mycar-footer-bar { display: none; }


    .mycar-footer-mobile {


        display: flex; flex-direction: column; align-items: center;


        padding: 5px 16px; border-top: 1px solid var(--sb-border);


        background: var(--sb-bg); font-size: 10px; color: rgba(255,255,255,0.2);


        flex-shrink: 0; text-align: center;


    }


    .mycar-footer-mobile a { color: var(--red); text-decoration: none; opacity: 0.8; }


    .mycar-footer-mobile strong { color: rgba(255,255,255,0.38); font-weight: 600; }


    .mycar-cred-form-grid { grid-template-columns: 1fr; }


    .mycar-result-grid { gap: 8px; }


    .mycar-result-tab-bar {


        gap: 8px;


        overflow-x: auto;


        padding-bottom: 2px;


        scrollbar-width: none;


    }


    .mycar-result-tab-bar::-webkit-scrollbar { display: none; }


    .mycar-result-tab-btn {


        flex: 1 0 auto;


        justify-content: center;


        min-width: 140px;


        border-radius: 12px;


        border-bottom-width: 1px;


        margin-bottom: 0;


    }


    .mycar-result-tab-btn.active {


        border-bottom-color: #f1d5d9;


        box-shadow: 0 2px 8px rgba(15,23,42,0.05) !important;


    }


    .mycar-swe-summary-grid {


        grid-template-columns: repeat(2, minmax(0, 1fr));


        gap: 10px;


    }


    .mycar-swe-chip {


        min-height: 122px;


    }


    .mycar-swe-chip-value {


        font-size: 28px;


    }


}





@media (max-width: 480px) {


    .mycar-tab h2 { font-size: 10px; }


    .mycar-fields-grid { grid-template-columns: 1fr; }


    .mycar-field { border-right: none; }


    .mycar-app-info-grid { grid-template-columns: 1fr; }


}





/* ── INFO BANNER ─────────────────────────────────────────────── */


.mycar-tab > div[style*="background:#fff8e1"],


.mycar-tab > div[style*="background: #fff8e1"] {


    border-radius: 6px !important;


    font-size: 12.5px !important;


    padding: 10px 14px !important;


}





/* ── SOFTWARES & EXPANSIONS REDESIGN ─────────────────────────── */


.mycar-swe-layout {


    display: flex;


    flex-direction: column;


    gap: 14px;


    padding-top: 8px;


}


.mycar-swe-hero,


.mycar-swe-section {


    border-radius: 10px;


    overflow: hidden;


}


.mycar-swe-hero .mycar-card-body,


.mycar-swe-section .mycar-card-body,


.mycar-swe-debug .mycar-card-body {


    padding: 14px;


}


.mycar-swe-hero-title,


.mycar-swe-section-title-wrap {


    justify-content: flex-start;


    align-items: flex-start;


    gap: 12px;


}


.mycar-swe-section-title-block {


    display: flex;


    flex-direction: column;


    gap: 4px;


}


.mycar-swe-section-kicker {


    font-size: 10px;


    font-weight: 800;


    text-transform: uppercase;


    letter-spacing: 0.9px;


    color: #374151;


}


.mycar-swe-section-subtitle {


    font-size: 12px;


    font-weight: 500;


    line-height: 1.5;


    color: #6b7280;


    text-transform: none;


    letter-spacing: 0;


}


.mycar-swe-section-actions {


    display: flex;


    align-items: center;


    gap: 8px;


    flex-wrap: wrap;


    margin-left: auto;


}


.mycar-swe-hero-grid {


    display: grid;


    grid-template-columns: 1.4fr .8fr;


    gap: 12px;


}


.mycar-swe-hero-main,


.mycar-swe-hero-side,


.mycar-swe-summary-grid,


.mycar-swe-package-summary {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));


    gap: 10px;


}


.mycar-swe-chip,


.mycar-swe-metric {


    background: #f8fafc;


    border: 1px solid #e5e7eb;


    border-radius: 10px;


    padding: 12px 14px;


    min-height: 72px;


    display: flex;


    flex-direction: column;


    justify-content: center;


    gap: 4px;


}


.mycar-swe-chip-value,


.mycar-swe-metric-value {


    font-size: 20px;


    line-height: 1.1;


    font-weight: 800;


    color: #111827;


}


.mycar-swe-chip-label,


.mycar-swe-metric-label {


    font-size: 11px;


    color: #6b7280;


    font-weight: 600;


}


.mycar-swe-chip.blue { background:#eff6ff; border-color:#bfdbfe; }


.mycar-swe-chip.blue .mycar-swe-chip-value { color:#1d4ed8; }


.mycar-swe-chip.green { background:#f0fdf4; border-color:#bbf7d0; }


.mycar-swe-chip.green .mycar-swe-chip-value { color:#15803d; }


.mycar-swe-chip.red { background:#fff1f2; border-color:#fecdd3; }


.mycar-swe-chip.red .mycar-swe-chip-value { color:#be123c; }


.mycar-swe-chip.purple { background:#faf5ff; border-color:#e9d5ff; }


.mycar-swe-chip.purple .mycar-swe-chip-value { color:#7e22ce; }


.mycar-swe-chip.cyan { background:#ecfeff; border-color:#a5f3fc; }


.mycar-swe-chip.cyan .mycar-swe-chip-value { color:#0f766e; }


.mycar-swe-chip.amber { background:#fffbeb; border-color:#fde68a; }


.mycar-swe-chip.amber .mycar-swe-chip-value { color:#b45309; }


.mycar-swe-chip.neutral { background:#f8fafc; border-color:#e5e7eb; }


.mycar-swe-accent-blue { border-top: 3px solid #2563eb; }


.mycar-swe-accent-red { border-top: 3px solid #dc2626; }


.mycar-swe-accent-purple { border-top: 3px solid #9333ea; }


.mycar-swe-accent-cyan { border-top: 3px solid #0891b2; }


.mycar-swe-accent-amber { border-top: 3px solid #d97706; }


.mycar-swe-search {


    width: 100%;


    border: 1px solid #dbe2ea;


    border-radius: 8px;


    padding: 10px 12px;


    font-size: 13px;


    outline: none;


    transition: border-color .15s, box-shadow .15s;


}


.mycar-swe-search:focus {


    border-color: #e8192c;


    box-shadow: 0 0 0 3px rgba(232,25,44,.08);


}


.mycar-swe-toolbar {


    display: flex;


    align-items: center;


    gap: 10px;


    flex-wrap: wrap;


    margin: 12px 0 10px;


}


.mycar-swe-search-count {


    font-size: 12px;


    color: #6b7280;


    font-weight: 600;


    white-space: nowrap;


}


.mycar-swe-table-wrap {


    overflow: auto;


    border: 1px solid #e5e7eb !important;


    border-radius: 10px;


    background: #fff;


    box-shadow: none !important;


}


.mycar-swe-table {


    width: 100%;


    border-collapse: collapse;


    min-width: 720px;


    border: 0 !important;


    outline: 0 !important;


    box-shadow: none !important;


}


.mycar-swe-table th {


    position: sticky;


    top: 0;


    z-index: 1;


    background: #f8fafc;


    color: #6b7280;


    font-size: 10px;


    text-transform: uppercase;


    letter-spacing: .8px;


    padding: 11px 12px;


    text-align: left;


    border-bottom: 1px solid #e5e7eb;


}


.mycar-swe-table td {


    padding: 11px 12px;


    font-size: 13px;


    color: #111827;


    border-bottom: 1px solid #f1f5f9;


    vertical-align: middle;


}


.mycar-swe-table tbody tr:hover td { background:#fafafa; }


.mycar-swe-table tbody tr.is-expired td { background:#fff8f8; }


.mycar-swe-table tbody tr.is-warning td { background:#fffbea; }


.mycar-swe-table td.is-deadline { font-weight: 700; }


.mycar-swe-sw-name {


    font-weight: 700;


    line-height: 1.45;


}


.mycar-swe-badge {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    min-width: 86px;


    padding: 5px 10px;


    border-radius: 999px;


    font-size: 11px;


    font-weight: 700;


    white-space: nowrap;


}


.mycar-swe-badge.ok { background:#e8f5ec; color:#1a5632; }


.mycar-swe-badge.bad { background:#fce8ea; color:#8B1A2B; }


.mycar-swe-badge.warn { background:#fef3c7; color:#92400e; }


.mycar-swe-badge.muted { background:#f3f4f6; color:#6b7280; }


.mycar-swe-empty {


    padding: 18px;


    background: #f8fafc;


    border: 1px dashed #d7dde5;


    border-radius: 10px;


    color: #6b7280;


    font-size: 13px;


    text-align: center;


}


.mycar-swe-alert {


    display: flex;


    align-items: center;


    gap: 10px;


    margin: 0 0 12px;


    padding: 12px 14px;


    border: 1px solid #fde68a;


    background: #fffbeb;


    border-radius: 10px;


    color: #92400e;


    font-size: 13px;


    font-weight: 600;


}


.mycar-swe-alert-icon {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    width: 20px;


    height: 20px;


    border-radius: 999px;


    background: #fef3c7;


    flex-shrink: 0;


}


.mycar-swe-empty.compact { margin-top: 10px; }


.mycar-swe-package-list {


    display: flex;


    flex-direction: column;


    gap: 12px;


}


.mycar-swe-package {


    border: 1px solid #e5e7eb;


    border-radius: 10px;


    overflow: hidden;


    background: #fff;


}


.mycar-swe-package.is-active { border-color: #ccebd6; }


.mycar-swe-package.is-expired { border-color: #fecaca; }


.mycar-swe-package.is-warning { border-color: #fde68a; }


.mycar-swe-acc-header {


    width: 100%;


    border: none;


    background: #fff;


    cursor: pointer;


    display: flex;


    align-items: center;


    justify-content: space-between;


    gap: 12px;


    padding: 14px 16px;


    text-align: left;


}


.mycar-swe-package.is-active .mycar-swe-acc-header { background: linear-gradient(180deg, #f7fcf8, #ffffff); }


.mycar-swe-package.is-expired .mycar-swe-acc-header { background: linear-gradient(180deg, #fff7f7, #ffffff); }


.mycar-swe-package.is-warning .mycar-swe-acc-header { background: linear-gradient(180deg, #fffdf2, #ffffff); }


.mycar-swe-package-heading {


    display: flex;


    align-items: flex-start;


    gap: 12px;


    min-width: 0;


}


.mycar-swe-package-index {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    min-width: 34px;


    height: 28px;


    border-radius: 8px;


    background: #111827;


    color: #fff;


    font-size: 11px;


    font-weight: 800;


    flex-shrink: 0;


}


.mycar-swe-package-copy { min-width: 0; }


.mycar-swe-package-name {


    font-size: 13px;


    font-weight: 800;


    color: #111827;


    line-height: 1.4;


}


.mycar-swe-package-meta {


    margin-top: 3px;


    font-size: 11px;


    color: #6b7280;


    line-height: 1.5;


}


.mycar-swe-package-actions {


    display: flex;


    align-items: center;


    gap: 10px;


    flex-shrink: 0;


}


.mycar-swe-chevron {


    width: 18px;


    height: 18px;


    transition: transform .2s ease;


    color: #6b7280;


}


.mycar-swe-acc-body {


    padding: 0 16px 16px;


    border-top: 1px solid #edf2f7;


}


.mycar-swe-package-summary {


    margin: 12px 0;


}


.mycar-swe-inline-note {


    display: inline-flex;


    align-items: center;


    margin-left: 8px;


    padding: 2px 8px;


    border-radius: 999px;


    background: #fef3c7;


    color: #92400e;


    font-size: 10px;


    font-weight: 700;


}


.mycar-swe-hardware-list {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));


    gap: 10px;


}


.mycar-swe-hardware-item {


    border: 1px solid #fde68a;


    background: #fffbeb;


    border-radius: 10px;


    padding: 14px;


}


.mycar-swe-hardware-name {


    font-size: 13px;


    font-weight: 800;


    color: #111827;


}


.mycar-swe-hardware-sn {


    margin-top: 4px;


    font-size: 11px;


    color: #92400e;


}


.mycar-swe-footnote {


    margin-top: 10px;


    font-size: 11px;


    color: #6b7280;


}





@media (max-width: 980px) {


    .mycar-swe-hero-grid { grid-template-columns: 1fr; }


}


@media (max-width: 768px) {


    .mycar-swe-hero .mycar-card-body,


    .mycar-swe-section .mycar-card-body,


    .mycar-swe-debug .mycar-card-body { padding: 12px; }


    .mycar-swe-summary-grid,


    .mycar-swe-package-summary,


    .mycar-swe-hero-main,


    .mycar-swe-hero-side { grid-template-columns: 1fr 1fr; }


    .mycar-swe-acc-header { padding: 12px; }


    .mycar-swe-package-heading { gap: 10px; }


    .mycar-swe-package-actions { align-self: flex-start; }


}


@media (max-width: 560px) {


    .mycar-swe-summary-grid,


    .mycar-swe-package-summary,


    .mycar-swe-hero-main,


    .mycar-swe-hero-side,


    .mycar-swe-hardware-list { grid-template-columns: 1fr; }


    .mycar-swe-toolbar { flex-direction: column; align-items: stretch; }


    .mycar-swe-search-count { white-space: normal; }


    .mycar-swe-section-actions { width: 100%; }


    .mycar-swe-acc-header {


        flex-direction: column;


        align-items: stretch;


    }


    .mycar-swe-package-actions {


        justify-content: space-between;


        width: 100%;


    }


}








@media (max-width: 480px) {


    .mycar-swe-table,


    .mycar-swe-table thead,


    .mycar-swe-table tbody,


    .mycar-swe-table tr,


    .mycar-swe-table th,


    .mycar-swe-table td {


        display: block;


        width: 100%;


        min-width: 0;


    }


    .mycar-swe-table {


        min-width: 0;


    }


    .mycar-swe-table thead {


        display: none;


    }


    .mycar-swe-table tbody {


        display: grid;


        gap: 10px;


        padding: 10px;


    }


    .mycar-swe-table tbody tr {


        border: 1px solid #e5e7eb !important;


        border-radius: 12px;


        background: #fff;


        overflow: hidden;


    }


    .mycar-swe-table tbody tr.is-warning {


        border-color: #fde68a !important;


    }


    .mycar-swe-table tbody tr.is-expired {


        border-color: #fecaca !important;


    }


    .mycar-swe-table td {


        border-bottom: 1px solid #f1f5f9;


        padding: 10px 12px;


        display: flex;


        align-items: flex-start;


        justify-content: space-between;


        gap: 12px;


        text-align: right;


    }


    .mycar-swe-table td:last-child {


        border-bottom: 0;


    }


    .mycar-swe-table td::before {


        content: attr(data-label);


        font-size: 10px;


        font-weight: 700;


        text-transform: uppercase;


        letter-spacing: .6px;


        color: #6b7280;


        text-align: left;


        flex: 0 0 42%;


        max-width: 42%;


    }


    .mycar-swe-table td > * {


        margin-left: auto;


    }


    .mycar-swe-sw-name {


        text-align: right;


        max-width: 58%;


    }


}








/* ── EQUIPMENT LOOKUP REDESIGN ───────────────────────────────── */


.mycar-eq-layout {


    display: grid;


    gap: 14px;


}


.mycar-eq-hero,


.mycar-eq-section {


    overflow: hidden;


}


.mycar-eq-hero .mycar-card-body,


.mycar-eq-section .mycar-card-body {


    padding: 0;


}


.mycar-eq-section-title-wrap,


.mycar-eq-hero-title {


    display: flex;


    align-items: flex-start;


    justify-content: flex-start;


    gap: 14px;


    padding: 14px 16px;


}


.mycar-eq-section-title-block {


    display: flex;


    flex-direction: column;


    gap: 8px;


    min-width: 0;


}


.mycar-eq-section-kicker {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    color: #111827;
}


.mycar-eq-section-subtitle {
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}


.mycar-eq-section-actions {


    flex-shrink: 0;


    margin-left: auto;


}


.mycar-eq-summary-grid,


.mycar-eq-mini-grid {


    display: grid;


    grid-template-columns: repeat(3, minmax(0, 1fr));


    gap: 10px;


    padding: 0 16px 16px;


}


.mycar-eq-mini-grid {


    grid-template-columns: repeat(2, minmax(0, 1fr));


    padding-top: 16px;


}


.mycar-eq-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}


.mycar-eq-chip.blue { background: #eef2f7; border-color: #c7d4e4; }


.mycar-eq-chip.green { background: #edf5f0; border-color: #c1dcc9; }


.mycar-eq-chip.amber { background: #fdf8ef; border-color: #e8d5a8; }


.mycar-eq-chip.cyan { background: #eef6f8; border-color: #b8dce4; }


.mycar-eq-chip.red { background: #fdf2f3; border-color: #e8b4bb; }


.mycar-eq-chip.neutral { background: #f5f5f6; border-color: #dcdee2; }


.mycar-eq-chip-value {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
    color: #111827;
    word-break: break-word;
    font-family: 'DM Mono', 'JetBrains Mono', monospace;
}


.mycar-eq-chip-label {
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 600;
}


.mycar-eq-badge {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    min-height: auto;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: none;


    white-space: nowrap;


}


.mycar-eq-badge.ok { background: #e8f5ec; color: #1a5632; }


.mycar-eq-badge.muted { background: #f3f4f6; color: #6b7280; }


.mycar-eq-table-wrap {


    padding: 16px;


}


.mycar-eq-empty {


    margin: 16px;


    padding: 18px;


    border: 1px dashed #d1d5db;


    border-radius: 14px;


    text-align: center;


    color: #6b7280;


    background: #fbfbfc;


}


.mycar-eq-hardware-grid {


    display: grid;


    grid-template-columns: repeat(2, minmax(0, 1fr));


    gap: 12px;


    padding: 16px;


}


.mycar-eq-hardware-card {


    padding: 12px 14px;


    border-radius: 12px;


    border: 1px solid #f2dfaa;


    background: #fffdf5;


}


.mycar-eq-hardware-name {


    font-size: 13px;


    line-height: 1.4;


    font-weight: 600;


    color: #111827;


    margin-bottom: 6px;


}


.mycar-eq-hardware-serial {


    font-size: 12px;


    color: #92400e;


}


.mycar-eq-sgw-section {


    margin-top: 16px;


}


.mycar-eq-sgw-title {


    font-size: 12px;


    font-weight: 600;


    color: #6b7280;


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 12px;


    padding-top: 12px;


    border-top: 1px solid #e5e7eb;


}


.mycar-eq-sgw-field-row {


    margin-top: 16px;


}


.mycar-eq-sgw-label {


    font-size: 12px;


    font-weight: 600;


    color: #6b7280;


    text-transform: uppercase;


    letter-spacing: 0.5px;


    margin-bottom: 12px;


    display: block;


    padding-top: 12px;


    border-top: 1px solid #e5e7eb;


}


.mycar-eq-hardware-card-actual {


    background: linear-gradient(135deg, #dcfce7 0%, #fffdf5 100%);


    border: 2px solid #16a34a;


}


.mycar-eq-hardware-badge-actual {


    display: inline-block;


    background: #16a34a;


    color: white;


    font-size: 10px;


    font-weight: 700;


    padding: 3px 8px;


    border-radius: 4px;


    margin-bottom: 4px;


    text-transform: uppercase;


}


.mycar-eq-accent-blue { border-top: none; border-left: 3px solid #1e3a5f; }


.mycar-eq-accent-green { border-top: none; border-left: 3px solid #1a5632; }


.mycar-eq-accent-cyan { border-top: none; border-left: 3px solid #155e75; }


.mycar-eq-accent-purple { border-top: none; border-left: 3px solid #581c87; }


.mycar-eq-accent-amber { border-top: none; border-left: 3px solid #92400e; }


.mycar-eq-accent-red { border-top: none; border-left: 3px solid #8B1A2B; }


.mycar-eq-debug details { margin-top: 4px; }





@media (max-width: 900px) {


    .mycar-eq-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }


    .mycar-eq-hardware-grid { grid-template-columns: 1fr; }


}





@media (max-width: 640px) {


    .mycar-eq-section-title-wrap,


    .mycar-eq-hero-title {


        flex-direction: column;


        align-items: stretch;


    }


    .mycar-eq-summary-grid,


    .mycar-eq-mini-grid {


        grid-template-columns: 1fr 1fr;


        padding: 0 12px 12px;


    }


    .mycar-eq-chip {


        min-height: 84px;


        padding: 14px;


        border-radius: 12px;


    }


    .mycar-eq-chip-value { font-size: 15px; }


    .mycar-eq-chip-label { font-size: 10px; }


    .mycar-eq-table-wrap { padding: 12px; }


}





@media (max-width: 430px) {


    .mycar-eq-summary-grid,


    .mycar-eq-mini-grid {


        grid-template-columns: 1fr;


    }


}








/* ── PASSWORD CHANGE RESULT (MODERN) ────────────────────────── */


.mycar-pw-result{


    padding:16px;


    display:flex;


    flex-direction:column;


    gap:14px;


    background:linear-gradient(180deg,#ffffff 0%,#fcfcfd 100%);


}


.mycar-pw-hero{


    display:flex;


    justify-content:space-between;


    gap:14px;


    align-items:flex-start;


    padding:16px;


    border:1px solid #edf0f3;


    border-radius:16px;


    background:#ffffff;


    box-shadow:0 10px 24px rgba(15,23,42,.04);


}


.mycar-pw-hero-main{flex:1; min-width:0;}


.mycar-pw-eyebrow,


.mycar-pw-summary-label{


    font-size:11px;


    font-weight:700;


    text-transform:uppercase;


    letter-spacing:1px;


    color:#7b8391;


}


.mycar-pw-message{


    margin-top:8px;


    font-size:18px;


    line-height:1.45;


    font-weight:700;


    color:#111827;


}


.mycar-pw-hero-side{


    display:flex;


    flex-direction:column;


    align-items:flex-end;


    gap:10px;


    flex-shrink:0;


}


.mycar-pw-status{


    display:inline-flex;


    align-items:center;


    gap:8px;


    padding:10px 14px;


    border-radius:999px;


    font-size:13px;


    font-weight:700;


}


.mycar-pw-status-icon{


    width:20px;


    height:20px;


    border-radius:999px;


    display:inline-flex;


    align-items:center;


    justify-content:center;


    font-size:12px;


    background:rgba(255,255,255,.85);


}


.mycar-pw-status.is-success{ background:#dcfce7; color:#166534; }


.mycar-pw-status.is-error{ background:#fee2e2; color:#991b1b; }


.mycar-pw-time{


    font-size:12px;


    color:#6b7280;


    text-align:right;


}


.mycar-pw-summary-grid{


    display:grid;


    grid-template-columns:repeat(3,minmax(0,1fr));


    gap:12px;


}


.mycar-pw-summary-card,


.mycar-pw-secret,


.mycar-pw-copy-wrap{


    background:#fff;


    border:1px solid #edf0f3;


    border-radius:16px;


    padding:14px 16px;


    box-shadow:0 8px 18px rgba(15,23,42,.03);


}


.mycar-pw-summary-value{


    margin-top:8px;


    font-size:21px;


    line-height:1.25;


    font-weight:800;


    color:#0f172a;


    word-break:break-word;


}


.mycar-pw-secret-head{


    display:flex;


    justify-content:space-between;


    gap:12px;


    align-items:flex-start;


}


.mycar-pw-secret-help{


    margin-top:6px;


    font-size:13px;


    color:#6b7280;


}


.mycar-pw-secret-row{


    margin-top:12px;


    display:flex;


    align-items:center;


    gap:12px;


    justify-content:space-between;


    flex-wrap:wrap;


}


.mycar-pw-secret-value{


    display:inline-flex;


    align-items:center;


    min-height:46px;


    padding:0 14px;


    border-radius:12px;


    border:1px solid #e5e7eb;


    background:#f8fafc;


    font-size:20px;


    font-weight:800;


    letter-spacing:2px;


    color:#111827;


}


.mycar-pw-secret-actions,


.mycar-pw-copy-bar{


    display:flex;


    gap:10px;


    flex-wrap:wrap;


}


.mycar-pw-copy-wrap{ display:flex; flex-direction:column; gap:10px; }


.mycar-btn-sm{


    font-size:12px !important;


    padding:8px 12px !important;


    border-radius:10px !important;


}


@media (max-width: 767px){


    .mycar-pw-result{ padding:12px; gap:12px; }


    .mycar-pw-hero{ flex-direction:column; align-items:stretch; }


    .mycar-pw-hero-side{ align-items:flex-start; }


    .mycar-pw-summary-grid{ grid-template-columns:1fr; }


    .mycar-pw-message{ font-size:16px; }


    .mycar-pw-summary-value{ font-size:18px; }


    .mycar-pw-secret-value{ width:100%; justify-content:flex-start; font-size:18px; }


    .mycar-pw-secret-actions,


    .mycar-pw-copy-bar{ display:grid; grid-template-columns:1fr 1fr; }


    .mycar-pw-secret-actions .mycar-btn,


    .mycar-pw-copy-bar .mycar-btn{ width:100%; justify-content:center; }


}


@media (max-width: 420px){


    .mycar-pw-secret-actions,


    .mycar-pw-copy-bar{ grid-template-columns:1fr; }


}



/* ──────────────────────────────────────────────────────────────────
   Software Expansions Summary Grid
   ────────────────────────────────────────────────────────────────── */





/* ──────────────────────────────────────────────────────────────────
   Software Expansions Summary Wrapper
   ────────────────────────────────────────────────────────────────── */



/* Summary Grid dentro del wrapper */
.mycar-swe-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .mycar-swe-summary-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}


/* ──────────────────────────────────────────────────────────────────
   Software Expansions Package List Wrapper
   ────────────────────────────────────────────────────────────────── */

.mycar-swe-package-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    margin: 0;
}

.mycar-swe-package-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin-bottom: 10px;
}

.mycar-swe-package {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.mycar-swe-package:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mycar-swe-package.is-active {
    border-color: #10b981;
    background: #f0fdf4;
}

.mycar-swe-package.is-warning {
    border-color: #f59e0b;
}

.mycar-swe-package.is-expired {
    border-color: #ef4444;
    background: #fef2f2;
}

@media (max-width: 768px) {
    .mycar-swe-package-list-wrapper {
        gap: 12px;
    }
    
    .mycar-swe-package-list {
        gap: 10px;
    }
}



/* ──────────────────────────────────────────────────────────────────
   Software Expansions Summary Container
   ────────────────────────────────────────────────────────────────── */

.mycar-swe-summary-container {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mycar-swe-summary-header {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── V2 Timeline (Notas internas)
   ────────────────────────────────────────────────────────────────── */

.mycar-eq-timeline {
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mycar-eq-timeline-item {
    display: flex;
    gap: 14px;
    position: relative;
    padding-bottom: 18px;
}

.mycar-eq-timeline-item:last-child {
    padding-bottom: 0;
}

.mycar-eq-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: #e5e7eb;
}

.mycar-eq-timeline-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8192c;
    display: none;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #fca5a5;
    flex-shrink: 0;
    margin-top: 2px;
}

.mycar-eq-timeline-content {
    flex: 1;
    min-width: 0;
}

.mycar-eq-timeline-date {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 4px;
}

.mycar-eq-timeline-note {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    background: #f9fafb;
    border: 1px solid #f0f2f5;
    border-radius: 6px;
    padding: 8px 12px;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL POPUP (Notas Internas)
   ══════════════════════════════════════════════════════════════════ */

.mycar-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mycar-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: mycar-modal-fade-in 0.2s ease;
}

.mycar-modal-content {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: mycar-modal-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mycar-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.mycar-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    font-family: var(--font);
}

.mycar-modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: #6b7280;
}

.mycar-modal-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.mycar-modal-close svg {
    width: 18px;
    height: 18px;
}

.mycar-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

@keyframes mycar-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mycar-modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal responsivo */
@media (max-width: 640px) {
    .mycar-modal {
        padding: 10px;
    }
    
    .mycar-modal-content {
        max-height: 90vh;
        border-radius: 12px;
    }
    
    .mycar-modal-header {
        padding: 16px 18px;
    }
    
    .mycar-modal-header h3 {
        font-size: 16px;
    }
    
    .mycar-modal-body {
        padding: 18px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   COMPACT CARDS - Diseño colorido pero elegante
   ══════════════════════════════════════════════════════════════════ */

.mycar-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 18px;
}

/* Cards con borde de color superior */
.mycar-compact-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.mycar-compact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #8B1A2B;
}

.mycar-compact-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Header con gradiente sutil */
.mycar-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

.mycar-compact-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mycar-compact-title::before {
    content: '';
    width: 4px;
    height: 14px;
    background: #8B1A2B;
    border-radius: 2px;
    flex-shrink: 0;
}

.mycar-compact-badge {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mycar-compact-badge.ok {
    background: #e8f5ec;
    color: #1a5632;
    border: 1px solid #c1dcc9;
}

.mycar-compact-badge.neutral {
    background: #f0f1f3;
    color: #374151;
    border: 1px solid #dcdee2;
}

/* Botón de link con color */
.mycar-compact-link {
    background: none;
    border: none;
    color: #8B1A2B;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mycar-compact-link::after {
    content: '→';
    font-size: 12px;
    transition: transform 0.15s;
}

.mycar-compact-link:hover {
    color: #8B1A2B;
}

.mycar-compact-link:hover::after {
    transform: translateX(2px);
}

/* Body con mejor espaciado */
.mycar-compact-body {
    padding: 14px 16px;
}

.mycar-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f8fafc;
    transition: all 0.15s;
}

.mycar-compact-row:hover {
    background: #f9fafb;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 6px;
}

.mycar-compact-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mycar-compact-row:first-child {
    padding-top: 0;
}

.mycar-compact-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
}

.mycar-compact-value {
    font-size: 12px;
    color: #0f172a;
    font-weight: 700;
    text-align: right;
}

/* Clases de valores con colores vibrantes */
.mycar-compact-value.mycar-value-mono {
    font-family: var(--mono);
    font-size: 11px;
    background: #f0f1f3;
    color: #111827;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #dcdee2;
}

.mycar-compact-value.mycar-value-accent {
    color: #8B1A2B;
}

.mycar-compact-value.mycar-value-success {
    color: #1a5632;
    background: #e8f5ec;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #c1dcc9;
}

.mycar-compact-value.mycar-value-danger {
    color: #8B1A2B;
    background: #fce8ea;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #e8b4bb;
}

.mycar-compact-value.mycar-value-muted {
    color: #94a3b8;
    font-style: italic;
    font-weight: 500;
}

/* Divisor interno con gradiente */
.mycar-compact-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0;
    position: relative;
}

.mycar-compact-divider::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

/* Tooltip mejorado */
.mycar-sgw-tooltip {
    position: relative;
    cursor: help;
}

.mycar-sgw-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    right: 0;
    background: #111827;
    color: #ffffff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    margin-bottom: 8px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mycar-sgw-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 12px;
    border: 6px solid transparent;
    border-top-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s;
    margin-bottom: 2px;
    z-index: 1000;
}

.mycar-sgw-tooltip:hover::after,
.mycar-sgw-tooltip:hover::before {
    opacity: 1;
    margin-bottom: 6px;
}

/* Ajustar grid para 3 cards */
@media (min-width: 1200px) {
    .mycar-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsivo - Tablets y móvil */
@media (max-width: 768px) {
    .mycar-summary-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }
    
    .mycar-compact-header {
        padding: 12px 14px;
    }
    
    .mycar-compact-title {
        font-size: 12px;
    }
    
    .mycar-compact-body {
        padding: 12px 14px;
    }
    
    .mycar-compact-label,
    .mycar-compact-value {
        font-size: 11px;
    }
}






/* ══════════════════════════════════════════════════════════════════
   BOTONES DE ALERTA (Restablecimientos y Cambios VCI)
   ══════════════════════════════════════════════════════════════════ */

.mycar-alert-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    border: 1.5px solid;
    cursor: pointer;
    transition: all 0.2s;
    animation: mycar-pulse 2s ease-in-out infinite;
}

.mycar-alert-btn-reset {
    background: #fdf8ef;
    color: #92400e;
    border-color: #e8d5a8;
}

.mycar-alert-btn-reset:hover {
    background: #fef3e2;
    border-color: #92400e;
    transform: translateY(-1px);
    animation: none;
}

.mycar-alert-btn-vci {
    background: #fdf2f3;
    color: #8B1A2B;
    border-color: #e8b4bb;
}

.mycar-alert-btn-vci:hover {
    background: #fce8ea;
    border-color: #8B1A2B;
    transform: translateY(-1px);
    animation: none;
}

.mycar-alert-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@keyframes mycar-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.95);
        opacity: 0.85;
    }
}

/* ══════════════════════════════════════════════════════════════════
   TOOLTIPS (Restablecimientos y Cambios VCI)
   ══════════════════════════════════════════════════════════════════ */

.mycar-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mycar-tooltip-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.mycar-tooltip-content {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-width: 500px;
    width: 100%;
    animation: mycar-tooltip-in 0.2s ease;
}

.mycar-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.mycar-tooltip-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    font-family: var(--font);
}

.mycar-tooltip-close {
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    color: #6b7280;
    flex-shrink: 0;
}

.mycar-tooltip-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.mycar-tooltip-close svg {
    width: 16px;
    height: 16px;
}

.mycar-tooltip-body {
    padding: 20px;
}

.mycar-tooltip-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.mycar-tooltip-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mycar-tooltip-field:first-child {
    padding-top: 0;
}

.mycar-tooltip-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.mycar-tooltip-value {
    font-size: 13px;
    color: #111827;
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    word-break: break-all;
}

@keyframes mycar-tooltip-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsivo */
@media (max-width: 640px) {
    .mycar-tooltip {
        padding: 10px;
    }
    
    .mycar-tooltip-content {
        max-width: 100%;
    }
    
    .mycar-tooltip-header {
        padding: 14px 16px;
    }
    
    .mycar-tooltip-header h4 {
        font-size: 14px;
    }
    
    .mycar-tooltip-body {
        padding: 16px;
    }
    
    .mycar-tooltip-label,
    .mycar-tooltip-value {
        font-size: 12px;
    }
    
    .mycar-alert-btn {
        font-size: 10px;
        padding: 5px 10px;
    }
    
    .mycar-alert-icon {
        width: 12px;
        height: 12px;
    }
}

/* Ajustar espaciado de botones de acciones */
.mycar-eq-section-actions {

/* ══════════════════════════════════════════════════════════════════
   SUB-CARDS GRID (Cards internas con mismo estilo que Resumen)
   ══════════════════════════════════════════════════════════════════ */

.mycar-subcard-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 18px;
}

.mycar-compact-subcard {
    margin-bottom: 0;
}

.mycar-compact-subcard::before {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
}

/* 3 columnas en pantallas grandes */
@media (min-width: 1200px) {
    .mycar-subcard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 1 columna en tablets y móvil */
@media (max-width: 768px) {
    .mycar-subcard-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 14px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   DISPOSITIVOS CC - Tabla scrolleable
   ══════════════════════════════════════════════════════════════════ */

.mycar-cc-devices-desc {
    padding: 12px 14px;
    font-size: 12px;
    color: #64748b;
    background: #fafafa;
    border-bottom: 1px solid #f1f5f9;
}

.mycar-cc-devices-scroll {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
}

.mycar-cc-devices-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.mycar-cc-devices-scroll::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 3px;
}

.mycar-cc-devices-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.mycar-cc-devices-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.mycar-cc-devices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.mycar-cc-devices-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.mycar-cc-devices-table th {
    padding: 10px 12px;
    font-weight: 700;
    color: #0f172a;
    text-align: left;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-bottom: 2px solid #cbd5e1;
}

.mycar-cc-devices-table th:first-child {
    border-right: 1px solid #cbd5e1;
    width: 140px;
}

.mycar-cc-devices-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}

.mycar-cc-devices-table tbody tr:hover {
    background: #f8fafc;
}

.mycar-cc-devices-table tbody tr:last-child {
    border-bottom: none;
}

.mycar-cc-devices-table td {
    padding: 9px 12px;
    vertical-align: top;
}

.mycar-cc-devices-table td.serial {
    font-family: var(--mono);
    font-weight: 700;
    color: #0f172a;
    background: #fafafa;
    border-right: 1px solid #f1f5f9;
}

.mycar-cc-devices-table td.config {
    color: #475569;
    font-weight: 500;
    line-height: 1.4;
}

/* Responsivo */
@media (max-width: 768px) {
    .mycar-cc-devices-table th:first-child {
        width: 120px;
    }
    
    .mycar-cc-devices-table th,
    .mycar-cc-devices-table td {
        padding: 8px 10px;
        font-size: 10px;
    }
    
    .mycar-cc-devices-desc {
        padding: 10px 12px;
        font-size: 11px;
    }
}

/* Card body sin padding para grids */
.mycar-card-body-grid {
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   BOTÓN EQUIPO DEMO / DEMO ANULADO
   ══════════════════════════════════════════════════════════════════ */

.mycar-demo-btn {
    background: #e8f5ec;
    color: #1a5632;
    border-color: #c1dcc9;
}

.mycar-demo-btn:hover {
    background: #d0ead8;
    border-color: #1a5632;
    transform: translateY(-1px);
    animation: none;
}

.mycar-demo-anulado-btn {
    background: #f5f3ff;
    color: #581c87;
    border-color: #ddd6fe;
}

.mycar-demo-anulado-btn:hover {
    background: #ede9fe;
    border-color: #581c87;
    transform: translateY(-1px);
    animation: none;
}

/* Luz parpadeante roja */
.mycar-demo-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8B1A2B;
    box-shadow: 0 0 4px #8B1A2B, 0 0 8px #8B1A2B;
    animation: mycar-blink 2s ease-in-out infinite;
}

@keyframes mycar-blink {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 4px #8B1A2B, 0 0 8px #8B1A2B;
    }
    50% {
        opacity: 0.3;
        box-shadow: 0 0 2px #8B1A2B;
    }
}

/* ============================================================
   OCR Buttons - Diseño minimalista y profesional
   ============================================================ */

.mycar-ocr-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.mycar-ocr-btn svg {
    width: 13px;
    height: 13px;
    color: #6b7280;
    transition: color 0.12s ease;
}

.mycar-ocr-btn:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.mycar-ocr-btn:hover svg {
    color: #374151;
}

.mycar-ocr-btn:active {
    background: #f3f4f6;
    transform: scale(0.96);
}

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


/* ============================================================
   DV2 — Dark panel styles for Tab 2 (Software & Licencias)
   and Tab 3 (Actividad) — build108
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   DV2 — LIGHT THEME (build 109)
   Tab 2 (Software y Licencias) + Tab 3 (Actividad)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab panel wrapper ─────────────────────────────────── */
.dv2-tab-panel {
    background: #f5f6f8;
    min-height: 400px;
}

.dv2-wrapper {
    padding: 16px 20px 24px;
    background: #f5f6f8;
    min-height: 300px;
}

/* ── Sub-tab bar ────────────────────────────────────────── */
.dv2-subtab-bar {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: #f0f1f3;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 18px;
}

.dv2-subtab-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.dv2-subtab-btn:hover {
    color: #374151;
    background: rgba(0,0,0,0.03);
}

.dv2-subtab-btn.active {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.dv2-subtab-count {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
    transition: all 0.15s;
}

.dv2-subtab-count.active {
    background: #111827;
    color: #fff;
}

/* ── Sub-panel visibility ───────────────────────────────── */
.dv2-sub-panel {
    display: none;
}
.dv2-sub-panel.active {
    display: block;
}

/* ── Card base ──────────────────────────────────────────── */
.dv2-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 14px;
}

.dv2-card-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dv2-card-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dv2-card-icon {
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.dv2-card-icon svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.dv2-card-title {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.dv2-count-badge {
    background: #2563eb;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    font-family: var(--font);
}

.dv2-card-body {
    padding: 12px 16px;
}

/* ── Stat grid ──────────────────────────────────────────── */
.dv2-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.dv2-stat-cell {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.dv2-stat-value {
    font-size: 20px;
    font-weight: 800;
    font-family: 'DM Mono', 'JetBrains Mono', monospace;
    line-height: 1.2;
    word-break: break-all;
}

.dv2-stat-label {
    color: #9ca3af;
    font-size: 10.5px;
    font-weight: 600;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Search input ───────────────────────────────────────── */
.dv2-search-wrap {
    position: relative;
    margin-bottom: 12px;
}

.dv2-search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #111827;
    font-size: 12.5px;
    font-family: var(--font);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.dv2-search:focus {
    border-color: #2563eb;
    background: #fff;
}

.dv2-search::placeholder {
    color: #9ca3af;
}

.dv2-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 14px;
    pointer-events: none;
}

/* ── Search + filter row ────────────────────────────────── */
.dv2-search-filter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.dv2-search-filter-row .dv2-search-wrap {
    flex: 1;
    margin-bottom: 0;
}

.dv2-select {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    padding: 0 12px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    height: 36px;
    flex-shrink: 0;
    outline: none;
}

.dv2-select:focus {
    border-color: #2563eb;
}

/* ── Table ──────────────────────────────────────────────── */
.dv2-table-scroll {
    overflow-x: auto;
    max-height: 450px;
    overflow-y: auto;
}

.dv2-table-scroll::-webkit-scrollbar { width: 4px; height: 4px; }
.dv2-table-scroll::-webkit-scrollbar-track { background: #f9fafb; }
.dv2-table-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

.dv2-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.dv2-table thead tr {
    border-bottom: 2px solid #f3f4f6;
}

.dv2-table th {
    text-align: left;
    padding: 6px 8px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    font-family: var(--font);
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dv2-table tbody tr {
    border-bottom: 1px solid #f9fafb;
    transition: background 0.1s;
}

.dv2-table tbody tr:hover {
    background: #f9fafb;
}

.dv2-table td {
    padding: 6px 8px;
    vertical-align: middle;
    color: #374151;
}

/* ── Utility classes ────────────────────────────────────── */
.dv2-mono {
    font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

.dv2-dim {
    color: #9ca3af !important;
}

.dv2-cn-label {
    color: #9ca3af;
    font-size: 11px;
    margin-left: 5px;
}

/* ── Code badge (sw configurado) ────────────────────────── */
.dv2-code-badge {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'DM Mono', monospace;
}

/* ── Download sw badge ──────────────────────────────────── */
.dv2-dl-sw-badge {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Restriction badge ──────────────────────────────────── */
.dv2-restrict-badge {
    background: #fef2f2;
    color: #8B1A2B;
    border: 1px solid #fecaca;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Pkg selector (expansiones) ─────────────────────────── */
.dv2-pkg-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 0;
}

.dv2-pkg-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #e5e7eb;
}

.dv2-pkg-card:hover {
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dv2-pkg-card.selected {
    outline: 2px solid #2563eb;
    outline-offset: 0;
}

.dv2-pkg-card.is-active  { border-color: #a7f3d0; }
.dv2-pkg-card.is-expired { border-color: #fecaca; }
.dv2-pkg-card.is-active:hover  { border-color: #059669; }
.dv2-pkg-card.is-expired:hover { border-color: #8B1A2B; }

.dv2-pkg-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dv2-pkg-count {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
}

.dv2-pkg-name {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.4;
}

.dv2-pkg-deadline {
    color: #9ca3af;
    font-size: 11px;
    font-family: 'DM Mono', monospace;
}

.dv2-pkg-detail {
    margin-top: 14px;
}

/* ── SGW grid ───────────────────────────────────────────── */
.dv2-sgw-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.dv2-sgw-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.dv2-sgw-bar-track {
    height: 3px;
    background: #e5e7eb;
    width: 100%;
}

.dv2-sgw-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.dv2-sgw-card-inner {
    padding: 14px 16px;
}

.dv2-sgw-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.dv2-sgw-brand {
    color: #111827;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.dv2-sgw-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}

.dv2-sgw-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dv2-sgw-label {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

.dv2-sgw-val {
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    text-align: right;
}

/* ── Compras: tag cloud ─────────────────────────────────── */
.dv2-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dv2-sw-tag {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

/* ── Accordion ─────────────────────────────────────────── */
.dv2-accordion {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    background: #fff;
}

.dv2-acc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: background 0.1s;
}

.dv2-acc-toggle > svg {
    flex-shrink: 0;
}

.dv2-acc-toggle:hover {
    background: #f9fafb;
}

.dv2-acc-toggle-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.dv2-acc-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.dv2-acc-toggle-title {
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
}

.dv2-acc-toggle-meta {
    font-size: 11px;
    color: #9ca3af;
}

.dv2-acc-index {
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dv2-acc-body {
    border-top: 1px solid #f3f4f6;
    padding: 12px 14px;
}

.dv2-acc-chevron {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    max-width: 14px;
    max-height: 14px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s;
}

/* ── Empty state ────────────────────────────────────────── */
.dv2-empty {
    text-align: center;
    padding: 36px 20px;
    color: #9ca3af;
    font-size: 13px;
}

/* ── Tab bar adjustments ────────────────────────────────── */
.mycar-result-tab-bar {
    gap: 4px;
    padding: 0 4px;
}
.mycar-result-tab-btn {
    gap: 6px;
    padding: 11px 20px;
    font-size: 12px;
    border-radius: 10px 10px 0 0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .dv2-subtab-btn {
        font-size: 11px;
        padding: 7px 8px;
    }
    .dv2-pkg-selector {
        grid-template-columns: 1fr 1fr;
    }
    .dv2-sgw-grid {
        grid-template-columns: 1fr;
    }
    .dv2-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .dv2-wrapper {
        padding: 12px 14px 20px;
    }
    .dv2-subtab-btn {
        font-size: 10.5px;
        padding: 7px 6px;
    }
    .dv2-subtab-count {
        display: none;
    }
    .dv2-pkg-selector {
        grid-template-columns: 1fr;
    }
    .dv2-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .mycar-result-tab-btn {
        padding: 9px 10px;
        font-size: 10px;
    }
    .dv2-search-filter-row {
        flex-direction: column;
    }
    .dv2-select {
        width: 100%;
    }
}


/* ── Tab bar brand color ───────────────────────────────── */
.mycar-eq-layout .mycar-result-tab-btn.active {
    color: #8B1A2B;
    border-bottom-color: #8B1A2B;
}

/* ── Build 121: Force accordion layout ─────────────────── */
.mycar-swe-acc-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
}
.mycar-swe-acc-header > * {
    text-align: left;
}
.mycar-swe-acc-body {
    text-align: left !important;
}
article > .mycar-swe-acc-header + div {
    text-align: left !important;
    overflow-x: auto;
}