/* ============================================================
   3DMAR — Estilos v3
   Manual de marca: #152664 · #1E3C70 · #FF5B35 · #7E4C67 · #B7705A
   Tipografía: Montserrat (web) / Designer se usa en catálogo público
   ============================================================ */

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

:root {
    --azul:        #152664;
    --azul-osc:    #1E3C70;
    --naranja:     #FF5B35;
    --naranja-osc: #E04520;
    --morado:      #7E4C67;
    --terracota:   #B7705A;
    --neutro:      #F5F5F5;
    --blanco:      #FFFFFF;
    --gris-borde:  #E0E0E0;
    --gris-texto:  #666666;
    --verde:       #2E7D32;
    --verde-bg:    #E8F5E9;
    --rojo:        #C62828;
    --rojo-bg:     #FFEBEE;
    --amarillo-bg: #FFF8E1;
    --radio:       8px;
    --radio-lg:    12px;
    --sombra:      0 1px 3px rgba(0,0,0,0.08);
    --sombra-md:   0 2px 8px rgba(0,0,0,0.12);
}

body { font-family:'Montserrat',sans-serif; background:var(--neutro); color:#1a1a1a; font-size:14px; line-height:1.6; }

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar { background:var(--azul); display:flex; align-items:center; padding:0 16px; height:52px; gap:16px; position:sticky; top:0; z-index:100; box-shadow:var(--sombra-md); overflow:visible; }
.nav-brand { font-size:20px; font-weight:700; letter-spacing:-0.5px; flex-shrink:0; }
.brand-3d  { color:var(--naranja); }
.brand-mar { color:var(--blanco); }
.nav-links { display:flex; list-style:none; gap:2px; flex:1; overflow:visible; }
.nav-links a { color:rgba(255,255,255,0.75); text-decoration:none; padding:5px 10px; border-radius:var(--radio); font-size:12px; font-weight:500; white-space:nowrap; transition:all .15s; }
.nav-links a:hover, .nav-links a.active { background:rgba(255,255,255,0.12); color:var(--blanco); }
.nav-links a.active { background:var(--naranja); }
.nav-user { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,0.75); font-size:12px; flex-shrink:0; }
.badge-operario { background:rgba(126,76,103,0.4); padding:2px 8px; border-radius:10px; }
.btn-logout { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.2); padding:4px 10px; border-radius:var(--radio); text-decoration:none; font-size:11px; transition:all .15s; }
.btn-logout:hover { background:rgba(255,255,255,0.2); }

/* ── CONTENIDO ──────────────────────────────────────────── */
.contenido { max-width:1400px; margin:0 auto; padding:20px; }

/* ── PAGE HEADER ────────────────────────────────────────── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.page-header h1 { font-size:22px; font-weight:700; color:var(--azul); }
.page-header p  { color:var(--gris-texto); font-size:13px; margin-top:2px; }

/* ── CARDS ──────────────────────────────────────────────── */
.card { background:var(--blanco); border-radius:var(--radio-lg); border:1px solid var(--gris-borde); padding:20px; box-shadow:var(--sombra); }
.card-title { font-size:14px; font-weight:600; color:var(--azul); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--gris-borde); }

/* ── KPIs ───────────────────────────────────────────────── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; }
.kpi-card { background:var(--blanco); border-radius:var(--radio-lg); border:1px solid var(--gris-borde); padding:14px 18px; box-shadow:var(--sombra); }
.kpi-label { font-size:11px; font-weight:600; color:var(--gris-texto); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.kpi-valor { font-size:22px; font-weight:700; color:var(--azul); line-height:1; }
.kpi-sub   { font-size:11px; color:var(--gris-texto); margin-top:4px; }
.kpi-card.verde   .kpi-valor { color:var(--verde); }
.kpi-card.naranja .kpi-valor { color:var(--naranja-osc); }
.kpi-card.rojo    .kpi-valor { color:var(--rojo); }
.kpi-card.morado  .kpi-valor { color:var(--morado); }

/* ── BOTONES ────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radio); font-family:'Montserrat',sans-serif; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; border:none; transition:all .15s; }
.btn-primary   { background:var(--naranja); color:var(--blanco); }
.btn-primary:hover { background:var(--naranja-osc); }
.btn-secondary { background:var(--blanco); color:var(--azul); border:1px solid var(--gris-borde); }
.btn-secondary:hover { background:var(--neutro); }
.btn-azul      { background:var(--azul); color:var(--blanco); }
.btn-azul:hover{ background:var(--azul-osc); }
.btn-danger    { background:var(--rojo); color:var(--blanco); }
.btn-sm        { padding:4px 10px; font-size:11px; }
.btn-lg        { padding:11px 22px; font-size:14px; }

/* ── FORMULARIOS ────────────────────────────────────────── */
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:11px; font-weight:600; color:var(--azul); margin-bottom:5px; text-transform:uppercase; letter-spacing:.3px; }
.form-control { width:100%; padding:8px 11px; border:1px solid var(--gris-borde); border-radius:var(--radio); font-family:'Montserrat',sans-serif; font-size:13px; background:var(--blanco); transition:border-color .15s; color:#1a1a1a; }
.form-control:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(21,38,100,.08); }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }

/* ── TABLA ──────────────────────────────────────────────── */
.tabla-wrap { overflow-x:auto; border-radius:var(--radio-lg); border:1px solid var(--gris-borde); }
table { width:100%; border-collapse:collapse; font-size:13px; background:var(--blanco); }
thead th { background:var(--azul); color:var(--blanco); padding:9px 12px; text-align:left; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
tbody tr { border-bottom:1px solid var(--gris-borde); }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(21,38,100,.03); }
tbody td { padding:9px 12px; vertical-align:middle; }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.badge-nuevo       { background:#E3F2FD; color:#1565C0; }
.badge-produccion  { background:var(--amarillo-bg); color:#E65100; }
.badge-listo       { background:var(--verde-bg); color:var(--verde); }
.badge-entregado   { background:#F3E5F5; color:#6A1B9A; }
.badge-cancelado   { background:var(--rojo-bg); color:var(--rojo); }

/* ── KANBAN ─────────────────────────────────────────────── */
.kanban-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
.kanban-col  { background:var(--neutro); border-radius:var(--radio-lg); padding:10px; border:1px solid var(--gris-borde); }
.kanban-col-header { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:6px 8px; border-radius:var(--radio); margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.kanban-col-header .count { background:rgba(0,0,0,.1); padding:2px 6px; border-radius:10px; font-size:11px; }
.col-nuevo      .kanban-col-header { background:#E3F2FD; color:#1565C0; }
.col-produccion .kanban-col-header { background:var(--amarillo-bg); color:#E65100; }
.col-listo      .kanban-col-header { background:var(--verde-bg); color:var(--verde); }
.col-entregado  .kanban-col-header { background:#F3E5F5; color:#6A1B9A; }
.kanban-card { background:var(--blanco); border-radius:var(--radio); border:1px solid var(--gris-borde); padding:10px; margin-bottom:8px; box-shadow:var(--sombra); cursor:pointer; transition:box-shadow .15s,transform .1s; }
.kanban-card:hover { box-shadow:var(--sombra-md); transform:translateY(-1px); }
.kanban-card.urgente { border-left:3px solid var(--rojo); }

/* ── ALERTAS ────────────────────────────────────────────── */
.alert { padding:11px 14px; border-radius:var(--radio); margin-bottom:14px; font-size:13px; font-weight:500; }
.alert-success { background:var(--verde-bg); color:var(--verde); border:1px solid #A5D6A7; }
.alert-error   { background:var(--rojo-bg);  color:var(--rojo);  border:1px solid #EF9A9A; }
.alert-info    { background:#E3F2FD; color:#1565C0; border:1px solid #90CAF9; }
.alert-warning { background:var(--amarillo-bg); color:#E65100; border:1px solid #FFCC80; }

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; align-items:center; justify-content:center; }
.modal-box { background:var(--blanco); border-radius:var(--radio-lg); padding:26px; width:100%; max-width:500px; margin:0 16px; max-height:90vh; overflow-y:auto; }
.modal-title { font-size:17px; font-weight:700; color:var(--azul); margin-bottom:18px; }

/* ── LOGIN ──────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--azul); }
.login-card { background:var(--blanco); border-radius:var(--radio-lg); padding:36px; width:100%; max-width:360px; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo .brand { font-size:34px; font-weight:700; letter-spacing:-1px; }
.login-logo .tagline { font-size:11px; color:var(--gris-texto); margin-top:4px; }

/* ── INVENTARIO ALERTAS ─────────────────────────────────── */
.stock-critico  { background:var(--rojo-bg);    border-left:4px solid var(--rojo);    border-radius:0 var(--radio) var(--radio) 0; }
.stock-bajo     { background:var(--amarillo-bg); border-left:4px solid #F57F17;       border-radius:0 var(--radio) var(--radio) 0; }
.stock-ok       { background:var(--verde-bg);    border-left:4px solid var(--verde);  border-radius:0 var(--radio) var(--radio) 0; }

/* ── CRM ALERTAS ────────────────────────────────────────── */
.crm-urgente   { border-left:4px solid var(--rojo); }
.crm-pronto    { border-left:4px solid var(--naranja); }
.crm-ok        { border-left:4px solid var(--verde); }

/* ── FOOTER ─────────────────────────────────────────────── */
.footer { text-align:center; padding:14px; color:var(--gris-texto); font-size:11px; border-top:1px solid var(--gris-borde); margin-top:32px; }

/* ── UTILIDADES ─────────────────────────────────────────── */
.text-right   { text-align:right; }
.text-center  { text-align:center; }
.text-verde   { color:var(--verde); font-weight:600; }
.text-rojo    { color:var(--rojo);  font-weight:600; }
.text-naranja { color:var(--naranja-osc); font-weight:600; }
.text-muted   { color:var(--gris-texto); }
.fw-bold      { font-weight:700; }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-16 { margin-bottom:16px; }
.flex         { display:flex; }
.flex-center  { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.gap-8  { gap:8px; }
.gap-12 { gap:12px; }

@media(max-width:900px) {
    .kanban-grid { grid-template-columns:1fr 1fr; }
    .nav-links a { font-size:11px; padding:4px 7px; }
}
@media(max-width:600px) {
    .kanban-grid { grid-template-columns:1fr; }
    .kpi-grid    { grid-template-columns:1fr 1fr; }
    .contenido   { padding:12px; }
}

/* ── DROPDOWN MENU ──────────────────────────────────── */
.nav-dropdown { position: relative; }
.nav-dropdown > a { cursor: pointer; }
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--azul-osc);
    border-radius: 0 0 var(--radio) var(--radio);
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    z-index: 200;
    list-style: none;
    padding: 4px 0;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu li a {
    display: block;
    padding: 9px 16px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: background .1s;
}
.dropdown-menu li a:hover { background: rgba(255,255,255,.1); color: white; }
.dropdown-menu li:first-child a { border-radius: var(--radio) var(--radio) 0 0; }
.dropdown-menu li:last-child  a { border-radius: 0 0 var(--radio) var(--radio); }