/* =============================================
   COTIZADOR URBAN - Estilos
   ============================================= */

/* ---- Fuente corporativa Neurial Grotesk ----
   Se declaran varios formatos; el navegador usa el primero que soporte.
   woff2 (el mas compatible y liviano) -> woff -> otf (ultimo recurso). */
@font-face{
    font-family:'Neurial Grotesk';
    src:url('fonts/NeurialGrotesk-Regular.woff2') format('woff2'),
        url('fonts/NeurialGrotesk-Regular.woff') format('woff'),
        url('fonts/NeurialGrotesk-Regular.otf') format('opentype');
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Neurial Grotesk';
    src:url('fonts/NeurialGrotesk-Medium.woff2') format('woff2'),
        url('fonts/NeurialGrotesk-Medium.woff') format('woff'),
        url('fonts/NeurialGrotesk-Medium.otf') format('opentype');
    font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Neurial Grotesk';
    src:url('fonts/NeurialGrotesk-Bold.woff2') format('woff2'),
        url('fonts/NeurialGrotesk-Bold.woff') format('woff'),
        url('fonts/NeurialGrotesk-Bold.otf') format('opentype');
    font-weight:700; font-style:normal; font-display:swap;
}

:root{
    /* Paleta corporativa Urban Group (logo morado + celeste) */
    --morado:#6b2fb3;        /* morado principal del logo */
    --morado-osc:#4e2185;    /* morado profundo para fondos/topbar */
    --celeste:#29a9e0;       /* azul celeste del logo */
    --celeste-hover:#4bbdf0; /* hover del celeste */
    /* Alias para conservar los nombres usados en el resto del CSS */
    --azul:#4e2185;          /* barras/encabezados -> morado profundo */
    --azul-claro:#ede4f9;    /* lila muy claro para fondos suaves */
    --naranja:#29a9e0;       /* acento -> celeste del logo */
    --acento:#29a9e0;
    --acento-hover:#4bbdf0;
    --gris:#f1eef7;
    --gris-borde:#dcd7e6;
    --verde:#0b8457;
    --rojo:#c0392b;
    --amarillo:#e0a91b;
    --texto:#241c33;
    --sombra:0 2px 10px rgba(78,33,133,.12);
    --radio:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:'Neurial Grotesk','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    background:#eef1f5;color:var(--texto);line-height:1.4;
}
.muted{color:#7a8798;font-size:.85rem}
.hidden{display:none!important}

/* ---- Topbar ---- */
.topbar{
    background:linear-gradient(100deg,var(--morado-osc) 0%,var(--morado) 55%,var(--celeste) 140%);
    color:#fff;padding:12px 20px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.brand{display:flex;align-items:center;gap:14px}
.logo-box{
    /* Fondo marino fijo: el logo es celeste claro y necesita fondo oscuro para contrastar */
    background:#051230;color:#fff;font-weight:800;font-size:1.25rem;letter-spacing:-1px;
    min-height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    padding:8px 16px;box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* Ancho manda para que el logo "urban GROUP" se muestre completo (no se corte la N) */
.logo-box img{width:150px;height:auto;max-width:100%;object-fit:contain;display:block}
.topbar h1{font-size:1.25rem;font-weight:700}
.topbar .muted{color:#e6dcf5}
.topnav{display:flex;gap:6px}
.topnav a{
    color:#e6dcf5;text-decoration:none;padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:600;
}
.topnav a:hover{background:rgba(255,255,255,.15);color:#fff}
.topnav a.active{background:var(--celeste);color:#fff}

/* ---- Container ---- */
.container{max-width:1100px;margin:20px auto;padding:0 16px}

/* ---- Action bar ---- */
.action-bar{
    display:flex;align-items:center;justify-content:space-between;
    background:#fff;border-radius:var(--radio);padding:12px 18px;box-shadow:var(--sombra);
    margin-bottom:16px;flex-wrap:wrap;gap:10px;position:sticky;top:0;z-index:20;
}
.cot-info{display:flex;align-items:center;gap:10px}
.cot-label{color:#7a8798;font-weight:600}
.cot-num{font-size:1.3rem;font-weight:800;color:var(--naranja);letter-spacing:.5px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---- Botones ---- */
.btn{
    border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;font-weight:700;
    cursor:pointer;transition:filter .15s,transform .05s;color:#fff;
}
.btn:active{transform:translateY(1px)}
.btn:hover{filter:brightness(1.07)}
.btn-primary{background:var(--azul)}
.btn-accent{background:var(--naranja)}
.btn-light{background:#e4e9f0;color:var(--azul)}
.btn-danger{background:var(--rojo)}
.btn-success{background:var(--verde)}
.btn-sm{padding:6px 10px;font-size:.8rem}

/* ---- Cards / secciones ---- */
.card{
    background:#fff;border-radius:var(--radio);padding:18px;box-shadow:var(--sombra);margin-bottom:16px;
}
.card h2{
    font-size:1rem;color:var(--azul);margin-bottom:14px;display:flex;align-items:center;gap:10px;
    border-bottom:2px solid var(--gris);padding-bottom:8px;
}
.card h2 .num{
    background:var(--azul);color:#fff;width:26px;height:26px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;
}

/* ---- Grids y campos ---- */
.grid{display:grid;gap:12px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.field{display:flex;flex-direction:column}
.field.span-2{grid-column:span 2}
.field label{font-size:.78rem;font-weight:600;color:#5a6a7d;margin-bottom:4px}
input,select,textarea{
    border:1px solid var(--gris-borde);border-radius:8px;padding:9px 10px;font-size:.9rem;
    font-family:inherit;background:#fff;width:100%;
}
input:focus,select:focus,textarea:focus{
    outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,59,92,.12);
}
textarea{resize:vertical}

/* ---- Agregar item ---- */
.add-item{display:flex;gap:8px;margin-bottom:14px}
.add-item input{flex:1}

/* ---- Tabla de items ---- */
.tabla-wrap{overflow-x:auto}
.tabla-items{width:100%;border-collapse:collapse;font-size:.85rem;min-width:760px}
.tabla-items th{
    background:var(--azul);color:#fff;padding:8px 6px;text-align:left;font-weight:600;font-size:.78rem;
}
.tabla-items td{padding:4px 6px;border-bottom:1px solid var(--gris-borde)}
.tabla-items input,.tabla-items select{padding:6px;font-size:.85rem}
.tabla-items input.num{text-align:right}
.tabla-items .subtotal-cell{text-align:right;font-weight:700;color:var(--azul)}
.btn-del{
    background:var(--rojo);color:#fff;border:none;border-radius:6px;width:28px;height:28px;
    cursor:pointer;font-weight:700;line-height:1;
}
.tabla-items tr.empty td{text-align:center;color:#9aa7b6;padding:18px;font-style:italic}

/* ---- Totales ---- */
.totales{max-width:380px;margin-left:auto}
.tot-row{display:flex;justify-content:space-between;align-items:center;padding:8px 4px;border-bottom:1px dashed var(--gris-borde)}
.tot-row span{color:#5a6a7d;font-weight:600}
.tot-row b{font-size:1rem}
.tot-row input{width:140px;text-align:right}
.descglobal-ctrl{display:flex;gap:6px;align-items:center}
.descglobal-ctrl select{padding:6px 8px;font-size:.82rem;width:auto}
.descglobal-ctrl input{width:90px;text-align:right}
.tot-row.total{border:none;background:var(--naranja);color:#fff;padding:12px 14px;border-radius:8px;margin-top:8px}
.tot-row.total span,.tot-row.total b{color:#fff;font-size:1.15rem}

/* ---- Toast ---- */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);
    background:var(--azul);color:#fff;padding:14px 22px;border-radius:10px;box-shadow:var(--sombra);
    font-weight:600;z-index:100;transition:transform .3s;max-width:90%;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--verde)}
.toast.err{background:var(--rojo)}
.toast.warn{background:var(--amarillo);color:#3a2f00}

/* ---- Overlay ---- */
.overlay{
    position:fixed;inset:0;background:rgba(20,30,45,.45);display:flex;align-items:center;justify-content:center;z-index:90;
}
.spinner{
    width:46px;height:46px;border:5px solid #fff;border-top-color:var(--naranja);border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Responsive ---- */
@media(max-width:820px){
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .field.span-2{grid-column:span 2}
}
@media(max-width:520px){
    .grid-4{grid-template-columns:1fr}
    .field.span-2{grid-column:span 1}
    .action-bar{position:static}
    .totales{max-width:100%}
}

/* ---- Reportes ---- */
.filtros{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:16px 0}
.stat{background:#fff;border-radius:10px;padding:14px;box-shadow:var(--sombra);text-align:center}
.stat .n{font-size:1.6rem;font-weight:800;color:var(--azul)}
.stat .l{font-size:.75rem;color:#7a8798;text-transform:uppercase;letter-spacing:.5px}
.stat.warn .n{color:var(--amarillo)}
.stat.ok .n{color:var(--verde)}
.stat.err .n{color:var(--rojo)}
.tabla-rep{width:100%;border-collapse:collapse;font-size:.85rem;background:#fff;border-radius:10px;overflow:hidden;box-shadow:var(--sombra)}
.tabla-rep th{background:var(--azul);color:#fff;padding:10px 8px;text-align:left;font-size:.78rem}
.tabla-rep td{padding:8px;border-bottom:1px solid var(--gris-borde)}
.tabla-rep tr:hover{background:#f7f9fc}
/* Columna Nombre de Requerimiento: muestra el texto completo ajustando a
   varias lineas (no se recorta). */
.tabla-rep td.col-req{min-width:150px;max-width:240px;white-space:normal;word-break:break-word;line-height:1.3}
/* La columna de Acciones no debe partirse ni cortarse */
.tabla-rep td.col-acc{white-space:nowrap}
/* Ancho minimo de la tabla de cotizaciones: si no cabe en pantalla, el
   contenedor .tabla-wrap muestra scroll horizontal y los botones quedan
   siempre accesibles (no se cortan). */
#tab-cotizaciones .tabla-rep{min-width:1100px}
.badge{padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;color:#fff;display:inline-block}
.badge.Pendiente{background:var(--amarillo);color:#3a2f00}
.badge.Efectiva{background:var(--verde)}
.badge.No\ efectiva{background:var(--rojo)}
.badge.Facturada{background:var(--azul)}
.badge.vencida{background:#7a2018}

/* Login modal */
.modal{position:fixed;inset:0;background:rgba(20,30,45,.55);display:flex;align-items:center;justify-content:center;z-index:120;padding:16px}
.modal .box{background:#fff;border-radius:12px;padding:26px;width:340px;max-width:92%;box-shadow:var(--sombra)}
.modal h3{color:var(--azul);margin-bottom:14px}

/* Modal de edicion (cliente/producto): cuerpo desplazable + botones fijos */
.modal .box-edit{
    width:520px;max-width:96%;
    display:flex;flex-direction:column;
    max-height:90vh;padding:20px 22px;
}
.modal .box-edit h3{flex:0 0 auto;margin-bottom:12px}
.edit-body{flex:1 1 auto;overflow-y:auto;padding-right:6px;margin-right:-6px}
.edit-actions{
    flex:0 0 auto;display:flex;gap:8px;margin-top:14px;
    padding-top:14px;border-top:1px solid var(--gris-borde);
}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:8px;background:#e4e9f0;color:var(--azul);cursor:pointer;font-weight:600;font-size:.85rem;border:none}
.tab.active{background:var(--azul);color:#fff}
@media(max-width:820px){.filtros{grid-template-columns:repeat(2,1fr)}.stats{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.filtros{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

/* ---- Dashboard: contencion de graficos ---- */
#tab-dashboard canvas{max-height:300px}
#tab-dashboard .grid{margin-bottom:16px}
@media(max-width:820px){
    #tab-dashboard .grid{grid-template-columns:1fr !important}
}

/* =============================================
   PORTADA / PAGINA DE INICIO
   ============================================= */
.portada{
    min-height:100vh;
    background:linear-gradient(135deg,#051230 0%,var(--morado-osc) 55%,var(--morado) 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:40px 20px;gap:34px;
}
.portada-hero{text-align:center;color:#fff;max-width:720px}
.portada-logo{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);
    width:220px;max-width:80%;margin:0 auto 22px;padding:18px 26px;border-radius:16px;
}
.portada-logo img{width:100%;height:auto;display:block}
.portada-hero h1{font-size:2rem;font-weight:800;margin-bottom:8px;letter-spacing:.3px}
.portada-sub{color:#c9d3e6;font-size:.95rem;margin-bottom:14px}
.portada-lema{
    display:inline-block;color:var(--celeste);font-size:.72rem;font-weight:700;
    letter-spacing:3px;border:1px solid rgba(41,169,224,.4);
    padding:6px 16px;border-radius:20px;
}

.portada-cards{
    display:grid;grid-template-columns:repeat(2,minmax(260px,340px));gap:22px;width:100%;
    justify-content:center;
}
.portada-card{
    background:#fff;border-radius:16px;padding:30px 26px;text-decoration:none;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    transition:transform .15s, box-shadow .15s;border-top:4px solid var(--celeste);
}
.portada-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.32)}
.portada-ic{
    width:64px;height:64px;border-radius:16px;background:var(--celeste);
    display:flex;align-items:center;justify-content:center;color:#051230;margin-bottom:6px;
}
.portada-card h2{color:#051230;font-size:1.25rem;font-weight:800}
.portada-card p{color:#5a6a7d;font-size:.9rem;line-height:1.5;flex:1}
.portada-btn{
    margin-top:10px;background:#051230;color:#fff;font-weight:700;font-size:.9rem;
    padding:11px 20px;border-radius:10px;width:100%;text-align:center;
    transition:filter .15s;
}
.portada-btn-2{background:var(--morado)}
.portada-card:hover .portada-btn{filter:brightness(1.15)}

.portada-foot{text-align:center;color:#9fb0cc;font-size:.75rem;line-height:1.7;margin-top:6px}

@media(max-width:680px){
    .portada-cards{grid-template-columns:1fr;max-width:360px}
    .portada-hero h1{font-size:1.6rem}
}