/* =====================================================================
   AGADEAN — Design System v2 (odoo_new)
   Paleta: naranja corporativo #EC7C26 · Montserrat · fullscreen sin scroll
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --naranja:        #EC7C26;
    --naranja-hover:  #d96b20;
    --naranja-claro:  #f8a65e;
    --ambar:          #f59e0b;
    --tinta:          #1e293b;
    --tinta-suave:    #64748b;
    --crema:          #faf7f4;
    --blanco:         #ffffff;
    --borde:          #e8e0d8;
    --exito:          #10b981;
    --peligro:        #ef4444;
    --aviso:          #f59e0b;
    --info:           #3b82f6;
    --oscuro-1:       #17100a;
    --oscuro-2:       #241407;
    --radio:          16px;
    --radio-sm:       10px;
    --sombra:         0 8px 30px rgba(30, 20, 10, .08);
    --sombra-hover:   0 14px 40px rgba(236, 124, 38, .18);
    --transicion:     all .25s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    color: var(--tinta);
    background: var(--crema);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Escena oscura animada (login / overlays) ---------- */
.escena {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(1200px 800px at 85% -10%, rgba(236, 124, 38, .28), transparent 60%),
        radial-gradient(900px 700px at -10% 110%, rgba(245, 158, 11, .18), transparent 55%),
        linear-gradient(150deg, var(--oscuro-1) 0%, var(--oscuro-2) 55%, #1a0f05 100%);
}
.escena::after {           /* grano sutil */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    animation: blob-flotar 16s ease-in-out infinite;
}
.blob-1 { width: 480px; height: 480px; top: -140px; right: -100px; background: radial-gradient(circle, #EC7C26, transparent 70%); }
.blob-2 { width: 380px; height: 380px; bottom: -120px; left: -80px;  background: radial-gradient(circle, #f59e0b, transparent 70%); animation-delay: -5s; animation-duration: 20s; }
.blob-3 { width: 260px; height: 260px; top: 45%; left: 55%; background: radial-gradient(circle, #ff9d4d, transparent 70%); animation-delay: -10s; animation-duration: 24s; opacity: .35; }

@keyframes blob-flotar {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-40px, 30px) scale(1.08); }
    66%      { transform: translate(30px, -25px) scale(.94); }
}

/* Partículas ascendentes (tamaño y deriva variables por elemento) */
.particula {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 190, 130, .95), rgba(236, 124, 38, .55) 60%, rgba(236, 124, 38, .25));
    animation: particula-subir linear infinite;
    will-change: transform, opacity;
}
.particula.grande {
    filter: blur(1.5px);
    background: radial-gradient(circle at 35% 35%, rgba(255, 200, 150, .7), rgba(236, 124, 38, .35) 60%, rgba(236, 124, 38, .12));
}
.particula.gigante {
    filter: blur(3px);
    background: radial-gradient(circle at 35% 35%, rgba(255, 200, 150, .5), rgba(236, 124, 38, .22) 60%, transparent);
}
@keyframes particula-subir {
    0%   { transform: translate(0, 0) scale(1);                          opacity: 0; }
    8%   { opacity: var(--op, .8); }
    50%  { transform: translate(calc(var(--dx, 0px) * .6), -55vh) scale(.85); }
    92%  { opacity: calc(var(--op, .8) * .5); }
    100% { transform: translate(var(--dx, 0px), -112vh) scale(.35);      opacity: 0; }
}

/* ---------- Animaciones de entrada ---------- */
@keyframes aparecer      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-izq  { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-zoom { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes brillo-barrido { 0% { left: -80%; } 100% { left: 130%; } }
@keyframes latido        { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes glow-pulso {
    0%, 100% { box-shadow: 0 0 0 0 rgba(236, 124, 38, .45); }
    50%      { box-shadow: 0 0 0 12px rgba(236, 124, 38, 0); }
}

.animar        { opacity: 0; animation: aparecer .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.animar-zoom   { opacity: 0; animation: aparecer-zoom .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.animar-izq    { opacity: 0; animation: aparecer-izq .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.d-1 { animation-delay: .08s; } .d-2 { animation-delay: .16s; } .d-3 { animation-delay: .24s; }
.d-4 { animation-delay: .32s; } .d-5 { animation-delay: .40s; } .d-6 { animation-delay: .48s; }
.d-7 { animation-delay: .56s; } .d-8 { animation-delay: .64s; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 12px;
    padding: 14px 26px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transicion);
}
.btn-primario { background: linear-gradient(135deg, var(--naranja), var(--ambar)); color: #fff; }
.btn-primario:hover { transform: translateY(-2px); box-shadow: var(--sombra-hover); }
.btn-primario:active { transform: translateY(0); }
.btn-primario::after {         /* barrido de brillo */
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
}
.btn-primario:hover::after { animation: brillo-barrido .8s ease; }
.btn-fantasma { background: transparent; color: var(--tinta-suave); border: 2px solid var(--borde); }
.btn-fantasma:hover { border-color: var(--naranja); color: var(--naranja); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Campos ---------- */
.campo label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--tinta-suave);
    margin-bottom: 7px;
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="date"],
.campo select,
.campo textarea {
    width: 100%;
    padding: 13px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: var(--tinta);
    background: var(--blanco);
    border: 2px solid var(--borde);
    border-radius: var(--radio-sm);
    transition: var(--transicion);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--naranja);
    box-shadow: 0 0 0 4px rgba(236, 124, 38, .14);
}
.campo textarea { resize: none; line-height: 1.5; }

/* ---------- Chips seleccionables (iconos) ---------- */
.chips { display: grid; gap: 8px; }
.chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background: var(--blanco);
    border: 2px solid var(--borde);
    border-radius: var(--radio-sm);
    cursor: pointer;
    text-align: center;
    transition: var(--transicion);
    user-select: none;
}
.chip i { font-size: 19px; color: var(--tinta-suave); transition: var(--transicion); }
.chip span { font-size: 10.5px; font-weight: 600; color: var(--tinta-suave); line-height: 1.2; }
.chip:hover { border-color: var(--naranja-claro); transform: translateY(-2px); }
.chip.activo {
    border-color: var(--naranja);
    background: linear-gradient(160deg, #fff7f0, #ffefdd);
    box-shadow: 0 6px 16px rgba(236, 124, 38, .2);
}
.chip.activo i, .chip.activo span { color: var(--naranja); }

/* ---------- Tarjetas ---------- */
.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
}
.tarjeta-hover { transition: var(--transicion); }
.tarjeta-hover:hover { transform: translateY(-4px); box-shadow: var(--sombra-hover); }

/* ---------- Badges de estado ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}
.badge-abierta  { background: rgba(239, 68, 68, .1);  color: var(--peligro); }
.badge-proceso  { background: rgba(245, 158, 11, .12); color: var(--aviso); }
.badge-cerrada  { background: rgba(16, 185, 129, .12); color: var(--exito); }

/* ---------- Shell de la aplicación (sidebar + main) ---------- */
.shell {
    display: grid;
    grid-template-columns: 250px 1fr;
    height: 100dvh;
    overflow: hidden;
    background: var(--crema);
}
.lateral {
    background: linear-gradient(180deg, var(--oscuro-1), var(--oscuro-2));
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    position: relative;
    overflow: hidden;
}
.lateral::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 124, 38, .25), transparent 70%);
    filter: blur(30px);
}
.lateral-logo {
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 28px;
    text-align: center;
    position: relative;
    z-index: 1;
}
.lateral-logo img { max-width: 130px; display: block; margin: 0 auto; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    margin-bottom: 5px;
    border-radius: 11px;
    color: rgba(255, 255, 255, .65);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: var(--transicion);
    position: relative;
    z-index: 1;
}
.nav-item i { width: 20px; text-align: center; font-size: 15px; }
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(4px); }
.nav-item.activo {
    background: linear-gradient(135deg, rgba(236, 124, 38, .95), rgba(245, 158, 11, .9));
    color: #fff;
    box-shadow: 0 6px 18px rgba(236, 124, 38, .35);
}
.nav-item .pronto {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    background: rgba(255, 255, 255, .14);
    padding: 3px 8px;
    border-radius: 999px;
}
/* Aviso de comunicaciones sin leer: contador + latido para que se vea */
.nav-item.con-avisos { color: #fff; animation: aviso-latido 2.2s ease-in-out infinite; }
.nav-item.con-avisos i { color: var(--ambar); }
.nav-avisos {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ef4444, #f87171);
    color: #fff;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 2px 8px rgba(239, 68, 68, .5);
}
@keyframes aviso-latido {
    0%, 100% { background: rgba(255, 255, 255, .07); }
    50%      { background: rgba(239, 68, 68, .22); }
}
/* Respeta a quien pide menos animación en el sistema */
@media (prefers-reduced-motion: reduce) {
    .nav-item.con-avisos { animation: none; background: rgba(239, 68, 68, .18); }
}

/* Separador grabado en relieve: sobre fondo oscuro, sombra arriba y luz abajo */
.nav-separador {
    height: 0;
    margin: 16px 8px 14px;
    border-top: 1px solid rgba(0, 0, 0, .5);
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    position: relative;
    z-index: 1;
}
.lateral-pie { margin-top: auto; position: relative; z-index: 1; }
.usuario-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    margin-bottom: 10px;
}
.usuario-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--naranja), var(--ambar));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 14px;
    flex-shrink: 0;
}
.usuario-chip .nombre { color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.usuario-chip .rol    { color: rgba(255,255,255,.5); font-size: 10.5px; }

.principal {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 34px;
}

/* ---------- Scrollbars finos ---------- */
.principal::-webkit-scrollbar, .scroll-fino::-webkit-scrollbar { width: 6px; height: 6px; }
.principal::-webkit-scrollbar-thumb, .scroll-fino::-webkit-scrollbar-thumb { background: rgba(236, 124, 38, .4); border-radius: 3px; }
.principal::-webkit-scrollbar-track, .scroll-fino::-webkit-scrollbar-track { background: transparent; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 26px; right: 26px;
    z-index: 3000;
    background: var(--tinta);
    color: #fff;
    padding: 15px 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
    animation: aparecer .35s ease;
}
.toast.error i { color: var(--peligro); }
.toast.exito i { color: var(--exito); }

/* ---------- Overlay de éxito ---------- */
.overlay-exito {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(23, 16, 10, .92);
    backdrop-filter: blur(8px);
    color: #fff;
    text-align: center;
    animation: aparecer .3s ease;
}
.check-circulo {
    width: 110px; height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--exito), #34d399);
    display: flex; align-items: center; justify-content: center;
    font-size: 52px;
    animation: aparecer-zoom .5s cubic-bezier(.34, 1.56, .64, 1), latido 2s 1s infinite;
    box-shadow: 0 0 60px rgba(16, 185, 129, .5);
}

/* ---------- Responsive shell ---------- */
@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; }
    .lateral { flex-direction: row; align-items: center; gap: 6px; padding: 10px 12px; overflow-x: auto; }
    .lateral-logo { margin: 0 10px 0 0; padding: 6px 10px; }
    .lateral-logo img { max-width: 84px; }
    .nav-item { margin: 0; padding: 10px 12px; white-space: nowrap; }
    .nav-item span:not(.pronto) { display: none; }
    /* En horizontal el relieve pasa a ser vertical */
    .nav-separador {
        flex: 0 0 auto; height: 24px; width: 0; margin: 0 7px;
        border-top: 0; border-bottom: 0;
        border-left: 1px solid rgba(0, 0, 0, .5);
        border-right: 1px solid rgba(255, 255, 255, .13);
    }
    .lateral-pie { margin: 0 0 0 auto; display: flex; align-items: center; }
    .usuario-chip { margin: 0; padding: 6px; background: none; }
    .usuario-chip .nombre, .usuario-chip .rol { display: none; }
    .principal { padding: 18px; }
}