/* Chrome, Edge, Brave, Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #0a0f0d inset !important; /* color de fondo (oscuro) */
    -webkit-text-fill-color: #dff7ef !important; /* color del texto */
    caret-color: #dff7ef !important; /* color del cursor */
    transition: background-color 5000s ease-in-out 0s; /* hack para evitar parpadeo */
}

.otc-dashboard {
    --bg:#090a0c;
    --bg-2:#0e1014;
    --panel:#101216;
    --panel-2:#0d0f13;
    --line: rgb(122, 14, 147);
    --text:#f3f4f6;
    --muted:#9aa3ad;
    --primary: #c043e1;
    --primary-2: #a91dd2;
    --accent:#7c3aed;
    --warning:#ffd166;
    --good:#22c55e;
    --info:#60a5fa;
    --shadow:0 18px 40px rgba(0,0,0,.45);
    --radius:16px;
    --radius-lg:20px;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    min-height: 100vh;
    border-radius: 0;
    overflow: hidden;
    position: relative;
}

/* Fondo negro para evitar esquinas blancas */
.otc-dashboard,
.otc-dashboard body,
.otc-dashboard html {
    background-color: #000;
}

.otc-dashboard *,
.otc-dashboard *::before,
.otc-dashboard *::after {
    box-sizing: border-box;
}

.otc-dashboard::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
            radial-gradient(1000px 500px at 15% -10%, rgba(124,58,237,.18), transparent 55%),
            radial-gradient(900px 500px at 120% 0%, rgb(182, 41, 220), transparent 55%);
    filter: blur(30px);
    pointer-events: none;
}

/* Header */
.otc-dashboard header {
    position: sticky;
    top: 0;
    z-index: 3;
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(10,12,15,.85) 0%, rgba(10,12,15,.55) 100%);
    border-bottom: 1px solid var(--line);
}

.otc-dashboard .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
}

.otc-dashboard .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.otc-dashboard .logo {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: conic-gradient(from 140deg, var(--primary), #c346e7 55%, #0a1412);
    box-shadow: 0 0 0 1px #7a0e93, inset 0 0 26px rgba(255,255,255,.06);
}

/* Menú sin subrayado y con borde verde oscuro en hover */
.otc-dashboard .menu {
    display: flex;
    gap: 14px;
    align-items: center;
}

.otc-dashboard .menu a {
    text-decoration: none;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #dbe2ea;
    border: 1px solid var(--line);
    /*background: linear-gradient(180deg, #0f1216, #0b0d11);*/
    cursor: pointer;
    transition: border-color 0.2s ease, filter 0.2s ease;
}

.otc-dashboard .menu a:hover {
    border-color: #5f1a70;
    filter: brightness(1.06);
}

/*.otc-dashboard .menu a.active {*/
/*    border-color: #234;*/
/*    box-shadow: 0 0 0 3px rgb(49, 51, 54);*/
/*}*/

/* Estado activo en el menú */
.otc-dashboard .menu a.active {
    background-color: rgb(95, 26, 112); /* mismo verde que hover */
    border-color: rgb(122, 14, 147);
    color: #ffffff;
    box-shadow: none; /* opcional: quitar sombra si no quieres glow */
}

/* Mantener el hover consistente */
.otc-dashboard .menu a.active:hover {
    filter: brightness(1.15); /* leve aclarado al pasar por encima */
}

/* Container + grid */
.otc-dashboard .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 26px;
}

.otc-dashboard .grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 22px;
}

@media (max-width: 1024px) {
    .otc-dashboard .grid {
        grid-template-columns: 1fr;
    }
}

/* Panels */
.otc-dashboard .panel {
    position: relative;
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.otc-dashboard .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 35%);
}

.otc-dashboard .content {
    position: relative;
    padding: 18px;
}

.otc-dashboard h3 {
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: #d7dae0;
}

/* KPI cards */
.otc-dashboard .kpi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 640px) {
    .otc-dashboard .kpi {
        grid-template-columns: 1fr;
    }
}

.otc-dashboard .card {
    position: relative;
    background: #0e1116;
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: 14px;
    overflow: hidden;
}

.otc-dashboard .card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgb(122, 14, 147), rgb(169, 29, 210));
    /*background: linear-gradient(135deg, rgba(56, 220, 160, 0.25), rgba(0,179,126,.25));*/
    /*-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);*/
    /*-webkit-mask-composite: xor;*/
    /*mask-composite: exclude;*/
}

.otc-dashboard .label {
    color: var(--muted);
    font-size: 12px;
}

.otc-dashboard .value {
    font-size: 28px;
    font-weight: 900;
    margin-top: 4px;
}

/* Forms */
.otc-dashboard .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 720px) {
    .otc-dashboard .row {
        grid-template-columns: 1fr;
    }
}

.otc-dashboard label {
    font-size: 12px;
    color: var(--muted);
}

.otc-dashboard input,
.otc-dashboard select,
.otc-dashboard textarea {
    width: 100%;
    background: #0d1014;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px;
}

.otc-dashboard input,
.otc-dashboard select {
    margin-top: 10px;
    margin-bottom: 10px;
}

.otc-dashboard input:focus,
.otc-dashboard select:focus,
.otc-dashboard textarea:focus {
    outline: none;
    border-color: #2a303b;
    box-shadow: 0 0 0 3px rgb(122, 14, 147);
}

.otc-dashboard .hint {
    font-size: 12px;
    color: #9aa3ad;
}

/* Buttons */
.otc-dashboard .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #7a0e93;
    background: linear-gradient(180deg, #470454 0%, #470454 100%);
    color: #dff7ef;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.06s ease;
}

.otc-dashboard .btn:hover {
    filter: brightness(1.05);
}

.otc-dashboard .btn:active {
    transform: translateY(1px);
}

.otc-dashboard .btn.secondary {
    background: #121418;
    border-color: #1b1f25;
    color: #e5e7eb;
}

.otc-dashboard .btn.ghost {
    background: transparent;
    border-color: var(--line);
    color: #d1d5db;
}

/* Table */
.otc-dashboard table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.otc-dashboard th {
    font-size: 12px;
    color: var(--muted);
    font-weight: 700;
    text-align: left;
    padding: 0 12px;
}

.otc-dashboard td {
    padding: 14px 12px;
    background: #0f1216;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.otc-dashboard tr td:first-child {
    border-left: 1px solid var(--line);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.otc-dashboard tr td:last-child {
    border-right: 1px solid var(--line);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Estilo base para selects */
.otc-dashboard select {
    appearance: none;           /* Quita estilo nativo */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #0d1014;
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
    padding: 12px 40px 12px 12px; /* espacio para la flecha */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dbe2ea' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

/* Hover con borde verde oscuro */
.otc-dashboard select:hover {
    border-color: #7a0e93;
}

/* Focus con sombra verde */
.otc-dashboard select:focus {
    outline: none;
    border-color: #a91dd2;
    box-shadow: 0 0 0 3px rgb(169, 29, 210);
}

.otc-dashboard .vrw_btn {
    text-decoration: none;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #dbe2ea;
    border: 1px solid var(--line);
    /*background: linear-gradient(180deg, #0f1216, #0b0d11);*/
    cursor: pointer;
    transition: border-color 0.2s ease, filter 0.2s ease;
    border-color: rgb(122, 14, 147);
    box-shadow: 0 0 0 3px rgb(122, 14, 147);
}

.otc-dashboard .avatar {
    display: flex;           /* Activamos flexbox */
    align-items: center;     /* Centrado vertical */
    gap: 8px;                /* Separación entre elementos */
    justify-content: space-between;
}

.otc-dashboard .avatar .vrw_btn {
    margin-left: auto;       /* Empuja el span a la derecha */
}

a.btn {
    all: unset;         /* resetea todos los estilos de enlace */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #470454;
    background: linear-gradient(180deg, #7a0e93 0%, #7a0e93 100%);
    color: #dff7ef;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: transform .06s ease;
    text-decoration: none;
}
a.btn:hover { filter: brightness(1.05); }
a.btn:active { transform: translateY(1px); }

/* Cabeceras de tabla */
.otc-dashboard th {
    font-size: 11px; /* mínimo 11px */
    color: var(--muted);
    font-weight: 700; /* negrita */
    text-align: left;
    padding: 0 12px;
    font-family: inherit; /* misma tipografía que el dashboard */
    letter-spacing: 0.02em; /* opcional: más legible */
}

/* Filas normales */
.otc-dashboard td {
    font-size: 11px; /* mínimo 11px */
    color: var(--text);
    font-weight: 400; /* normal, sin bold */
    text-align: left;
    padding: 14px 12px;
    background: #0f1216;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-family: inherit; /* misma tipografía que th */
    letter-spacing: 0.02em;
}

/* Opciones en línea */
.otc-dashboard td.options {
    display: flex;
    gap: 8px; /* separación horizontal entre botones */
    align-items: center;
}

/* Botones de acción dentro de opciones */
.otc-dashboard td.options .btn.action {
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 8px;
    border: 1px solid #470454;
    background: linear-gradient(180deg, #470454 0%, #470454 100%);
    color: #dff7ef;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Hover en verde oscuro */
.otc-dashboard td.options .btn.action:hover {
    background: linear-gradient(180deg, #7a0e93 0%, #470454 100%);
    border-color: #7a0e93;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;     /* centrado vertical */
    justify-content: center; /* centrado horizontal */
    z-index: 9999;
    padding: 20px;           /* opcional, margen interior */
}

.modal-overlay.is-open {
    display: flex;
}

.modal-panel {
    width: 100%;
    max-width: 720px;
    margin: auto; /* asegura que se quede centrado */
}

/* Tabs estilo dashboard */
.tabs .tab {
    padding: 8px 16px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--panel);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tabs .tab:hover {
    background: rgba(155, 89, 182, 0.1); /* un toque violeta claro al pasar el mouse */
}

.tabs .tab.active {
    background: var(--primary);
    color: #fff;
}