/* ──────────────────────────────────────────────
   INTRANET XNLOXONE · ESTIL GLOBAL
   ────────────────────────────────────────────── */

:root{
    --intra-bg: #050608;
    --intra-bg-soft: #111319;
    --intra-bg-softer: #181b23;
    --intra-border: #262937;
    --intra-border-soft: #2f3342;
    --intra-text: #f3f3f5;
    --intra-text-muted: #a5a6b5;
    --intra-accent: #ff750f;
    --intra-accent-soft: rgba(255,117,15,0.16);
    --intra-danger: #f44747;
    --intra-success: #3fbf7f;
    --intra-radius-lg: 18px;
    --intra-radius-xl: 24px;
    --intra-radius-pill: 999px;
    --intra-shadow-soft: 0 18px 40px rgba(0,0,0,0.40);
    --intra-shadow-card: 0 18px 32px rgba(0,0,0,0.45);
    --intra-font-sans: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Body / layout base */
.intranet-body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 0% 0%, rgba(255,117,15,0.16) 0, transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255,117,15,0.10) 0, transparent 55%),
        #050608;
    color:var(--intra-text);
    font-family:var(--intra-font-sans);
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
}

/* Header */
.intranet-header{
    padding:1rem 1.75rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.04);
    background:linear-gradient(90deg, #050608 0, #050608 50%, #111117 100%);
    position:relative;
    z-index:10;
}

.intranet-header-left{
    display:flex;
    align-items:center;
    gap:0.9rem;
}

.intranet-logo{
    width:40px;
    height:40px;
    border-radius:14px;
    background:radial-gradient(circle at 30% 10%, #ffffff 0, #f2f2f2 18%, #f3e0c9 40%, #f3d6b1 55%, #f3b979 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 0 1px rgba(0,0,0,0.25), 0 16px 32px rgba(0,0,0,0.45);
    overflow:hidden;
}

.intranet-logo img{
    max-width:95%;
    max-height:95%;
    display:block;
}

.intranet-title-block{
    display:flex;
    flex-direction:column;
}

.intranet-title{
    font-size:1.05rem;
    font-weight:600;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.intranet-subtitle{
    font-size:0.8rem;
    color:var(--intra-text-muted);
}

.intranet-header-right{
    display:flex;
    align-items:center;
    gap:0.75rem;
}

.intranet-env-pill{
    padding:0.35rem 0.9rem;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.25);
    font-size:0.74rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--intra-text-muted);
}

/* Logout button (si la vista l'utilitza) */
.intra-logout-form{
    margin:0;
}

.intra-logout-btn{
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.20);
    background:transparent;
    color:var(--intra-text);
    font-size:0.78rem;
    padding:0.35rem 0.9rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.intra-logout-btn:hover{
    background:rgba(255,255,255,0.06);
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(0,0,0,0.45);
}

/* Main + contenidor genèric */
.intranet-main{
    flex:1;
    padding:2rem 1.5rem;
    display:flex;
    justify-content:center;
    align-items:flex-start;
}

.intra-page,
.intra-auth-page{
    width:100%;
    max-width:1080px;
    margin:0 auto;
    position:relative;
}

/* Targetes */
.intra-card{
    border-radius:var(--intra-radius-xl);
    background:radial-gradient(circle at 0 0, rgba(255,255,255,0.06) 0, transparent 52%), #111319;
    border:1px solid var(--intra-border);
    box-shadow:var(--intra-shadow-card);
    padding:1.75rem 1.75rem 1.5rem;
    position:relative;
    overflow:hidden;
}

.intra-card::before{
    content:"";
    position:absolute;
    inset:-120px;
    background:radial-gradient(circle at 0 0, rgba(255,117,15,0.10) 0, transparent 55%);
    opacity:0.4;
    pointer-events:none;
}

/* Títols / subtítols */
.intra-card-title{
    font-size:1.3rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:0 0 0.15rem;
}

.intra-card-subtitle{
    margin:0 0 1.4rem;
    font-size:0.9rem;
    color:var(--intra-text-muted);
}

/* Encapçalament de pàgina generica */
.intra-page-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1.2rem;
    margin-bottom:1.25rem;
}

.intra-page-title{
    font-size:1.4rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    margin:0 0 0.2rem;
}

.intra-page-subtitle{
    margin:0;
    font-size:0.9rem;
    color:var(--intra-text-muted);
}

.intra-page-actions{
    display:flex;
    align-items:center;
    gap:0.6rem;
}

/* Formularis */
.intra-form{
    display:flex;
    flex-direction:column;
    gap:0.9rem;
    position:relative;
    z-index:1;
}

.intra-form-row{
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}

.intra-label{
    font-size:0.82rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--intra-text-muted);
}

.intra-input,
.intra-select{
    border-radius:11px;
    border:1px solid var(--intra-border-soft);
    background:rgba(8,9,14,0.92);
    color:var(--intra-text);
    padding:0.55rem 0.75rem;
    font-size:0.9rem;
    outline:none;
    transition:border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.intra-input::placeholder{
    color:rgba(165,166,181,0.6);
}

.intra-input:focus,
.intra-select:focus{
    border-color:var(--intra-accent);
    box-shadow:0 0 0 1px rgba(255,117,15,0.55);
    background:rgba(5,6,8,0.96);
}

.intra-help{
    font-size:0.78rem;
    color:var(--intra-text-muted);
}

/* Checkbox fila */
.intra-checkbox-row{
    display:flex;
    align-items:center;
    gap:0.55rem;
    margin-top:0.2rem;
}

.intra-checkbox-row input[type="checkbox"]{
    width:16px;
    height:16px;
}

/* Footer formulari */
.intra-form-footer{
    margin-top:0.6rem;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:0.6rem;
}

/* Botons */
.intra-btn-primary,
.intra-btn-secondary,
.intra-btn-ghost{
    border-radius:var(--intra-radius-pill);
    border:1px solid transparent;
    font-size:0.86rem;
    padding:0.48rem 1.15rem;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    text-decoration:none;
    letter-spacing:0.07em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.intra-btn-primary{
    background:linear-gradient(135deg, #ff7f1f 0, #ff4d0a 100%);
    border-color:rgba(0,0,0,0.6);
    color:#1a0f05;
    font-weight:600;
    box-shadow:0 10px 24px rgba(0,0,0,0.55);
}

.intra-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 34px rgba(0,0,0,0.7);
}

.intra-btn-secondary{
    background:rgba(8,10,16,0.9);
    border-color:rgba(255,255,255,0.14);
    color:var(--intra-text);
}

.intra-btn-secondary:hover{
    background:rgba(255,255,255,0.06);
}

.intra-btn-ghost{
    background:transparent;
    border-color:transparent;
    color:var(--intra-text-muted);
    padding-inline:0;
}

.intra-btn-ghost:hover{
    color:var(--intra-text);
}

/* Enllaç "Tornar a l'inici" */
.intra-back-link{
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    font-size:0.82rem;
    text-decoration:none;
    color:var(--intra-text-muted);
    margin-bottom:0.7rem;
}

.intra-back-link:hover{
    color:var(--intra-text);
}

/* Alerts */
.intra-alert{
    border-radius:14px;
    padding:0.65rem 0.85rem;
    font-size:0.85rem;
    margin-bottom:0.8rem;
}

.intra-alert ul{
    margin:0.35rem 0 0.1rem 1.2rem;
    padding:0;
}

.intra-alert-error{
    background:rgba(244,71,71,0.12);
    border:1px solid rgba(244,71,71,0.5);
    color:#ffd7d7;
}

.intra-alert-info{
    background:rgba(64,158,255,0.12);
    border:1px solid rgba(64,158,255,0.45);
    color:#d2e5ff;
}

.intra-alert-success{
    background:rgba(63,191,127,0.12);
    border:1px solid rgba(63,191,127,0.45);
    color:#d5f3e3;
}

/* Taules */
.intra-table-wrapper{
    border-radius:16px;
    border:1px solid var(--intra-border);
    overflow:hidden;
    background:rgba(8,9,14,0.92);
}

.intra-table{
    width:100%;
    border-collapse:collapse;
    font-size:0.86rem;
}

.intra-table thead{
    background:linear-gradient(90deg, rgba(255,117,15,0.14), transparent);
}

.intra-table th,
.intra-table td{
    padding:0.55rem 0.8rem;
    border-bottom:1px solid rgba(255,255,255,0.04);
}

.intra-table th{
    text-align:left;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--intra-text-muted);
}

.intra-table tbody tr:nth-child(2n){
    background:rgba(255,255,255,0.01);
}

/* Badge rols */
.intra-badge{
    display:inline-flex;
    align-items:center;
    padding:0.12rem 0.6rem;
    border-radius:999px;
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.intra-badge-admin{
    background:rgba(255,117,15,0.12);
    border:1px solid rgba(255,117,15,0.75);
    color:var(--intra-accent);
}

.intra-badge-user{
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.14);
    color:var(--intra-text-muted);
}

/* Enllaços taula */
.intra-link,
.intra-link-danger{
    background:none;
    border:none;
    padding:0;
    font-size:0.84rem;
    cursor:pointer;
    color:#9fb6ff;
    text-decoration:none;
}

.intra-link:hover{
    text-decoration:underline;
}

.intra-link-danger{
    color:#ff8a8a;
}

/* Formulari inline (eliminar usuari) */
.intra-inline-form{
    display:inline;
}

/* Pagina login */
.intra-auth-page{
    max-width:460px;
    margin:2.4rem auto 0;
}

/* Text buit */
.intra-empty{
    margin:0;
    font-size:0.88rem;
    color:var(--intra-text-muted);
}

/* Footer */
.intranet-footer{
    padding:0.8rem 1.6rem 1.3rem;
    border-top:1px solid rgba(255,255,255,0.05);
    font-size:0.78rem;
    color:var(--intra-text-muted);
    text-align:right;
}

/* Responsiu */
@media (max-width: 768px){
    .intranet-main{
        padding:1.5rem 1.1rem;
    }
    .intra-page,
    .intra-auth-page{
        max-width:100%;
    }
    .intra-page-header{
        flex-direction:column;
        align-items:flex-start;
    }
    .intra-form-footer{
        justify-content:flex-start;
    }
}