/* ===================================================================
   CCAPETSA · UI v3 — Sistema de diseño minimalista / ejecutivo
   ------------------------------------------------------------------
   Renovación total de la plataforma. Sobrio, monocromático, líneas
   finas, máximo aire, una sola escala tipográfica (título 22px, todo
   lo demás 13px). Sin sombras, sin gradientes, sin ruido.
   Pensado para usarse SIN Tailwind: clases de componente propias.
   =================================================================== */

/* -------- 1. Tokens -------- */
:root {
    --v3-font: 'Inter', 'Segoe UI', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --v3-bg:        #ffffff;   /* superficie principal */
    --v3-surface:   #f6f6f5;   /* superficie secundaria (hover, chips, head) */
    --v3-surface-2: #f0f0ef;

    --v3-text:      #1d1d1f;   /* texto principal */
    --v3-text-2:    #6b6b70;   /* secundario */
    --v3-text-3:    #9a9aa0;   /* terciario / hints */

    --v3-border:    rgba(20,20,22,0.09);  /* línea fina por defecto */
    --v3-border-2:  rgba(20,20,22,0.16);  /* énfasis / hover */

    --v3-success:   #1a7f47;
    --v3-success-bg:#e9f4ee;
    --v3-danger:    #b42318;
    --v3-danger-bg: #fbeae8;
    --v3-warn:      #9a6700;

    --v3-r:    8px;    /* radio base */
    --v3-r-lg: 12px;   /* radio tarjetas */
    --v3-sidebar-w: 200px;
}

/* -------- 1b. Modo noche -------- */
html.v3-night {
    --v3-bg:        #161618;
    --v3-surface:   #202024;
    --v3-surface-2: #2a2a2e;
    --v3-text:      #f3f3f5;
    --v3-text-2:    #a2a2aa;
    --v3-text-3:    #6f6f78;
    --v3-border:    rgba(255,255,255,0.10);
    --v3-border-2:  rgba(255,255,255,0.20);
    --v3-success:   #45c07e;
    --v3-success-bg:rgba(69,192,126,0.14);
    --v3-danger:    #f06b62;
    --v3-danger-bg: rgba(240,107,98,0.14);
}
html.v3-night body { background: var(--v3-bg); color: var(--v3-text); }

/* -------- 2. Reset suave + tipografía base -------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* Inter en TODO (excepto los íconos <i> de Font Awesome) */
body, .v3, .v3 *:not(i):not(.fa):not(.fas):not(.far):not(.fab) { font-family: var(--v3-font); }
body {
    font-family: var(--v3-font);
    font-size: 13px;
    line-height: 1.5;
    color: var(--v3-text);
    background: var(--v3-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.006em;
}
.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--v3-text); color: var(--v3-bg); }

/* Una sola jerarquía: título grande, todo lo demás 13px */
.v3-title   { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin: 0; color: var(--v3-text); }
.v3-sub     { font-size: 13px; color: var(--v3-text-2); margin: 4px 0 0; }
.v3-label   { font-size: 11px; color: var(--v3-text-3); font-weight: 400; }
.v3-muted   { color: var(--v3-text-2); }
.v3-faint   { color: var(--v3-text-3); }
.v3-num     { font-variant-numeric: tabular-nums; }

/* -------- 3. Layout app: sidebar + main -------- */
.v3-app { display: flex; height: 100vh; overflow: hidden; background: var(--v3-bg); }

.v3-sidebar {
    width: var(--v3-sidebar-w); flex-shrink: 0;
    border-right: 0.5px solid var(--v3-border);
    padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
    overflow-y: auto;
}
.v3-brand { font-size: 15px; font-weight: 500; padding: 0 8px 16px; display: flex; align-items: center; gap: 9px; }
.v3-brand-mark {
    width: 22px; height: 22px; border-radius: 6px; background: var(--v3-text); color: var(--v3-bg);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; flex-shrink: 0;
}
.v3-navsec { font-size: 11px; color: var(--v3-text-3); padding: 12px 8px 4px; }
.v3-nav {
    display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--v3-text-2);
    padding: 7px 8px; border-radius: var(--v3-r); cursor: pointer; transition: background .12s, color .12s;
}
.v3-nav i { font-size: 16px; }
.v3-nav:hover { background: var(--v3-surface); color: var(--v3-text); }
.v3-nav.active { background: var(--v3-surface); color: var(--v3-text); }

.v3-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.v3-scroll { flex: 1; overflow: auto; padding: 22px 26px; display: flex; flex-direction: column; }

.v3-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }

/* -------- 4. Botones (un solo tamaño) -------- */
.v3-btn {
    font-family: inherit; font-size: 13px; font-weight: 400;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border: 0.5px solid var(--v3-border-2); border-radius: var(--v3-r);
    background: var(--v3-bg); color: var(--v3-text-2); cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.v3-btn i { font-size: 15px; }
.v3-btn:hover { background: var(--v3-surface); color: var(--v3-text); }
.v3-btn:active { transform: translateY(0.5px); }
.v3-btn-primary { background: var(--v3-text); color: var(--v3-bg); border-color: var(--v3-text); }
.v3-btn-primary:hover { opacity: 0.88; }
.v3-btn-icon { padding: 7px; color: var(--v3-text-2); }
.v3-btn-sm { padding: 6px 10px; font-size: 12px; }

/* -------- 5. Inputs / búsqueda -------- */
.v3-input, .v3-search {
    font-family: inherit; font-size: 13px; color: var(--v3-text);
    background: var(--v3-bg); border: 0.5px solid var(--v3-border); border-radius: var(--v3-r);
    padding: 8px 11px; width: 100%; outline: none; transition: border-color .12s, box-shadow .12s;
}
.v3-input::placeholder { color: var(--v3-text-3); }
.v3-input:focus, .v3-search:focus-within { border-color: var(--v3-border-2); }
.v3-search { display: flex; align-items: center; gap: 8px; padding: 8px 11px; }
.v3-search i { font-size: 15px; color: var(--v3-text-3); }
.v3-search input { border: 0; outline: 0; background: none; font: inherit; color: var(--v3-text); width: 100%; padding: 0; }
.v3-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; }
/* Selects nativos legibles también en modo noche (el desplegable nativo) */
.v3 select option { background: var(--v3-bg); color: var(--v3-text); }

/* -------- 6. Tabla -------- */
.v3-table thead th {
    font-size: 11px; font-weight: 400; color: var(--v3-text-3); text-align: left;
    padding: 0 8px 10px; white-space: nowrap;
}
.v3-table tbody td {
    font-size: 13px; padding: 11px 8px; border-top: 0.5px solid var(--v3-border);
    vertical-align: middle;
}
.v3-table tbody tr { transition: background .1s; }
.v3-table tbody tr:hover { background: var(--v3-surface); }
.v3-td-strong { color: var(--v3-text); }
.v3-td-soft   { color: var(--v3-text-2); }
.v3-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; }

/* Avatares (opcional) */
.v3-ava {
    width: 30px; height: 30px; border-radius: 50%; background: var(--v3-surface); color: var(--v3-text);
    display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; flex-shrink: 0;
}

/* -------- 7. Estados / badges -------- */
.v3-dot { display: inline-flex; align-items: center; gap: 6px; }
.v3-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--v3-text-3); }
.v3-dot.ok::before { background: var(--v3-success); }
.v3-dot.off::before { background: var(--v3-text-3); }
.v3-badge {
    font-size: 12px; padding: 2px 9px; border-radius: var(--v3-r);
    background: var(--v3-surface); color: var(--v3-text-2); display: inline-block;
}
.v3-badge.ok  { background: var(--v3-success-bg); color: var(--v3-success); }
.v3-badge.no  { background: var(--v3-surface); color: var(--v3-text-3); }

/* -------- 8. Tarjetas y métricas -------- */
.v3-card { background: var(--v3-bg); border: 0.5px solid var(--v3-border); border-radius: var(--v3-r-lg); padding: 16px 18px; }
.v3-metric { background: var(--v3-surface); border-radius: var(--v3-r); padding: 12px 14px; }
.v3-metric p { margin: 0; }
.v3-metric .m-label { font-size: 12px; color: var(--v3-text-2); }
.v3-metric .m-value { font-size: 22px; font-weight: 500; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* -------- 9. Paginación / pie -------- */
.v3-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 18px; }
.v3-page { font-size: 12px; color: var(--v3-text-3); }
.v3-pager { display: flex; gap: 6px; align-items: center; }
.v3-pager .pg { font-size: 12px; padding: 5px 10px; border-radius: var(--v3-r); color: var(--v3-text-2); cursor: pointer; }
.v3-pager .pg.active { background: var(--v3-surface); color: var(--v3-text); }

/* -------- 10. Utilidades mínimas (evita depender de Tailwind) -------- */
.v3-row { display: flex; align-items: center; }
.v3-between { display: flex; align-items: center; justify-content: space-between; }
.v3-gap-2 { gap: 8px; } .v3-gap-3 { gap: 12px; }
.v3-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.v3-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.v3-mb-4 { margin-bottom: 16px; } .v3-mb-5 { margin-bottom: 20px; }
.v3-hr { border: 0; border-top: 0.5px solid var(--v3-border); margin: 0; }

/* -------- 11. Scrollbar fino -------- */
.v3 ::-webkit-scrollbar, .v3-scroll::-webkit-scrollbar, .v3-sidebar::-webkit-scrollbar { width: 9px; height: 9px; }
.v3 ::-webkit-scrollbar-thumb, .v3-scroll::-webkit-scrollbar-thumb, .v3-sidebar::-webkit-scrollbar-thumb {
    background: var(--v3-border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
.v3 ::-webkit-scrollbar-thumb:hover { background: var(--v3-text-3); background-clip: padding-box; }

/* -------- 12. Modales (dialog) sobrios -------- */
dialog.v3-modal { border: 0.5px solid var(--v3-border-2); border-radius: var(--v3-r-lg); padding: 0; color: var(--v3-text); background: var(--v3-bg); max-width: 540px; width: 100%; }
dialog.v3-modal::backdrop { background: rgba(20,20,22,0.34); }
.v3-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 0.5px solid var(--v3-border); }
.v3-modal-body { padding: 18px; }
.v3-modal-title { font-size: 15px; font-weight: 500; margin: 0; }

/* Header móvil */
.v3-mobilebar { display: none; }
@media (max-width: 768px) {
    .v3-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; transform: translateX(-100%); background: var(--v3-bg); transition: transform .2s; }
    .v3-sidebar.open { transform: none; }
    .v3-mobilebar { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px; border-bottom: 0.5px solid var(--v3-border); }
    .v3-scroll { padding: 16px; }
}

/* -------- 13. Módulos por licencia (selector / gestor) --------
   Misma escala que todo el sistema (13px; subclave 11px como las sub-líneas
   de las tablas). Diferenciación por color, NO por tamaño. */
.v3-modbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.v3-modlist { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.v3-modrow {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border: 0.5px solid var(--v3-border); border-radius: var(--v3-r);
    transition: background .12s, border-color .12s;
}
.v3-modrow.pick { cursor: pointer; }
.v3-modrow.pick:hover { background: var(--v3-surface); border-color: var(--v3-border-2); }
.v3-modrow input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--v3-text); cursor: pointer; flex-shrink: 0; margin: 0; }
.v3-modrow .v3-modmeta { min-width: 0; flex: 1; }
.v3-modrow .v3-modname { color: var(--v3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-modrow .v3-modkey { color: var(--v3-text-3); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-modrow.is-off { opacity: .5; }
.v3-modempty { color: var(--v3-text-3); text-align: center; padding: 22px 8px; }