/* MANUFACTURAS DILAN — Estilos del sistema (login + paneles) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Expanded:wght@700;800;900&display=swap');

:root{
  --negro:#0b0b0c;
  --negro-2:#131315;
  --negro-3:#1b1b1e;
  --rojo:#e11d2e;
  --rojo-osc:#c01324;
  --blanco:#f7f6f3;
  --gris:#8d8d92;
  --linea:rgba(247,246,243,.1);
  --verde:#22c55e;
  --ambar:#f59e0b;
  --font-d:"Archivo Expanded","Archivo",system-ui,sans-serif;
  --font-t:"Archivo",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--negro);color:var(--blanco);font-family:var(--font-t);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--rojo);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-d);text-transform:uppercase;letter-spacing:-.01em}
code{background:var(--negro-3);padding:2px 8px;font-size:.85em;border:1px solid var(--linea)}

/* ===== Pantallas centradas (login / instalador) ===== */
.pantalla-centrada{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px;
  background-image:
    linear-gradient(rgba(247,246,243,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(247,246,243,.03) 1px,transparent 1px);
  background-size:72px 72px}
.tarjeta-auth{width:100%;max-width:440px;background:var(--negro-2);border:1px solid var(--linea);padding:44px 40px;border-top:3px solid var(--rojo)}
.tarjeta-auth h1{font-size:1.4rem;font-weight:800;margin-bottom:8px}
.auth-sub{color:var(--gris);font-size:.92rem;margin-bottom:24px}
.auth-marca{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.auth-marca img{height:38px;width:auto}
.auth-marca span{font-family:var(--font-d);font-weight:800;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.auth-marca em{color:var(--rojo);font-style:normal}
.auth-volver{display:block;margin-top:22px;color:var(--gris);font-size:.85rem;transition:color .2s}
.auth-volver:hover{color:var(--blanco)}

/* ===== Formularios ===== */
label{display:block;margin-bottom:16px;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
input,select,textarea{width:100%;margin-top:6px;padding:12px 14px;background:var(--negro);border:1px solid var(--linea);color:var(--blanco);
  font-family:var(--font-t);font-size:.95rem;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rojo)}
.btn{display:inline-block;padding:12px 26px;font-weight:600;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
  border:none;cursor:pointer;transition:.2s;font-family:var(--font-t)}
.btn-rojo{background:var(--rojo);color:#fff}
.btn-rojo:hover{background:var(--rojo-osc)}
.btn-ghost{background:transparent;border:1px solid var(--linea);color:var(--blanco)}
.btn-ghost:hover{border-color:var(--blanco)}
.btn-mini{padding:7px 14px;font-size:.75rem}
.btn-bloque{display:block;width:100%;text-align:center;margin-top:8px}

/* ===== Alertas ===== */
.alerta{padding:14px 16px;margin-bottom:20px;font-size:.9rem;border-left:3px solid}
.alerta p{margin:0}
.alerta p + p{margin-top:6px}
.alerta-error{background:rgba(225,29,46,.08);border-color:var(--rojo)}
.alerta-ok{background:rgba(34,197,94,.08);border-color:var(--verde)}

/* ===== Estructura del panel ===== */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100svh}
.sidebar{background:var(--negro-2);border-right:1px solid var(--linea);padding:28px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100svh}
.sidebar .auth-marca{padding:0 24px;margin-bottom:34px}
.sidebar nav{display:flex;flex-direction:column;flex:1}
.sidebar nav a,.sidebar nav span{padding:12px 24px;font-size:.85rem;font-weight:500;color:var(--gris);border-left:3px solid transparent;transition:.2s}
.sidebar nav a:hover{color:var(--blanco);background:rgba(247,246,243,.03)}
.sidebar nav a.activo{color:var(--blanco);border-left-color:var(--rojo);background:rgba(225,29,46,.07)}
.sidebar nav span.pronto{opacity:.4;cursor:not-allowed}
.sidebar nav span.pronto::after{content:" · pronto";font-size:.7rem;color:var(--rojo)}
.sidebar .pie{padding:20px 24px;border-top:1px solid var(--linea);font-size:.8rem;color:var(--gris)}
.sidebar .pie strong{display:block;color:var(--blanco);font-size:.85rem}
.sidebar .pie a{color:var(--rojo);font-weight:600}

.contenido{padding:40px 44px;max-width:1100px}
.cabecera-pagina{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;flex-wrap:wrap}
.cabecera-pagina h1{font-size:1.5rem;font-weight:800}
.cabecera-pagina h1::after{content:"";display:block;width:36px;height:3px;background:var(--rojo);margin-top:8px}

/* ===== Tarjetas y estadísticas ===== */
.grid-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:36px}
.stat{background:var(--negro-2);border:1px solid var(--linea);padding:22px 24px}
.stat b{font-family:var(--font-d);font-size:1.9rem;font-weight:900;color:var(--blanco);display:block;line-height:1.1}
.stat span{color:var(--gris);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.stat.acento{border-top:3px solid var(--rojo)}

.caja{background:var(--negro-2);border:1px solid var(--linea);padding:28px;margin-bottom:28px}
.caja h2{font-size:1rem;font-weight:800;margin-bottom:18px}
.caja h2::before{content:"— ";color:var(--rojo)}

/* ===== Tablas ===== */
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;padding:10px 14px;color:var(--gris);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--linea)}
.tabla td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:hover td{background:rgba(247,246,243,.02)}
.tabla .acciones{display:flex;gap:8px;flex-wrap:wrap}
.tabla form{display:inline}

/* ===== Badges ===== */
.badge{display:inline-block;padding:3px 10px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid}
.badge-fundador{color:var(--rojo);border-color:rgba(225,29,46,.5);background:rgba(225,29,46,.08)}
.badge-encargado{color:var(--ambar);border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.badge-empleado{color:var(--gris);border-color:var(--linea);background:rgba(247,246,243,.04)}
.badge-verde{color:var(--verde);border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.08)}
.badge-rojo{color:var(--rojo);border-color:rgba(225,29,46,.5);background:rgba(225,29,46,.08)}

/* ===== Formularios en línea (filas de tabla) ===== */
.form-fila{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.form-fila label{margin:0;flex:1;min-width:140px}
.form-fila .btn{height:44px}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:end}
.form-grid .btn{height:44px}

.nota{color:var(--gris);font-size:.83rem;margin-top:10px}
.precio{font-family:var(--font-d);font-weight:700}

/* ===== Barras de progreso y matriz de avance ===== */
.badge-ambar{color:var(--ambar);border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.barra{background:var(--negro-3);height:8px;min-width:110px;position:relative;overflow:hidden}
.barra i{position:absolute;top:0;bottom:0;left:0;background:var(--rojo);transition:width .4s}
.barra.llena i{background:var(--verde)}
.matriz{width:100%;border-collapse:collapse;font-size:.85rem}
.matriz th{padding:8px 10px;color:var(--gris);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--linea);text-align:center}
.matriz th:first-child{text-align:left}
.matriz td{padding:9px 10px;border-bottom:1px solid var(--linea);text-align:center;font-family:var(--font-d);font-weight:700;font-size:.8rem}
.matriz td:first-child{text-align:left;font-family:var(--font-t);font-weight:500}
.celda-cero{color:var(--gris);opacity:.55}
.celda-parcial{color:var(--ambar)}
.celda-ok{color:var(--verde)}
.curva-filas{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.curva-fila{display:flex;gap:10px;align-items:center}
.curva-fila input{margin-top:0}
.curva-fila .btn{height:44px}

/* ===== Gráficas de barras (sin librerías) ===== */
.grafica{display:flex;flex-direction:column;gap:10px}
.gbar{display:grid;grid-template-columns:170px 1fr 130px;gap:12px;align-items:center}
.gbar .gnombre{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbar .gpista{background:var(--negro-3);height:18px;position:relative;overflow:hidden}
.gbar .gpista i{position:absolute;top:0;bottom:0;left:0;background:var(--rojo);transition:width .5s}
.gbar.verde .gpista i{background:var(--verde)}
.gbar .gvalor{font-family:var(--font-d);font-weight:700;font-size:.8rem;text-align:right}
.gbar .gnombre{display:flex;align-items:center;gap:9px}
.gpos{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:800;font-size:.72rem;background:var(--negro-3);color:var(--gris);border-radius:50%}
.gpos.oro{background:#f5c518;color:#111}
.gpos.plata{background:#c9ccd1;color:#111}
.gpos.bronce{background:#cd7f32;color:#111}
.gbar.top .gpista{height:22px}
.gbar.top .gnombre{font-weight:600}
.vgrafica{display:flex;gap:12px;align-items:flex-end;height:170px;padding-top:8px}
.vgrafica .vcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.vgrafica .vcol i{width:100%;max-width:52px;background:var(--rojo);display:block;min-height:2px}
.vgrafica .vcol b{font-size:.75rem;font-family:var(--font-d)}
.vgrafica .vcol span{font-size:.68rem;color:var(--gris);white-space:nowrap}
@media(max-width:720px){.gbar{grid-template-columns:110px 1fr 90px}}

/* ===== Comparativa de operarios ===== */
.orden-tabs{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.orden-tabs .tab{padding:7px 16px;font-size:.8rem;font-weight:600;color:var(--gris);border:1px solid var(--linea);transition:.2s;
  background:transparent;cursor:pointer;font-family:inherit}
.orden-tabs .tab:hover{color:var(--blanco);border-color:var(--blanco)}
.orden-tabs .tab.activo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.comp{display:flex;flex-direction:column}
.comp-cab,.comp-fila{display:grid;grid-template-columns:36px 1.4fr 2fr 2fr;gap:16px;align-items:center}
.comp-cab{padding:0 0 10px;border-bottom:1px solid var(--linea);color:var(--gris);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.comp-fila{padding:12px 0;border-bottom:1px solid var(--linea)}
.comp-fila.top .comp-nombre{font-weight:600}
.comp-pos{flex:none}
.comp-nombre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.92rem}
.comp-metrica{display:flex;align-items:center;gap:12px}
.comp-metrica .barra{flex:1;min-width:60px}
.comp-metrica b{font-family:var(--font-d);font-weight:700;font-size:.82rem;white-space:nowrap;min-width:64px;text-align:right}

@media(max-width:820px){
  .comp-cab{display:none}
  .comp-fila{grid-template-columns:30px 1fr;grid-template-areas:"pos nombre" "met1 met1" "met2 met2";gap:8px 10px;padding:14px 0}
  .comp-pos{grid-area:pos}
  .comp-nombre{grid-area:nombre;font-weight:600}
  .comp-metrica:nth-of-type(1){grid-area:met1}
  .comp-metrica:nth-of-type(2){grid-area:met2}
  .comp-metrica::before{font-size:.7rem;color:var(--gris);text-transform:uppercase;letter-spacing:.06em;min-width:52px}
  .comp-metrica:nth-of-type(1)::before{content:"Pares"}
  .comp-metrica:nth-of-type(2)::before{content:"Dinero"}
}

/* ===== Acordeón de histórico ===== */
details.mes{border:1px solid var(--linea);margin-bottom:10px;background:var(--negro)}
details.mes summary{cursor:pointer;padding:12px 16px;display:flex;align-items:center;gap:10px;list-style:none;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo)}
details.mes summary::-webkit-details-marker{display:none}
details.mes summary::before{content:"+";font-family:var(--font-d);font-size:1rem;color:var(--gris);width:14px}
details.mes[open] summary::before{content:"−"}
details.mes summary .cuantas{margin-left:auto;color:var(--gris);letter-spacing:.04em}
details.mes .cuerpo{padding:0 16px 12px}

/* ===== Barra de filtros ===== */
.filtros{background:var(--negro-3);border:1px solid var(--linea);padding:16px 18px;margin-bottom:20px}
.filtros-fila{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.filtros label{margin:0;min-width:150px}
.filtros .btn{height:44px}
.filtro-activo{margin-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:var(--gris)}
.filtro-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(225,29,46,.1);border:1px solid rgba(225,29,46,.4);
  color:var(--blanco);padding:4px 12px;font-size:.8rem}
.filtro-chip b{color:var(--rojo);font-weight:600}

/* ===== Barra superior móvil + menú hamburguesa ===== */
.topbar{display:none;position:sticky;top:0;z-index:110;align-items:center;gap:14px;
  background:var(--negro-2);border-bottom:1px solid var(--linea);padding:0 14px;height:62px}
.topbar-marca{font-family:var(--font-d);font-weight:800;font-size:1rem;letter-spacing:.05em;text-transform:uppercase}
.topbar-marca em{color:var(--rojo);font-style:normal}
.hamburguesa{width:46px;height:46px;flex:none;display:flex;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:9px}
.hamburguesa span{display:block;height:3px;border-radius:2px;background:var(--blanco);transition:.25s}
.hamburguesa.activa span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamburguesa.activa span:nth-child(2){opacity:0}
.hamburguesa.activa span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* El fondo oscuro NO debe capturar toques mientras está oculto */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s}
.sidebar-backdrop.visible{opacity:1;pointer-events:auto}

/* ===== Responsive ===== */

/* Tablet: sidebar más angosta */
@media(max-width:1024px){
  .app{grid-template-columns:200px 1fr}
  .contenido{padding:32px 28px}
}

/* Tablet y celular: sidebar se convierte en menú deslizante */
@media(max-width:820px){
  .topbar{display:flex}
  .app{display:block}
  /* El menú arranca debajo de la barra superior para no tapar el botón hamburguesa */
  .sidebar{position:fixed;top:62px;left:0;bottom:0;width:280px;max-width:84vw;height:calc(100svh - 62px);z-index:100;
    transform:translateX(-100%);transition:transform .28s ease;border-right:1px solid var(--linea);overflow-y:auto}
  .sidebar.abierto{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .sidebar .auth-marca{display:none}          /* la marca ya está en la barra superior */
  .sidebar nav a,.sidebar nav span{padding:16px 22px;font-size:1rem}   /* toques más cómodos */
  .contenido{padding:22px 18px;font-size:1rem}
  /* Tablas: scroll horizontal en vez de romper el layout */
  .caja .tabla,.contenido .caja table.tabla{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .matriz{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cabecera-pagina h1{font-size:1.4rem}
  /* Gráfica de barras: nombre encima de la barra */
  .gbar{grid-template-columns:1fr auto;grid-template-areas:"nombre valor" "pista pista";gap:6px 10px}
  .gbar .gnombre{grid-area:nombre}
  .gbar .gvalor{grid-area:valor}
  .gbar .gpista{grid-area:pista;height:20px}
  /* Filtros apilados */
  .filtros-fila{flex-direction:column;align-items:stretch}
  .filtros label{min-width:0;width:100%}
  .filtros .btn{width:100%}
}

/* Celular */
@media(max-width:520px){
  body{font-size:16px}
  .contenido{padding:18px 14px}
  .caja{padding:20px 15px;margin-bottom:20px}
  .caja h2{font-size:1.05rem}
  .grid-stats{grid-template-columns:1fr;gap:12px}
  .stat b{font-size:1.7rem}
  .stat span{font-size:.85rem}
  .btn{padding:14px 22px;font-size:.9rem}
  .btn-mini{padding:10px 16px;font-size:.8rem}
  .acciones{flex-direction:column;align-items:stretch;gap:8px}
  .acciones .btn,.acciones form,.acciones form .btn{width:100%;text-align:center}
  .cabecera-pagina h1{font-size:1.25rem}
  .vgrafica{gap:6px;height:150px}
  .vgrafica .vcol span{font-size:.62rem}
  .vgrafica .vcol b{font-size:.7rem}
  /* Formularios y campos más grandes para el dedo */
  input,select,textarea{padding:14px;font-size:1rem}
  .tarjeta-auth{padding:32px 22px}
}