:root{
    --primary:#0b5ed7;
    --primary-dark:#073b88;
    --navy:#071b35;
    --navy2:#0c294a;
    --bg:#f4f8fc;
    --card:#ffffff;
    --text:#10243e;
    --muted:#718096;
    --border:#e4ebf3;
    --success:#16a36a;
    --danger:#dc3545;
    --warning:#f59e0b;
    --shadow:0 10px 35px rgba(17,45,78,.08);
    --radius:18px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f2f6fb 100%
        );
    color:var(--text);
}

a{
    color:var(--primary);
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

aside{
    background:
        linear-gradient(
            180deg,
            #071b35 0%,
            #0d3157 100%
        ) !important;

    box-shadow:
        10px 0 35px rgba(0,0,0,.08);

    min-height:100vh;
    position:relative;
}

.brand{
    padding:25px 22px !important;
    font-size:20px !important;
    font-weight:800 !important;
    letter-spacing:.4px;
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,.09);
}

aside nav{
    padding:14px 12px;
}

aside nav a{
    display:flex !important;
    align-items:center;
    gap:10px;
    color:#dce8f5 !important;
    padding:13px 14px !important;
    margin:4px 0;
    border-radius:12px;
    transition:.2s ease;
    font-weight:600;
}

aside nav a:hover{
    background:rgba(255,255,255,.08);
    color:#fff !important;
    transform:translateX(2px);
}

main{
    min-height:100vh;
    padding:0 28px 40px !important;
    background:
        radial-gradient(
            circle at top right,
            rgba(11,94,215,.06),
            transparent 35%
        );
}

.topbar,
header{
    border-bottom:1px solid var(--border);
}

.card,
.modern-card,
.stat{
    background:var(--card);
    border:1px solid var(--border) !important;
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow) !important;
}

.card{
    padding:24px !important;
    margin-bottom:20px;
}

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

.grid{
    gap:18px !important;
}

.stat{
    padding:24px !important;
    transition:.2s ease;
}

.stat:hover{
    transform:translateY(-2px);
}

.stat b{
    display:block;
    font-size:30px;
    line-height:1.1;
    color:var(--primary);
}

.stat span{
    display:block;
    color:var(--muted);
    margin-top:7px;
    font-weight:600;
}

form{
    margin:0;
}

label{
    display:flex;
    flex-direction:column;
    gap:7px;
    color:var(--text);
    font-weight:650;
}

input,
select,
textarea{
    width:100%;
    border:1px solid #d8e2ee;
    background:#fff;
    color:var(--text);
    border-radius:11px;
    padding:12px 14px;
    outline:none;
    transition:.2s ease;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--primary);
    box-shadow:
        0 0 0 4px rgba(11,94,215,.10);
}

button,
.btn-primary{
    border:0;
    border-radius:11px;
    padding:12px 18px;
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #1677ef
        );
    color:white;
    font-weight:750;
    box-shadow:
        0 7px 18px rgba(11,94,215,.20);
}

button:hover,
.btn-primary:hover{
    filter:brightness(1.04);
    transform:translateY(-1px);
}

table{
    width:100%;
    border-collapse:collapse;
}

th{
    text-align:left;
    padding:14px;
    background:#f5f8fc;
    color:#50627a;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

td{
    padding:15px 14px;
    border-bottom:1px solid var(--border);
}

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

.alert-success{
    padding:15px 18px;
    background:#eafaf2;
    border:1px solid #bcebd2;
    color:#087743;
    border-radius:13px;
    margin-bottom:20px;
    font-weight:700;
}

.alert-error{
    padding:15px 18px;
    background:#fff0f1;
    border:1px solid #ffc8cd;
    color:#a61b2b;
    border-radius:13px;
    margin-bottom:20px;
    font-weight:650;
}

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:32px 0 24px;
    margin-bottom:5px;
}

.page-header h1{
    margin:4px 0 5px;
    font-size:32px;
    letter-spacing:-.8px;
}

.page-header p{
    margin:0;
    color:var(--muted);
}

.eyebrow{
    color:var(--primary);
    font-size:11px;
    font-weight:850;
    letter-spacing:.14em;
}

.settings-grid{
    display:grid;
    grid-template-columns:
        minmax(0,1.2fr)
        minmax(320px,.8fr);
    gap:22px;
}

.modern-card{
    padding:25px;
    margin-bottom:22px;
}

.card-title{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:23px;
}

.card-title h2{
    margin:0 0 4px;
    font-size:20px;
}

.card-title p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.title-icon{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#edf5ff;
    font-size:22px;
}

.modern-form{
    display:grid;
    gap:17px;
}

.modern-form small{
    color:var(--muted);
    font-weight:400;
}

.logo-preview{
    padding:20px;
    border:1px dashed #cbd8e7;
    border-radius:14px;
    background:#f8fbff;
    display:flex;
    justify-content:center;
}

.logo-preview img{
    max-width:300px;
    max-height:110px;
    object-fit:contain;
}

.banner-preview{
    overflow:hidden;
    border-radius:14px;
}

.banner-preview img{
    display:block;
    width:100%;
    max-height:220px;
    object-fit:cover;
}

.profile-big,
.owner-profile-large{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:24px;
}

.profile-big img,
.owner-profile-large img,
.profile-placeholder{
    width:82px;
    height:82px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #edf4fc;
}

.profile-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef4fb;
    font-size:32px;
}

.profile-big strong,
.owner-profile-large strong{
    display:block;
    font-size:19px;
}

.profile-big span,
.owner-profile-large span{
    display:block;
    color:var(--muted);
    margin-top:4px;
}

.profile-big small{
    display:block;
    color:var(--primary);
    margin-top:5px;
}

.owner-login{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px;
    background:
        radial-gradient(
            circle at top left,
            rgba(11,94,215,.16),
            transparent 35%
        ),
        #f3f7fc;
}

.owner-login-card{
    width:100%;
    max-width:480px;
    padding:38px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:0 25px 70px rgba(10,40,75,.12);
}

.owner-brand{
    text-align:center;
    margin-bottom:28px;
}

.owner-brand img{
    width:auto;
    max-width:230px;
    max-height:100px;
    object-fit:contain;
}

.owner-logo-placeholder{
    width:80px;
    height:80px;
    border-radius:22px;
    background:#edf5ff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:35px;
    margin:0 auto 15px;
}

.owner-brand h1{
    margin:15px 0 5px;
    font-size:24px;
}

.owner-brand p{
    color:var(--muted);
    margin:0;
}

.owner-login-card h2{
    margin:0 0 6px;
}

.muted{
    color:var(--muted);
}

.owner-topbar{
    min-height:82px;
    padding:0 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#fff;
    box-shadow:0 4px 20px rgba(20,50,80,.06);
}

.owner-top-brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
}

.owner-top-brand img{
    max-width:170px;
    max-height:55px;
    object-fit:contain;
}

.owner-top-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.owner-top-user img,
.owner-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.owner-avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#edf5ff;
    font-size:22px;
}

.owner-top-user strong{
    display:block;
}

.owner-top-user small{
    color:var(--muted);
}

.owner-top-user a{
    margin-left:15px;
    font-weight:700;
}

.owner-main{
    max-width:1250px;
    margin:0 auto;
    padding:30px;
}

.owner-welcome{
    padding:35px;
    border-radius:22px;
    margin-bottom:22px;
    color:#fff;
    background:
        linear-gradient(
            110deg,
            #073b88,
            #0b5ed7
        );
    box-shadow:
        0 15px 35px rgba(11,94,215,.20);
}

.owner-welcome h1{
    margin:8px 0;
    font-size:34px;
}

.owner-welcome p{
    margin:0;
    opacity:.85;
}

.owner-stats{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:22px;
}

.owner-stat{
    padding:23px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.owner-stat span{
    font-size:24px;
}

.owner-stat strong{
    display:block;
    font-size:27px;
    margin-top:10px;
}

.owner-stat small{
    color:var(--muted);
    font-weight:600;
}

.owner-grid{
    display:grid;
    grid-template-columns:
        1fr 1fr;
    gap:22px;
}

.owner-unit{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--border);
}

.owner-unit:last-child{
    border-bottom:0;
}

.owner-unit span{
    color:var(--muted);
}

.status-pill{
    display:inline-flex;
    padding:6px 10px;
    border-radius:99px;
    font-size:11px;
    font-weight:800;
}

.status-paid{
    background:#e9f9f1;
    color:#087743;
}

.status-pending{
    background:#fff6df;
    color:#996900;
}

.status-partial{
    background:#edf4ff;
    color:#0b5ed7;
}

.status-overdue{
    background:#fff0f1;
    color:#a61b2b;
}

.status-cancelled{
    background:#f0f2f5;
    color:#697586;
}

.responsive-table{
    overflow-x:auto;
}

@media(max-width:1000px){

    .settings-grid,
    .owner-grid{
        grid-template-columns:1fr;
    }

    .owner-stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){

    aside{
        min-height:auto !important;
    }

    main{
        padding:0 14px 25px !important;
    }

    .page-header h1{
        font-size:25px;
    }

    .settings-grid{
        display:block;
    }

    .owner-topbar{
        padding:12px 16px;
        flex-wrap:wrap;
        gap:10px;
    }

    .owner-top-brand img{
        max-width:130px;
    }

    .owner-top-user a{
        margin-left:5px;
    }

    .owner-main{
        padding:18px 14px;
    }

    .owner-welcome{
        padding:25px;
    }

    .owner-welcome h1{
        font-size:27px;
    }

    .owner-stats{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .owner-stat{
        padding:16px;
    }

    .owner-stat strong{
        font-size:22px;
    }

    .owner-login-card{
        padding:25px;
    }
}

.modern-top-header{
    min-height:82px;
    margin:0 -28px;
    padding:12px 28px;
    background:#fff;
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    position:relative;
    z-index:2;
}

.modern-top-brand{
    display:flex;
    align-items:center;
    gap:14px;
}

.modern-top-brand img{
    max-width:190px;
    max-height:58px;
    object-fit:contain;
}

.modern-top-brand strong{
    display:block;
    font-size:18px;
    color:var(--text);
}

.modern-top-brand small{
    display:block;
    color:var(--muted);
    margin-top:3px;
}

.modern-top-logo{
    width:48px;
    height:48px;
    border-radius:13px;
    background:#edf5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

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

.modern-top-user img,
.modern-avatar{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #e7eff8;
}

.modern-avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    background:#eef4fb;
    font-size:22px;
}

.modern-top-user strong{
    display:block;
}

.modern-top-user small{
    display:block;
    color:var(--muted);
    font-size:12px;
}

.modern-notification{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#f4f7fb;
    font-size:19px;
    margin-right:5px;
}

.profile-menu{
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:var(--text);
    background:#fff;
}

.modern-banner{
    min-height:190px;
    margin:0 -28px 25px;
    padding:35px 45px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    color:#fff;
}

.modern-banner-default{
    background:
        linear-gradient(
            110deg,
            #073b88,
            #0b5ed7
        );
}

.modern-banner span{
    font-size:11px;
    letter-spacing:.15em;
    font-weight:800;
    opacity:.85;
}

.modern-banner h1{
    margin:8px 0 5px;
    font-size:36px;
    letter-spacing:-1px;
}

.modern-banner p{
    margin:0;
    opacity:.88;
}

@media(max-width:700px){

    .modern-top-header{
        margin:0 -14px;
        padding:12px 14px;
    }

    .modern-top-brand small{
        display:none;
    }

    .modern-top-brand strong{
        font-size:15px;
    }

    .modern-top-user>div:not(.modern-avatar):not(.modern-notification){
        display:none;
    }

    .modern-banner{
        margin:0 -14px 20px;
        padding:28px 22px;
    }

    .modern-banner h1{
        font-size:27px;
    }
}

/* ==========================================================
   CORRECCION DEFINITIVA DEL LAYOUT ADMINISTRATIVO
   ========================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

/* Layout principal cuando existe la barra administrativa */
body:has(aside){
    display:grid !important;
    grid-template-columns:270px minmax(0,1fr) !important;
    min-height:100vh;
    width:100%;
    margin:0 !important;
    padding:0 !important;
}

/* Barra lateral */
body:has(aside) > aside{
    width:270px !important;
    min-width:270px !important;
    max-width:270px !important;
    min-height:100vh;
    margin:0 !important;
    position:relative !important;
    overflow:hidden;
}

/* Contenido */
body:has(aside) > main{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 28px 40px !important;
    overflow-x:hidden;
}

/* ==========================================================
   CABECERA
   ========================================================== */

.modern-top-header{
    width:auto !important;
    max-width:none !important;
    margin:0 -28px !important;
    padding:12px 28px !important;
    min-height:82px;
}

/* ==========================================================
   BANNER
   ========================================================== */

.modern-banner{
    width:auto !important;
    max-width:none !important;
    margin:0 -28px 25px !important;
    box-sizing:border-box;
}

/* ==========================================================
   CONTENIDO INTERNO
   ========================================================== */

body:has(aside) main > .card,
body:has(aside) main > .modern-card,
body:has(aside) main > .page-header,
body:has(aside) main > .grid,
body:has(aside) main > .settings-grid{
    max-width:100%;
    min-width:0;
}

/* Grids nunca deben provocar desbordamiento */
.grid,
.settings-grid,
.owner-grid{
    width:100%;
    min-width:0;
}

.grid > *,
.settings-grid > *,
.owner-grid > *{
    min-width:0;
}

/* Tablas */
.card table,
.modern-card table{
    max-width:100%;
}

.responsive-table,
.card > div[style*="overflow"],
.modern-card > div[style*="overflow"]{
    max-width:100%;
    overflow-x:auto !important;
}

/* ==========================================================
   HEADER SUPERIOR
   ========================================================== */

.modern-top-brand{
    min-width:0;
    flex:1 1 auto;
}

.modern-top-brand > div{
    min-width:0;
}

.modern-top-brand strong{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.modern-top-brand small{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.modern-top-user{
    flex:0 0 auto;
}

/* ==========================================================
   ESCRITORIO
   ========================================================== */

.page-header{
    width:100%;
    min-width:0;
}

.page-header > div{
    min-width:0;
}

.page-header h1{
    overflow-wrap:anywhere;
}

/* ==========================================================
   FORMULARIOS
   ========================================================== */

.formgrid{
    width:100%;
    min-width:0;
}

.formgrid > *{
    min-width:0;
}

/* ==========================================================
   MOVIL / TABLET
   ========================================================== */

@media(max-width:1000px){

    body:has(aside){
        grid-template-columns:220px minmax(0,1fr) !important;
    }

    body:has(aside) > aside{
        width:220px !important;
        min-width:220px !important;
        max-width:220px !important;
    }

    body:has(aside) > main{
        padding:0 20px 30px !important;
    }

    .modern-top-header{
        margin:0 -20px !important;
        padding:12px 20px !important;
    }

    .modern-banner{
        margin:0 -20px 20px !important;
    }

    .modern-top-brand img{
        max-width:150px;
    }

    .modern-top-brand small{
        display:none;
    }
}

@media(max-width:700px){

    body:has(aside){
        display:block !important;
    }

    body:has(aside) > aside{
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
        min-height:auto !important;
    }

    body:has(aside) > aside nav{
        display:flex;
        flex-wrap:wrap;
        gap:4px;
        padding:10px;
    }

    body:has(aside) > aside nav a{
        flex:1 1 auto;
        white-space:nowrap;
        padding:10px !important;
    }

    body:has(aside) > main{
        width:100% !important;
        padding:0 14px 25px !important;
    }

    .modern-top-header{
        margin:0 -14px !important;
        padding:10px 14px !important;
        min-height:70px;
    }

    .modern-top-brand{
        max-width:55%;
    }

    .modern-top-brand img{
        max-width:115px;
        max-height:45px;
    }

    .modern-top-brand strong{
        font-size:14px;
    }

    .modern-top-user{
        gap:6px;
    }

    .modern-top-user img,
    .modern-avatar{
        width:38px;
        height:38px;
    }

    .modern-notification{
        display:none;
    }

    .profile-menu{
        display:none;
    }

    .modern-banner{
        margin:0 -14px 20px !important;
        min-height:160px;
        padding:25px 20px;
    }

    .modern-banner h1{
        font-size:26px;
    }

    .modern-banner p{
        font-size:13px;
    }

    .grid{
        grid-template-columns:1fr !important;
    }

    .settings-grid{
        grid-template-columns:1fr !important;
    }

    .page-header{
        padding:22px 0 18px;
    }

    .page-header h1{
        font-size:25px;
    }

    .card,
    .modern-card{
        padding:18px !important;
        border-radius:15px !important;
    }
}

/* ==========================================================
   EVITAR DESBORDE DE TEXTOS
   ========================================================== */

h1,
h2,
h3,
h4,
p,
span,
strong,
td,
th{
    overflow-wrap:anywhere;
}

/* Inputs y botones */
input,
select,
textarea,
button{
    max-width:100%;
}

/* Imágenes */
img{
    max-width:100%;
}

/* ==========================================================
   FIN CORRECCION
   ========================================================== */


/* ==========================================================
   DASHBOARD PROFESIONAL
   ========================================================== */

.dashboard-page{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

/* Bienvenida */

.dashboard-welcome{
    margin-top:25px;
    margin-bottom:22px;
    padding:25px 28px;
    border-radius:20px;
    background:
        linear-gradient(
            110deg,
            #ffffff,
            #f1f7ff
        );
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.welcome-user{
    display:flex;
    align-items:center;
    gap:17px;
}

.dashboard-admin-photo,
.dashboard-admin-placeholder{
    width:78px;
    height:78px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #e7f0fb;
    flex-shrink:0;
}

.dashboard-admin-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eaf2fc;
    font-size:32px;
}

.dashboard-label{
    color:var(--primary);
    font-size:11px;
    letter-spacing:.14em;
    font-weight:850;
}

.dashboard-welcome h1{
    margin:5px 0 5px;
    font-size:28px;
    color:var(--text);
}

.dashboard-welcome p{
    margin:0;
    color:var(--muted);
}

.welcome-date{
    text-align:right;
    color:var(--muted);
}

.welcome-date strong{
    display:block;
    font-size:27px;
    color:var(--primary);
    margin-top:3px;
}

.welcome-date p{
    margin-top:8px;
    font-style:italic;
    color:var(--primary);
}

/* Estadísticas */

.dashboard-stats{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:17px;
    margin-bottom:22px;
}

.dashboard-stat{
    min-width:0;
    padding:21px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    gap:15px;
    color:var(--text);
    transition:.2s ease;
}

.dashboard-stat:hover{
    transform:translateY(-3px);
    box-shadow:
        0 15px 35px rgba(17,45,78,.12);
}

.dashboard-stat-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    flex-shrink:0;
}

.dashboard-stat strong{
    display:block;
    font-size:31px;
    line-height:1;
}

.dashboard-stat span{
    display:block;
    color:var(--text);
    margin-top:5px;
    font-weight:650;
}

.dashboard-stat small{
    display:block;
    margin-top:7px;
    color:var(--primary);
    font-weight:750;
}

.stat-blue .dashboard-stat-icon{
    background:#e7f1ff;
}

.stat-blue strong{
    color:#0b67dc;
}

.stat-green .dashboard-stat-icon{
    background:#e8f8ef;
}

.stat-green strong{
    color:#12a568;
}

.stat-orange .dashboard-stat-icon{
    background:#fff0df;
}

.stat-orange strong{
    color:#ef7d12;
}

.stat-purple .dashboard-stat-icon{
    background:#f0eaff;
}

.stat-purple strong{
    color:#7651e8;
}

/* Columnas */

.dashboard-columns{
    display:grid;
    grid-template-columns:
        1.15fr
        .85fr
        1fr;
    gap:18px;
    margin-bottom:20px;
}

.dashboard-panel{
    min-width:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:21px;
}

.panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-bottom:18px;
}

.panel-heading > div{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.panel-icon{
    width:39px;
    height:39px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf5ff;
    font-size:18px;
    flex-shrink:0;
}

.panel-heading h2{
    margin:0;
    font-size:17px;
    color:var(--text);
}

.panel-heading p{
    margin:3px 0 0;
    font-size:12px;
    color:var(--muted);
}

.panel-heading > a{
    white-space:nowrap;
    font-size:12px;
    font-weight:800;
}

/* Comunicados */

.empty-community{
    min-height:205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
}

.empty-community.small{
    min-height:190px;
}

.empty-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#edf5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    margin-bottom:10px;
}

.empty-community strong{
    font-size:15px;
}

.empty-community p{
    color:var(--muted);
    font-size:13px;
    max-width:270px;
    line-height:1.5;
    margin:7px 0 10px;
}

.empty-community a{
    font-size:12px;
    font-weight:800;
}

/* Donut */

.payment-dashboard{
    min-height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
}

.payment-donut{
    width:145px;
    height:145px;
    border-radius:50%;
    background:
        conic-gradient(
            #13b66e var(--paid),
            #ef5350 var(--paid),
            #ef5350 calc(var(--paid) + 45deg),
            #b9c2ce calc(var(--paid) + 45deg)
        );
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.payment-donut::after{
    content:"";
    position:absolute;
    width:103px;
    height:103px;
    border-radius:50%;
    background:#fff;
}

.payment-donut-center{
    position:relative;
    z-index:2;
    text-align:center;
}

.payment-donut-center strong{
    display:block;
    font-size:25px;
    color:var(--text);
}

.payment-donut-center span{
    color:var(--muted);
    font-size:12px;
}

.payment-legend{
    display:grid;
    gap:13px;
}

.payment-legend div{
    display:grid;
    grid-template-columns:12px auto 30px;
    gap:7px;
    align-items:center;
    font-size:12px;
}

.payment-legend i{
    width:9px;
    height:9px;
    border-radius:50%;
}

.legend-paid{
    background:#13b66e;
}

.legend-pending{
    background:#ef5350;
}

.legend-process{
    background:#aeb7c3;
}

.payment-legend span{
    color:var(--muted);
}

.payment-legend strong{
    text-align:right;
}

/* Vencimientos */

.due-list{
    display:grid;
    gap:7px;
}

.due-item{
    display:grid;
    grid-template-columns:50px minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    padding:9px 0;
    border-bottom:1px solid var(--border);
}

.due-item:last-child{
    border-bottom:0;
}

.due-date{
    width:48px;
    height:48px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.due-date strong{
    font-size:17px;
}

.due-date small{
    font-size:8px;
    text-transform:uppercase;
    font-weight:800;
}

.due-red{
    background:#fff0f0;
    color:#e74c3c;
}

.due-blue{
    background:#edf5ff;
    color:#1976d2;
}

.due-green{
    background:#eaf9f1;
    color:#159c62;
}

.due-info{
    min-width:0;
}

.due-info strong{
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
}

.due-info span{
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:10px;
}

.due-item > b{
    font-size:12px;
    white-space:nowrap;
}

/* Acciones */

.dashboard-actions{
    margin-bottom:20px;
}

.quick-actions{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:13px;
}

.quick-actions a{
    min-width:0;
    min-height:100px;
    padding:17px;
    border-radius:13px;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #0b5ed7,
            #1677ef
        );
    display:flex;
    flex-direction:column;
    justify-content:center;
    transition:.2s ease;
}

.quick-actions a:nth-child(1){
    background:
        linear-gradient(
            135deg,
            #10a968,
            #18c17a
        );
}

.quick-actions a:nth-child(2){
    background:
        linear-gradient(
            135deg,
            #0865d7,
            #2484ed
        );
}

.quick-actions a:nth-child(3){
    background:
        linear-gradient(
            135deg,
            #7044dc,
            #8a5bed
        );
}

.quick-actions a:nth-child(4){
    background:
        linear-gradient(
            135deg,
            #e97812,
            #f49a28
        );
}

.quick-actions a:hover{
    transform:translateY(-2px);
}

.quick-actions span{
    font-size:22px;
    margin-bottom:8px;
}

.quick-actions strong{
    font-size:13px;
}

.quick-actions small{
    opacity:.85;
    margin-top:4px;
    font-size:10px;
}

/* Parte inferior */

.dashboard-bottom{
    display:grid;
    grid-template-columns:
        .9fr 1.1fr;
    gap:18px;
    margin-bottom:20px;
}

.dashboard-profile{
    display:flex;
    align-items:center;
    gap:15px;
    padding:5px 0 2px;
}

.dashboard-profile img,
.dashboard-profile-placeholder{
    width:76px;
    height:76px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #edf4fc;
    flex-shrink:0;
}

.dashboard-profile-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf4fc;
    font-size:28px;
}

.dashboard-profile strong{
    display:block;
    font-size:16px;
}

.dashboard-profile span{
    display:block;
    color:var(--muted);
    margin-top:4px;
    font-size:12px;
}

.dashboard-profile small{
    display:block;
    color:var(--primary);
    margin-top:6px;
    font-size:11px;
    font-weight:700;
}

.dashboard-community{
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:21px;
}

.community-title{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:20px;
}

.community-title > div{
    min-width:0;
}

.community-title > div > h2{
    margin:0;
    font-size:17px;
}

.community-title > div > p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:12px;
}

.community-title > :first-child{
    font-size:28px;
}

.community-items{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

.community-items > div{
    padding:12px;
    border-radius:13px;
    background:#f7faff;
}

.community-items span{
    display:block;
    font-size:22px;
    margin-bottom:7px;
}

.community-items strong{
    display:block;
    font-size:12px;
}

.community-items small{
    display:block;
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
    margin-top:4px;
}

/* Footer */

.dashboard-footer{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:17px 5px 5px;
    color:#7c8da2;
    font-size:10px;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1200px){

    .dashboard-columns{
        grid-template-columns:
            1fr 1fr;
    }

    .dashboard-columns > .dashboard-panel:last-child{
        grid-column:1 / -1;
    }
}

@media(max-width:950px){

    .dashboard-stats{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .dashboard-bottom{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){

    .dashboard-welcome{
        flex-direction:column;
        align-items:flex-start;
        padding:20px;
    }

    .welcome-date{
        text-align:left;
    }

    .dashboard-welcome h1{
        font-size:24px;
    }

    .dashboard-admin-photo,
    .dashboard-admin-placeholder{
        width:60px;
        height:60px;
    }

    .dashboard-stats{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .dashboard-stat{
        padding:15px;
        gap:10px;
    }

    .dashboard-stat-icon{
        width:44px;
        height:44px;
        font-size:19px;
    }

    .dashboard-stat strong{
        font-size:24px;
    }

    .dashboard-stat span{
        font-size:12px;
    }

    .dashboard-stat small{
        font-size:10px;
    }

    .dashboard-columns{
        grid-template-columns:1fr;
    }

    .dashboard-columns > .dashboard-panel:last-child{
        grid-column:auto;
    }

    .payment-dashboard{
        flex-direction:column;
    }

    .quick-actions{
        grid-template-columns:1fr 1fr;
    }

    .community-items{
        grid-template-columns:1fr;
    }

    .dashboard-footer{
        flex-direction:column;
    }
}

/* ==========================================================
   ESTADO DE CUENTA
   ========================================================== */

.account-page{
    width:100%;
    max-width:1500px;
    margin:0 auto;
}

.btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 16px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#fff;
    color:var(--text);
    font-weight:750;
}

.account-identity{
    display:flex;
    align-items:center;
    gap:18px;
    padding:24px;
    margin-bottom:20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:19px;
    box-shadow:var(--shadow);
}

.account-property-icon{
    width:65px;
    height:65px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:17px;
    background:#edf5ff;
    font-size:30px;
    flex-shrink:0;
}

.account-property-info{
    min-width:0;
    flex:1;
}

.account-property-info > span,
.account-alicuota > span{
    display:block;
    font-size:10px;
    font-weight:850;
    letter-spacing:.13em;
    color:var(--primary);
}

.account-property-info h2{
    margin:4px 0;
    font-size:25px;
}

.account-property-info p{
    margin:0;
    color:var(--muted);
}

.account-alicuota{
    padding-left:25px;
    border-left:1px solid var(--border);
    min-width:120px;
}

.account-alicuota strong{
    display:block;
    margin-top:4px;
    font-size:25px;
    color:var(--primary);
}

.account-summary{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:20px;
}

.account-summary > div{
    padding:20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:17px;
    box-shadow:var(--shadow);
}

.account-summary span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:650;
}

.account-summary strong{
    display:block;
    margin-top:7px;
    font-size:25px;
    color:var(--text);
}

.account-summary .summary-paid strong{
    color:#13a968;
}

.account-summary .summary-pending strong{
    color:#e14b4b;
}

.special-account-list{
    display:grid;
    gap:10px;
}

.special-account-item{
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fafcff;
}

.special-account-icon{
    width:43px;
    height:43px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff2df;
    flex-shrink:0;
}

.special-account-info{
    flex:1;
    min-width:0;
}

.special-account-info strong{
    display:block;
    font-size:14px;
}

.special-account-info span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:4px;
}

.special-account-money{
    text-align:right;
}

.special-account-money strong{
    display:block;
    font-size:16px;
}

.special-account-money .status-pill{
    margin-top:5px;
}

.document-list,
.notification-list{
    display:grid;
    gap:9px;
}

.document-item,
.notification-item{
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:13px;
}

.document-icon,
.notification-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf5ff;
    flex-shrink:0;
}

.document-item > div:nth-child(2),
.notification-info{
    flex:1;
    min-width:0;
}

.document-item strong,
.notification-info strong{
    display:block;
    font-size:13px;
}

.document-item small,
.notification-info span{
    display:block;
    color:var(--muted);
    margin-top:4px;
    font-size:11px;
}

.document-item > span{
    color:var(--muted);
    font-size:10px;
}

.contact-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:12px;
}

.contact-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    background:#f8fbff;
    border:1px solid var(--border);
    border-radius:13px;
}

.contact-box > span{
    font-size:22px;
}

.contact-box small{
    display:block;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    font-weight:800;
}

.contact-box strong{
    display:block;
    margin-top:3px;
    font-size:12px;
    word-break:break-word;
}

@media(max-width:1000px){

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

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

@media(max-width:700px){

    .account-identity{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .account-alicuota{
        width:100%;
        border-left:0;
        border-top:1px solid var(--border);
        padding:15px 0 0;
    }

    .account-summary{
        grid-template-columns:
            1fr 1fr;
        gap:10px;
    }

    .account-summary > div{
        padding:15px;
    }

    .account-summary strong{
        font-size:20px;
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

    .special-account-item{
        align-items:flex-start;
    }

    .special-account-money{
        min-width:85px;
    }
}

/* ==========================================================
   ACCESO PORTAL PROPIETARIO
   ========================================================== */

.portal-message{
    margin-bottom:18px;
    padding:14px 17px;
    border-radius:12px;
    font-weight:700;
}

.portal-message.success{
    background:#eaf9f0;
    border:1px solid #bde8cc;
    color:#13733d;
}

.portal-message.error{
    background:#fff0f0;
    border:1px solid #f0c1c1;
    color:#a72e2e;
}

.portal-owner-card{
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px;
    margin-bottom:20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    box-shadow:var(--shadow);
}

.portal-owner-icon{
    width:60px;
    height:60px;
    border-radius:16px;
    background:#edf5ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.portal-owner-card span,
.portal-status-grid span,
.portal-login-preview span{
    display:block;
    color:var(--primary);
    font-size:10px;
    font-weight:850;
    letter-spacing:.12em;
}

.portal-owner-card h2{
    margin:3px 0;
    font-size:22px;
}

.portal-owner-card p{
    margin:0;
    color:var(--muted);
    font-size:12px;
}

.portal-access-form{
    display:block;
}

.form-grid{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:18px;
}

.form-field label{
    display:block;
    margin-bottom:7px;
    font-size:12px;
    font-weight:800;
}

.form-field input{
    width:100%;
    min-height:45px;
    padding:11px 13px;
    border:1px solid var(--border);
    border-radius:11px;
    background:#fff;
    color:var(--text);
    outline:none;
}

.form-field input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(11,94,215,.08);
}

.form-field small{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
}

.portal-active-box{
    margin-top:20px;
    padding:15px;
    border:1px solid var(--border);
    background:#f8fbff;
    border-radius:13px;
}

.portal-active-box label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.portal-active-box input{
    width:18px;
    height:18px;
}

.portal-active-box span{
    display:flex;
    flex-direction:column;
}

.portal-active-box strong{
    font-size:13px;
}

.portal-active-box small{
    margin-top:3px;
    color:var(--muted);
}

.portal-login-preview{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:18px;
}

.portal-login-preview > div{
    padding:16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fafcff;
}

.portal-login-preview strong{
    display:block;
    margin-top:6px;
    font-size:14px;
    word-break:break-word;
}

.portal-save-button{
    margin-top:20px;
}

.portal-status-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:15px;
}

.portal-status-grid > div{
    padding:16px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fafcff;
}

.portal-status-grid strong{
    display:block;
    margin-top:7px;
    font-size:14px;
}

.portal-active{
    color:#149447;
}

.portal-inactive{
    color:#c63838;
}

.portal-actions{
    margin-top:18px;
}

.btn-danger{
    border:0;
    border-radius:10px;
    padding:11px 16px;
    background:#c83d3d;
    color:#fff;
    font-weight:800;
    cursor:pointer;
}

.portal-instructions{
    display:flex;
    gap:15px;
    padding:18px;
    margin-top:20px;
    border:1px solid var(--border);
    border-radius:15px;
    background:#f8fbff;
}

.portal-instruction-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    flex-shrink:0;
}

.portal-instructions strong{
    display:block;
    font-size:14px;
}

.portal-instructions p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:12px;
}

@media(max-width:800px){

    .form-grid,
    .portal-login-preview,
    .portal-status-grid{
        grid-template-columns:1fr;
    }
}