:root{
    --op-bg:#f5f7fb;
    --op-card:#ffffff;
    --op-text:#111827;
    --op-muted:#64748b;
    --op-blue:#2563eb;
    --op-blue-dark:#0f46c7;
    --op-purple:#6d28d9;
    --op-line:#e7ecf5;
    --op-shadow:0 14px 40px rgba(15,23,42,.08);
    --op-radius:18px;
    --op-ok:#16a34a;
    --op-warn:#f97316;
    --op-danger:#dc2626;
}

.op-body{background:var(--op-bg);}
.op-shell{min-height:100vh;display:flex;background:var(--op-bg);}
.op-sidebar{width:246px;min-height:100vh;position:sticky;top:0;background:linear-gradient(180deg,#2563eb 0%,#112d8e 100%);padding:18px 14px;color:#fff;display:flex;flex-direction:column;gap:18px;box-shadow:12px 0 32px rgba(37,99,235,.18);}
.op-brand{display:flex;gap:12px;align-items:center;padding:8px 8px 14px;border-bottom:1px solid rgba(255,255,255,.16);}
.op-brand__logo{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:900;font-size:20px;}
.op-brand strong{display:block;font-size:16px;line-height:1.1;}
.op-brand small{display:block;color:#bfdbfe;margin-top:4px;font-size:12px;}
.op-menu{display:grid;gap:6px;}
.op-menu__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;color:#dbeafe;font-weight:700;font-size:14px;transition:.18s ease;}
.op-menu__item:hover,.op-menu__item.is-active{background:rgba(255,255,255,.16);color:#fff;transform:translateX(2px);}
.op-menu__icon{width:24px;text-align:center;font-size:15px;}
.op-logout{margin-top:auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:11px 14px;text-align:center;font-weight:800;color:#fff;}
.op-main{flex:1;max-width:1180px;margin:0 auto;padding:22px 22px 96px;width:100%;}
.op-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px;background:transparent;}
.op-topbar h1{font-size:24px;line-height:1.1;margin:0;color:var(--op-text);}
.op-topbar p{margin:6px 0 0;color:var(--op-muted);font-size:14px;}
.op-topbar__right{display:flex;align-items:center;gap:10px;}
.op-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--op-line);box-shadow:var(--op-shadow);border-radius:999px;padding:10px 14px;color:#0f172a;font-weight:800;font-size:13px;}
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--op-blue);color:white;border-radius:14px;padding:11px 14px;font-weight:800;cursor:pointer;}
.op-btn--ghost{background:#fff;color:var(--op-blue);border:1px solid var(--op-line);box-shadow:var(--op-shadow);}
.op-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-bottom:16px;}
.op-panel{background:var(--op-card);border:1px solid var(--op-line);border-radius:24px;box-shadow:var(--op-shadow);padding:18px;}
.op-panel h2,.op-panel h3{margin:0 0 8px;color:var(--op-text);}
.op-panel p{color:var(--op-muted);}
.op-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.op-action{border-radius:18px;border:1px solid var(--op-line);padding:14px 16px;background:linear-gradient(90deg,#f8fbff,#fff);display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:78px;}
.op-action--blue{background:linear-gradient(90deg,#eff6ff,#fff);}
.op-action--green{background:linear-gradient(90deg,#ecfdf5,#fff);}
.op-action--orange{background:linear-gradient(90deg,#fff7ed,#fff);}
.op-action--purple{background:linear-gradient(90deg,#f5f3ff,#fff);}
.op-action__icon{width:42px;height:42px;border-radius:16px;background:#dbeafe;color:#2563eb;display:grid;place-items:center;font-size:22px;font-weight:900;}
.op-action strong{display:block;color:var(--op-text);font-size:15px;}
.op-action small{display:block;color:var(--op-muted);margin-top:3px;}
.op-chevron{font-size:22px;color:#2563eb;}
.op-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
.op-kpi{background:#fff;border:1px solid var(--op-line);border-radius:18px;padding:14px;box-shadow:var(--op-shadow);}
.op-kpi small{display:block;color:var(--op-muted);font-weight:800;margin-bottom:8px;}
.op-kpi strong{display:block;font-size:24px;color:#0f172a;}
.op-kpi span{font-size:12px;color:var(--op-ok);font-weight:800;}
.op-list{display:grid;gap:10px;}
.op-listitem{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--op-line);padding:11px 0;}
.op-dot{width:12px;height:12px;border-radius:50%;background:var(--op-blue);box-shadow:0 0 0 5px rgba(37,99,235,.12);}
.op-dot--green{background:var(--op-ok);box-shadow:0 0 0 5px rgba(22,163,74,.12);}
.op-dot--orange{background:var(--op-warn);box-shadow:0 0 0 5px rgba(249,115,22,.12);}
.op-dot--red{background:var(--op-danger);box-shadow:0 0 0 5px rgba(220,38,38,.12);}
.op-listitem strong{display:block;font-size:14px;}
.op-listitem small{color:var(--op-muted);}
.op-quickgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.op-quick{background:#fff;border:1px solid var(--op-line);border-radius:18px;padding:14px;text-align:center;box-shadow:var(--op-shadow);font-weight:800;color:#1d4ed8;}
.op-quick span{display:block;font-size:24px;margin-bottom:8px;}
.op-mobilebar{display:none;}
.card{border-radius:18px;box-shadow:var(--op-shadow);border:1px solid var(--op-line);}
.btn{border-radius:14px;}
.table{border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(15,23,42,.04);}
@media(max-width:900px){
    .op-shell{display:block;}
    .op-sidebar{display:none;}
    .op-main{padding:16px 16px 98px;max-width:720px;}
    .op-topbar{background:linear-gradient(135deg,#2563eb,#0f46c7);color:#fff;border-radius:0 0 24px 24px;margin:-16px -16px 18px;padding:18px 18px 22px;box-shadow:0 14px 30px rgba(37,99,235,.22);}
    .op-topbar h1,.op-topbar p{color:#fff;}
    .op-topbar__right{display:none;}
    .op-hero{grid-template-columns:1fr;}
    .op-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
    .op-actions{grid-template-columns:1fr;}
    .op-quickgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .op-mobilebar{position:fixed;left:0;right:0;bottom:0;height:76px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--op-line);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 14px;z-index:50;}
    .op-mobilebar__item{border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#64748b;font-weight:800;}
    .op-mobilebar__item.is-active{background:#eaf2ff;color:#2563eb;border:1px solid #bfdbfe;}
    .op-mobilebar__item span{font-size:20px;line-height:1;}
    .op-mobilebar__item small{font-size:12px;}
}
@media(max-width:560px){
    .op-kpis{grid-template-columns:1fr 1fr;gap:10px;}
    .op-kpi strong{font-size:20px;}
    .op-panel{padding:16px;border-radius:20px;}
}

/* Fase 2: ajustes para módulos v2 */
.op-page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}.op-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.op-formline{display:flex;gap:10px;flex-wrap:wrap;align-items:end}.op-card-title{margin:0 0 12px;color:var(--op-text)}.badge{border-radius:999px;padding:7px 10px;font-weight:800}.badge.good{background:#dcfce7;color:#166534}.badge.bad{background:#fee2e2;color:#991b1b}.btn.secondary{background:#fff;color:var(--op-blue);border:1px solid var(--op-line);box-shadow:0 8px 20px rgba(15,23,42,.05)}.btn.danger{background:#dc2626;color:#fff}.table th{background:#f8fafc;color:#334155;font-size:13px}.table td{vertical-align:middle}.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.formgrid p{margin:0}label{display:block;font-weight:800;color:#334155;margin-bottom:6px}input,select,textarea{width:100%;border:1px solid var(--op-line);border-radius:12px;padding:10px 11px;background:#fff;color:#0f172a}.muted{color:var(--op-muted)}
@media(max-width:760px){.table{display:block;overflow-x:auto;white-space:nowrap}.card,.op-panel{border-radius:18px}.formgrid{grid-template-columns:1fr}.op-toolbar .btn,.op-toolbar a.btn{flex:1;min-width:135px}.op-main h3{font-size:17px}}

/* Fase 3: detalle/configuración en layout operacional */
.op-main .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.op-main .badge{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.op-main textarea{min-height:92px}.op-main .card h3{margin-top:0}.op-main small.muted{display:block;margin-top:6px}.op-main img{max-width:100%}.op-main .table .table{box-shadow:none;border:1px solid var(--op-line)}
@media(max-width:760px){.op-main .actions .btn{width:100%}.op-main .table td .btn,.op-main .table td .badge{margin:3px 0}.op-main form[style*="display:flex"]{display:grid!important;grid-template-columns:1fr!important}.op-main form[style*="display:flex"] p{margin:0}.op-main .card{padding:14px}}

/* Fase 4: corrección scroll horizontal móvil/tablas anchas */
html, body {
    max-width: 100%;
}
.op-shell,
.op-main,
.op-panel,
.card {
    min-width: 0;
    max-width: 100%;
}
.op-main {
    overflow-x: hidden;
}
.op-main .table {
    width: 100%;
    max-width: 100%;
}
.op-main .table th,
.op-main .table td {
    overflow-wrap: normal;
}

@media (max-width: 900px) {
    .op-main {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .op-panel,
    .card {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .op-main table.table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
    }

    .op-main table.table thead,
    .op-main table.table tbody,
    .op-main table.table tfoot {
        display: table;
        width: max-content;
        min-width: 100%;
    }

    .op-main table.table tr {
        display: table-row;
    }

    .op-main table.table th,
    .op-main table.table td {
        white-space: nowrap;
        vertical-align: top;
    }

    .op-main table.table td .badge,
    .op-main table.table td .btn {
        white-space: nowrap;
    }

    .op-main table.table form {
        min-width: 260px;
    }
}

@media (max-width: 560px) {
    .op-main {
        padding-left: 12px;
        padding-right: 12px;
    }

    .op-topbar {
        margin-left: -12px;
        margin-right: -12px;
    }

    .op-main table.table th,
    .op-main table.table td {
        padding: 10px;
        font-size: 13px;
    }
}

/* Fase 5: navegación móvil completa y estabilidad responsive */
html, body { max-width:100%; overflow-x:hidden; }
.op-shell, .op-main, .op-panel, .card { min-width:0; }
.op-main { overflow-x:hidden; }
.op-panel, .card { max-width:100%; }
.op-page-head > *, .op-toolbar > *, .actions > * { min-width:0; }
.op-modulegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:14px}
.op-modulecard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--op-line);border-radius:18px;padding:16px;box-shadow:0 8px 20px rgba(15,23,42,.05);color:#0f172a;text-decoration:none;min-height:128px}
.op-modulecard:hover{border-color:#bfdbfe;box-shadow:0 14px 32px rgba(37,99,235,.12);transform:translateY(-1px)}
.op-modulecard__icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:#eff6ff;color:#2563eb;font-size:22px;font-weight:900}
.op-modulecard strong{font-size:16px}.op-modulecard small{color:var(--op-muted);line-height:1.35}
.op-table-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px}
.op-table-scroll>.table{min-width:760px;margin:0}
.table{max-width:100%}
.table th,.table td{overflow-wrap:normal}
@media(max-width:760px){
    .op-main{width:100vw;max-width:100vw;box-sizing:border-box;overflow-x:hidden}
    .op-panel,.card{width:100%;box-sizing:border-box;overflow:hidden}
    .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;max-width:100%}
    .table tbody,.table thead,.table tfoot{min-width:680px}
    .table .table tbody,.table .table thead,.table .table tfoot{min-width:780px}
    .op-modulegrid{grid-template-columns:1fr 1fr;gap:10px}
    .op-modulecard{min-height:116px;padding:14px;border-radius:16px}
    .op-modulecard__icon{width:38px;height:38px;font-size:20px;border-radius:14px}
    .op-page-head{align-items:stretch}.op-page-head .op-toolbar{width:100%}
    input,select,textarea{font-size:16px}
}
@media(max-width:430px){
    .op-modulegrid{grid-template-columns:1fr}
    .op-kpis{grid-template-columns:1fr}
    .op-mobilebar{height:72px;padding:7px 10px;gap:5px}
    .op-mobilebar__item{border-radius:15px}
}

/* Fase 15: corrección visual de Más opciones en móvil */
.op-more-page{
    overflow:visible;
}
.op-more-intro h3{
    margin:0 0 6px;
}
.op-more-intro p{
    margin:0;
}
.op-more-section{
    margin-top:18px;
}
.op-more-section h4{
    margin:0 0 10px;
    font-size:14px;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#475569;
}
.op-more-grid{
    width:100%;
}
.op-more-card{
    box-sizing:border-box;
    overflow:hidden;
}
.op-more-card__text{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.op-more-card strong,
.op-more-card small{
    display:block;
    white-space:normal;
    overflow-wrap:anywhere;
}

@media(max-width:760px){
    .op-more-page{
        padding:14px;
    }
    .op-more-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }
    .op-more-card{
        display:grid;
        grid-template-columns:44px 1fr;
        align-items:center;
        min-height:auto;
        padding:13px;
        border-radius:16px;
        gap:12px;
    }
    .op-more-card .op-modulecard__icon{
        width:42px;
        height:42px;
        border-radius:14px;
        font-size:20px;
    }
    .op-more-card strong{
        font-size:15px;
        line-height:1.15;
    }
    .op-more-card small{
        font-size:12px;
        line-height:1.3;
    }
}

@media(max-width:380px){
    .op-more-card{
        grid-template-columns:38px 1fr;
        padding:12px;
    }
    .op-more-card .op-modulecard__icon{
        width:38px;
        height:38px;
        font-size:18px;
    }
}