body{margin:0;font-family:Segoe UI,Arial;background:#f5f7fb;color:#13233f}.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{background:linear-gradient(#061a43,#0b2e69);color:white;padding:24px}.brand{font-size:46px;font-weight:800}.brand span{display:block;font-size:14px}.erp{margin:28px 0}.erp small{display:block;opacity:.7}nav{display:flex;flex-direction:column}nav a{color:white;text-decoration:none;padding:12px;border-radius:8px}nav a:hover{background:#174a9d}header{height:86px;background:white;border-bottom:1px solid #dfe5ef;display:flex;justify-content:space-between;align-items:center;padding:0 30px}.muted{font-size:12px;color:#61708c}.contact{font-size:13px}.content{padding:28px}h1{margin:0 0 8px}.lead{color:#66748d}.cards,.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:20px 0}.kpis{grid-template-columns:repeat(4,1fr)}.card,.panel,.kpi{background:white;border:1px solid #dfe5ef;border-radius:14px;padding:20px}.card b,.kpi b{display:block;font-size:28px;color:#0d2f75;margin-top:8px}.grid2{display:grid;grid-template-columns:360px 1fr;gap:20px;margin-top:20px}.form{display:grid;gap:12px}label{font-size:13px;font-weight:600;color:#385174}input,select{width:100%;margin-top:6px;padding:11px;border:1px solid #cdd7e6;border-radius:8px}button,.linkbtn{background:#0f3c8d;color:#fff;border:0;border-radius:8px;padding:10px 14px;font-weight:700;text-decoration:none}.danger{background:white;color:#9b2632;border:1px solid #e1bac0}table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:11px;border-bottom:1px solid #e7ebf2;text-align:left}.flash{background:#eaf6ee;border:1px solid #b9dec5;color:#256b3f;padding:12px;border-radius:9px}.titlebar{display:flex;justify-content:space-between;align-items:center}

/* =========================================================
   ARO2 - MENU LATERAL BLANCO 2026-08-24
   ========================================================= */

.sidebar {
    background: #ffffff !important;
    color: #14213d !important;
    border-right: 1px solid #e4e9f2 !important;
    box-shadow: 2px 0 12px rgba(15, 38, 75, 0.04);
}

.aro2-brand-logo {
    padding: 22px 18px 15px 18px !important;
    text-align: center;
}

.aro2-brand-logo img {
    display: block;
    width: 175px;
    max-width: 92%;
    height: auto;
    margin: 0 auto;
    image-rendering: auto;
}

.sidebar .erp {
    color: #1858a8 !important;
    text-align: center;
    font-weight: 700;
    margin-bottom: 16px;
}

.sidebar nav {
    padding: 4px 12px 18px 12px;
}

.sidebar nav a {
    display: block;
    color: #17233f !important;
    background: transparent !important;
    border-radius: 9px;
    margin: 3px 0;
    padding: 11px 13px !important;
    text-decoration: none;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}

.sidebar nav a:hover {
    background: #eef5ff !important;
    color: #1858a8 !important;
}

.sidebar nav a:focus {
    background: #e6f0ff !important;
    color: #1858a8 !important;
    outline: none;
}

/* Logo superior general: un poco mayor y mas limpio */
main > header img {
    width: 175px !important;
    max-height: 72px !important;
    object-fit: contain;
}


/* ==========================================================
   ARO2 ERP - DISEÑO CORPORATIVO REFERENCIA 2026
   ========================================================== */

:root {
    --aro2-blue: #0757d9;
    --aro2-blue-dark: #082d66;
    --aro2-blue-text: #0b326d;
    --aro2-soft-blue: #eef5ff;
    --aro2-border: #e2e8f0;
    --aro2-text: #13213d;
    --aro2-muted: #667085;
    --aro2-bg: #f6f9fc;
    --aro2-white: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--aro2-bg);
    color: var(--aro2-text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

body {
    font-size: 14px;
}

/* ESTRUCTURA PRINCIPAL */

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    background: var(--aro2-bg);
}

/* ==========================================================
   MENU LATERAL
   ========================================================== */

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff !important;
    border-right: 1px solid var(--aro2-border);
    box-shadow: 4px 0 18px rgba(16, 45, 85, .035);
    color: var(--aro2-text) !important;
    overflow-y: auto;
}

.aro2-sidebar-logo {
    min-height: 132px;
    padding: 24px 22px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aro2-sidebar-logo img {
    display: block;
    width: 190px;
    max-width: 96%;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
}

.aro2-nav {
    padding: 5px 13px 18px;
}

.aro2-nav a {
    display: flex !important;
    align-items: center;
    gap: 13px;
    width: 100%;
    min-height: 47px;
    padding: 10px 14px !important;
    margin: 3px 0 !important;
    border-radius: 9px;
    color: #172746 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}

.aro2-nav a:hover {
    background: #edf4ff !important;
    color: var(--aro2-blue) !important;
}

.aro2-nav a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0862e8, #0752c7) !important;
    box-shadow: 0 7px 17px rgba(7, 87, 217, .20);
}

.nav-icon {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 20px;
    line-height: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding: 15px 22px 23px;
    text-align: center;
    border-top: 1px solid #edf0f5;
    color: var(--aro2-muted);
    font-size: 11px;
}

.sidebar-footer strong {
    display: block;
    margin-bottom: 5px;
    color: var(--aro2-blue-text);
    font-size: 12px;
}

.sidebar-footer span {
    display: block;
}

/* ==========================================================
   AREA CENTRAL
   ========================================================== */

main {
    min-width: 0;
    background: var(--aro2-bg);
}

/* CABECERA SUPERIOR */

.aro2-topbar {
    min-height: 104px;
    padding: 17px 32px;
    background: #ffffff;
    border-bottom: 1px solid var(--aro2-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    box-shadow: 0 2px 8px rgba(19, 40, 70, .025);
}

.topbar-company {
    min-width: 280px;
}

.company-name {
    margin-bottom: 4px;
    color: var(--aro2-blue-text);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.company-line {
    color: var(--aro2-muted);
    font-size: 12px;
    line-height: 1.55;
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
}

.topbar-contact {
    color: #3d4d67;
    font-size: 12px;
    line-height: 1.7;
}

.topbar-divider {
    width: 1px;
    height: 52px;
    background: #dce2eb;
}

.topbar-erp {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.topbar-erp strong {
    color: var(--aro2-blue-text);
    font-size: 21px;
    line-height: 1.15;
}

.topbar-erp span {
    margin-top: 5px;
    color: #31517e;
    font-size: 11px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-circle {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--aro2-blue);
    color: white;
    font-weight: 800;
    font-size: 12px;
}

.topbar-user strong {
    display: block;
    color: var(--aro2-text);
    font-size: 12px;
}

.topbar-user span {
    display: block;
    margin-top: 2px;
    color: var(--aro2-muted);
    font-size: 10px;
}

/* CONTENIDO */

.content {
    padding: 24px 30px 38px !important;
    max-width: none !important;
}

/* TARJETAS */

.card {
    background: #ffffff !important;
    border: 1px solid var(--aro2-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 16px rgba(31, 55, 87, .055) !important;
    padding: 20px !important;
}

.card h1,
.card h2,
.card h3 {
    color: var(--aro2-blue-text);
}

h1 {
    color: var(--aro2-blue-text);
    letter-spacing: -.4px;
}

h2 {
    color: var(--aro2-blue-text);
    font-size: 19px;
}

h3 {
    color: var(--aro2-blue-text);
}

/* BOTONES */

button,
.btn,
input[type="submit"] {
    border: 0;
    border-radius: 8px !important;
    padding: 9px 15px !important;
    background: var(--aro2-blue);
    color: #ffffff;
    font-family: inherit;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(7, 87, 217, .15);
}

button:hover,
.btn:hover,
input[type="submit"]:hover {
    filter: brightness(.96);
}

/* INPUTS */

input,
select,
textarea {
    border: 1px solid #d7dee9 !important;
    border-radius: 7px !important;
    background: #ffffff;
    color: var(--aro2-text);
    padding: 9px 10px;
    font-family: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #6fa6ef !important;
    box-shadow: 0 0 0 3px rgba(7, 87, 217, .08);
}

/* TABLAS */

table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e9f1;
    border-radius: 9px;
}

thead th {
    background: #f7f9fc;
    color: #15294c;
    font-weight: 700;
    font-size: 12px;
    border-bottom: 1px solid #e5eaf1;
}

th,
td {
    padding: 11px 12px !important;
    text-align: left;
    vertical-align: middle;
}

tbody td {
    color: #34445f;
    font-size: 12px;
    border-bottom: 1px solid #edf0f4;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover td {
    background: #f9fbfe;
}

table a {
    color: var(--aro2-blue) !important;
    font-weight: 700;
}

/* MENSAJES */

.flash {
    padding: 12px 14px !important;
    margin-bottom: 17px;
    background: #edf5ff !important;
    color: #0752c7 !important;
    border: 1px solid #cfe2ff !important;
    border-radius: 8px !important;
}

/* CABECERA DE FICHA DE OBRA QUE YA CREAMOS */

.content > div:first-child img[src*="logo_aro2"] {
    width: 175px !important;
    max-height: 72px !important;
}

/* RESPONSIVE PARA IPAD */

@media (max-width: 1050px) {

    .app {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .aro2-sidebar-logo img {
        width: 160px;
    }

    .aro2-topbar {
        padding: 15px 20px;
    }

    .topbar-contact,
    .topbar-user {
        display: none;
    }

    .content {
        padding: 20px !important;
    }
}

@media (max-width: 760px) {

    .app {
        display: block;
    }

    .sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    .aro2-sidebar-logo {
        min-height: auto;
        padding: 15px;
    }

    .aro2-sidebar-logo img {
        width: 150px;
    }

    .aro2-nav {
        display: flex;
        overflow-x: auto;
        gap: 5px;
    }

    .aro2-nav a {
        min-width: max-content;
    }

    .sidebar-footer {
        display: none;
    }

    .aro2-topbar {
        min-height: auto;
    }

    .topbar-divider,
    .topbar-erp {
        display: none;
    }

    .company-name {
        font-size: 16px;
    }
}

/* ==========================================================
   FIN DISEÑO ARO2 REFERENCIA
   ========================================================== */




/* ARO2 COLORES LATERAL AZUL 2026-08-24 */

/* ===== LATERAL ===== */
.sidebar{
    background:#0b63ce !important;
    color:#ffffff !important;
    border-right:0 !important;
}

.sidebar .brand,
.sidebar .erp,
.sidebar .erp small,
.sidebar .muted{
    color:#ffffff !important;
}

.sidebar img{
    filter: brightness(0) invert(1);
}

.sidebar nav a{
    color:#ffffff !important;
    border-radius:10px;
    margin:4px 10px;
}

.sidebar nav a:hover{
    background:rgba(255,255,255,0.14) !important;
    color:#ffffff !important;
}

.sidebar nav a.active,
.sidebar nav a[aria-current="page"]{
    background:#084ea6 !important;
    color:#ffffff !important;
    font-weight:700;
    box-shadow:none !important;
}

.sidebar nav a span,
.sidebar nav a i,
.sidebar nav a svg{
    color:#ffffff !important;
    fill:#ffffff !important;
}

/* ===== CABECERA SUPERIOR ===== */
main > header{
    background:#ffffff !important;
    color:#1858a8 !important;
    border-bottom:1px solid #e7eef8 !important;
    box-shadow:none !important;
}

main > header strong,
main > header .muted,
main > header div,
main > header span,
main > header a{
    color:#1858a8 !important;
}

/* ===== ZONA CENTRAL ===== */
body{
    background:#f5f7fb !important;
}

.content{
    background:#f5f7fb !important;
}

/* ===== TARJETAS Y TABLAS ===== */
.card,
table,
.filters,
.tabs,
.panel{
    background:#ffffff !important;
    border:1px solid #e6edf7 !important;
    box-shadow:none !important;
}

/* ===== BOTONES / PESTAÑA ACTIVA ===== */
button,
.btn-primary,
input[type="submit"],
a.button{
    background:#0b63ce !important;
    color:#ffffff !important;
    border-color:#0b63ce !important;
}

.tabs .active,
.tab.active{
    background:#0b63ce !important;
    color:#ffffff !important;
    border-color:#0b63ce !important;
}




/* ARO2 AZUL OSCURO AJUSTE 2026-08-24 */

.sidebar{
    background:#073B78 !important;
}

.sidebar nav a.active,
.sidebar nav a[aria-current="page"]{
    background:#0A2E5C !important;
}

main > header{
    background:#ffffff !important;
    color:#0A2E5C !important;
}

main > header strong,
main > header .muted,
main > header div,
main > header span,
main > header a{
    color:#0A2E5C !important;
}

button,
.btn-primary,
input[type="submit"],
a.button,
.tabs .active,
.tab.active{
    background:#073B78 !important;
    border-color:#073B78 !important;
}




/* ARO2 TEXTO BLANCO NITIDO 2026-08-24 */

.sidebar,
.sidebar a,
.sidebar span,
.sidebar strong,
.sidebar small,
.sidebar .erp,
.sidebar .muted,
.sidebar nav a,
.sidebar nav a span {
    color:#FFFFFF !important;
}

.sidebar nav a {
    font-weight:600 !important;
    text-shadow:0 0 1px rgba(255,255,255,0.15);
}

.sidebar nav a.active,
.sidebar nav a[aria-current="page"] {
    color:#FFFFFF !important;
    font-weight:700 !important;
}

.sidebar svg {
    stroke:#FFFFFF !important;
    color:#FFFFFF !important;
}

.sidebar .nav-icon {
    color:#FFFFFF !important;
    opacity:1 !important;
}




/* ARO2 AZUL MARINO + LOGO NITIDO 2026-08-24 */

.sidebar{
    background:#041F42 !important;
}

/* Pestaña activa */
.sidebar nav a.active,
.sidebar nav a[aria-current="page"]{
    background:#08356D !important;
    color:#FFFFFF !important;
}

/* Texto lateral blanco puro */
.sidebar,
.sidebar a,
.sidebar span,
.sidebar strong,
.sidebar small,
.sidebar .erp,
.sidebar .muted,
.sidebar nav a,
.sidebar nav a span{
    color:#FFFFFF !important;
}

/* Logo lateral: más grande y sin filtros */
.aro2-sidebar-logo{
    padding:24px 16px 18px !important;
}

.aro2-sidebar-logo img,
.sidebar img{
    width:205px !important;
    max-width:96% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    filter:none !important;
    opacity:1 !important;
    image-rendering:auto !important;
}

/* Cabecera superior */
main > header{
    background:#FFFFFF !important;
}

main > header strong,
main > header div,
main > header span,
main > header a{
    color:#082C5C !important;
}




/* ARO2 LOGO LATERAL BLANCO NITIDO 2026-08-24 */

.aro2-sidebar-logo{
    padding:26px 14px 18px !important;
    text-align:center !important;
}

.aro2-sidebar-logo img,
.sidebar .aro2-sidebar-logo img{
    width:220px !important;
    max-width:96% !important;
    height:auto !important;
    object-fit:contain !important;
    filter:brightness(0) invert(1) !important;
    opacity:1 !important;
    mix-blend-mode:normal !important;
    image-rendering:auto !important;
}

.sidebar img{
    filter:brightness(0) invert(1) !important;
}




/* ARO2 BOTON ABRIR TEXTO BLANCO 2026-08-24 */

.content table td:last-child a,
.content table td:last-child a:visited,
.content table td:last-child a:hover,
.content table td:last-child a:active {
    color:#FFFFFF !important;
}