/* ============================================================
   CENTRO DE ARCHIVOS · DC ELÉCTRICOS
   Identidad: verde corporativo + carbón, moderno y limpio
   ============================================================ */
:root{
  --verde:#93c121; --verde-osc:#6c8f1a; --carbon:#1f2937;
  --gris:#f4f5f7; --gris-b:#e5e7eb; --texto:#1f2937; --suave:#6b7280;
  --rojo:#dc2626; --ok:#10b981;
  --grad:linear-gradient(135deg,#93c121 0%,#6c8f1a 100%);
  --grad-dark:linear-gradient(135deg,#1f2937 0%,#0f172a 60%,#064e3b 100%);
  --sh:0 8px 24px rgba(0,0,0,.08); --sh2:0 16px 40px rgba(0,0,0,.16);
  --ff:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  --ff-d:'Montserrat',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--ff);color:var(--texto);background:#f7f8fa;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font-family:inherit;font-size:14px}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.login-art{
  background:var(--grad-dark);color:#fff;display:flex;flex-direction:column;
  justify-content:space-between;padding:48px 56px;position:relative;overflow:hidden;
}
.login-art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 80% 20%,rgba(147,193,33,.25),transparent 50%)}
.login-art .brand{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-art .brand img{height:46px;background:#fff;border-radius:10px;padding:6px}
.login-art .brand span{font-size:13px;letter-spacing:.25em;color:#cbd5e1}
.login-art h1{font-family:var(--ff-d);font-size:38px;line-height:1.05;position:relative;z-index:1;font-weight:800}
.login-art h1 b{color:var(--verde)}
.login-art p{color:#cbd5e1;font-size:14px;max-width:340px;position:relative;z-index:1}
.login-art .pie{font-size:12px;color:#94a3b8;letter-spacing:.15em;position:relative;z-index:1}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:100%;max-width:380px}
.login-card h2{font-family:var(--ff-d);font-size:26px;margin-bottom:6px;color:var(--carbon)}
.login-card .sub{color:var(--suave);font-size:14px;margin-bottom:28px}
.field{margin-bottom:18px}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:680px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--carbon);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:7px}
.field input{width:100%;padding:13px 14px;border:1.5px solid var(--gris-b);
  border-radius:10px;transition:.15s;background:#fff}
.field input:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 4px rgba(147,193,33,.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border:0;border-radius:10px;font-weight:700;cursor:pointer;
  transition:.15s;font-size:14px}
.btn-pri{background:var(--grad);color:#fff;width:100%;box-shadow:0 10px 24px rgba(147,193,33,.3)}
.btn-pri:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn-ghost{background:#fff;border:1.5px solid var(--gris-b);color:var(--carbon)}
.btn-ghost:hover{border-color:var(--verde)}
.btn-danger{background:var(--rojo);color:#fff}
.btn-sm{padding:8px 14px;font-size:12px;border-radius:8px}
.alert{padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:18px;font-weight:500}
.alert-err{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
.alert-ok{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}

/* ---------- LAYOUT APP ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--carbon);color:#cbd5e1;display:flex;flex-direction:column;padding:20px 0;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:6px}
.side .logo{display:flex;align-items:center;gap:12px;padding:0 22px 22px;
  border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:14px}
.side .logo img{height:34px;background:#fff;border-radius:8px;padding:5px}
.side .logo div{font-size:11px;letter-spacing:.18em;color:#94a3b8}
.side .logo b{display:block;color:#fff;font-size:13px;letter-spacing:.05em}
.side .sep{font-size:10px;letter-spacing:.2em;color:#64748b;padding:14px 22px 6px;text-transform:uppercase}
.side a.nav{display:flex;align-items:center;gap:11px;padding:11px 22px;font-size:13.5px;
  font-weight:500;transition:.15s;border-left:3px solid transparent}
.side a.nav:hover{background:rgba(255,255,255,.05);color:#fff}
.side a.nav.on{background:rgba(147,193,33,.14);color:var(--verde);border-left-color:var(--verde);font-weight:700}
.side a.nav svg{width:18px;height:18px;flex-shrink:0}
.side .foot{margin-top:auto;padding:16px 16px;border-top:1px solid rgba(255,255,255,.08)}
.side .foot .ucard{
  display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.05);border-radius:10px;padding:10px 12px;margin-bottom:10px;
}
.side .foot .av{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--grad);color:#fff;display:grid;place-items:center;
  font-family:var(--ff-d);font-weight:800;font-size:14px;
}
.side .foot .meta{min-width:0;flex:1}
.side .foot .u{color:#fff;font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .foot .r{color:var(--verde);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-top:1px}
.side .foot .salir{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px;border-radius:9px;
  background:transparent;border:1px solid rgba(255,255,255,.14);
  color:#cbd5e1;font-size:12.5px;font-weight:600;transition:.15s;
}
.side .foot .salir:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4);color:#fff}
.side .foot .salir svg{width:15px;height:15px;flex-shrink:0}
.main{padding:32px 38px;overflow:auto}

/* ---------- Barra superior móvil (oculta en escritorio) ---------- */
.mtop{display:none;align-items:center;gap:12px;background:var(--carbon);color:#fff;
  padding:10px 14px;position:sticky;top:0;z-index:45}
.mtop-burger{background:rgba(255,255,255,.08);border:0;color:#fff;width:40px;height:40px;
  border-radius:10px;display:grid;place-items:center;cursor:pointer}
.mtop-burger svg{width:22px;height:22px}
.mtop-logo{display:flex;align-items:center;gap:10px;min-width:0}
.mtop-logo img{height:28px;background:#fff;border-radius:6px;padding:3px}
.mtop-logo b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:49}
.side-ov.on{display:block}

.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;flex-wrap:wrap;gap:12px}
.head .crumb{font-size:11px;letter-spacing:.18em;color:var(--suave);text-transform:uppercase}
.head h1{font-family:var(--ff-d);font-size:26px;color:var(--carbon);margin-top:4px}

/* ---------- CARDS / GRID ---------- */
.panel{background:#fff;border:1px solid var(--gris-b);border-radius:14px;padding:24px;box-shadow:var(--sh);margin-bottom:22px;position:relative}
/* Cuando un buscador despliega su lista, su panel sube por encima de los demás */
.panel.on-top{z-index:60}
.panel h2{font-size:17px;color:var(--carbon);margin-bottom:4px}
.panel .hint{color:var(--suave);font-size:13px;margin-bottom:18px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat{background:#fff;border:1px solid var(--gris-b);border-radius:14px;padding:20px;box-shadow:var(--sh)}
.stat .n{font-family:var(--ff-d);font-size:30px;font-weight:800;color:var(--carbon)}
.stat .l{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.stat.v .n{color:var(--verde-osc)}

.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
/* Sin overflow:hidden — para que el dropdown del buscador no quede recortado.
   El recorte ahora vive en .pool-thumb (basta para conservar la imagen redondeada). */
.pool-item{background:#fff;border:1px solid var(--gris-b);border-radius:12px;transition:.15s;position:relative}
.pool-item:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.pool-item.on-top{z-index:50}
.pool-thumb{aspect-ratio:1;background:var(--gris);display:grid;place-items:center;overflow:hidden;border-radius:12px 12px 0 0}
/* Dropdown de búsqueda de productos */
.bp-res .op.active{background:#eef6d8}
.bp-res .op:hover{background:#f5f9e8}
.pool-thumb img{width:100%;height:100%;object-fit:cover}
.pool-thumb .pdf{font-family:var(--ff-d);font-weight:800;color:var(--suave);font-size:13px}
.pool-body{padding:12px 13px}
.pool-body .nm{font-size:12px;font-weight:600;color:var(--carbon);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pool-body .mt{font-size:11px;color:var(--suave);margin-top:3px}
.pool-body .acts{display:flex;gap:6px;margin-top:10px}

.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em}
.tag-pend{background:#fef3c7;color:#92400e}
.tag-asig{background:#d1fae5;color:#065f46}
.tag-desc{background:#fee2e2;color:#991b1b}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--suave);padding:10px 12px;border-bottom:2px solid var(--gris-b)}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--gris-b)}
table.tbl tr:hover td{background:#fafafa}

.drop{
  display:block;border:2px dashed #cbd5e1;border-radius:16px;
  padding:40px 28px;text-align:center;background:#fbfcfa;
  cursor:pointer;transition:.18s;position:relative;
}
.drop:hover,.drop.hot{
  border-color:var(--verde);background:#f3f9e6;
  box-shadow:0 0 0 4px rgba(147,193,33,.10);
}
.drop input{display:none}
.drop .ico{
  width:58px;height:58px;border-radius:50%;margin:0 auto 14px;
  background:var(--grad);display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(147,193,33,.32);
}
.drop .ico svg{width:26px;height:26px;color:#fff}
.drop:hover .ico{transform:translateY(-2px)}
.drop .t{font-weight:700;color:var(--carbon);font-size:15px;margin-bottom:4px}
.drop .t b{color:var(--verde-osc);text-decoration:underline}
.drop .s{font-size:12.5px;color:var(--suave)}
.drop .files{
  margin-top:16px;font-size:12.5px;color:var(--verde-osc);font-weight:600;
  background:#fff;border:1px solid #d9e8bf;border-radius:9px;
  padding:9px 12px;display:none;
}
.drop .files.show{display:block}

/* ---------- PORTAL PÚBLICO TRANSFORMADORES ---------- */
.tp-wrap{min-height:100vh;background:var(--grad-dark);display:flex;flex-direction:column}
.tp-nav{display:flex;align-items:center;gap:14px;padding:20px 6vw;border-bottom:1px solid rgba(255,255,255,.08)}
.tp-nav img{height:40px;background:#fff;border-radius:8px;padding:5px}
.tp-nav span{color:#cbd5e1;font-size:12px;letter-spacing:.22em}
.tp-body{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.tp-card{background:#fff;border-radius:20px;max-width:540px;width:100%;padding:40px;box-shadow:var(--sh2)}
.tp-card .et{font-size:11px;letter-spacing:.25em;color:var(--verde-osc);font-weight:800;text-transform:uppercase}
.tp-card h1{font-family:var(--ff-d);font-size:26px;color:var(--carbon);margin:6px 0 4px}
.tp-card .sub{color:var(--suave);font-size:14px;margin-bottom:24px}
.tp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tp-grid .full{grid-column:1/3}
.tp-foot{text-align:center;color:#94a3b8;font-size:12px;padding:20px;letter-spacing:.1em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(max-width:860px){
  .login-wrap{grid-template-columns:1fr}
  .login-art{display:none}
  .mtop{display:flex}                 /* mostrar barra superior con menú */
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;z-index:50;width:262px;max-width:84vw;height:100%;
        transform:translateX(-100%);transition:transform .22s;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .side.open{transform:none}
  .main{padding:18px 16px}
  .head{align-items:flex-start}
  .head h1{font-size:22px}
  .tp-grid{grid-template-columns:1fr}.tp-grid .full{grid-column:1}
  /* Portal público de certificados */
  .tp-nav{padding:16px 20px}
  .tp-body{padding:24px 14px}
  .tp-card{padding:26px 20px;border-radius:16px}
  .tp-card h1{font-size:22px}
  /* Tablas con scroll horizontal en pantallas chicas */
  table.tbl{display:block;overflow-x:auto;white-space:nowrap}
  /* Formularios de admin a una sola columna en móvil */
  .field-row-2{grid-template-columns:1fr !important}
}
@media(max-width:480px){
  .pool-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .panel{padding:16px}
  /* Evitar el zoom automático de iOS al enfocar inputs */
  .field input,.field select,.field textarea{font-size:16px}
}

/* ============================================================
   OPTIMIZAR IMÁGENES (WebP)
   ============================================================ */
.oi-wrap{max-width:1100px;margin:0 auto;padding:6px 0 28px;font-family:var(--ff)}
.oi-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.oi-hd h1{font-family:var(--ff-d);font-size:1.55rem;font-weight:800;margin:0 0 .35rem;color:var(--carbon)}
.oi-hd p{font-size:.88rem;color:var(--suave);margin:0;max-width:640px;line-height:1.55}
.oi-btn-back{display:inline-flex;align-items:center;gap:6px;padding:.55rem 1rem;background:#fff;border:1.5px solid var(--gris-b);color:var(--carbon);border-radius:9px;font-weight:600;font-size:.85rem;text-decoration:none;transition:.15s}
.oi-btn-back:hover{border-color:var(--verde);color:var(--verde-osc)}
.oi-card{background:#fff;border:1px solid var(--gris-b);border-radius:14px;padding:1.25rem 1.4rem;margin-bottom:1.1rem;box-shadow:var(--sh)}
.oi-card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:.85rem;gap:10px;flex-wrap:wrap}
.oi-card-hd h2{font-family:var(--ff-d);font-size:1.1rem;font-weight:800;margin:0;color:var(--carbon);text-transform:capitalize}
.oi-pct{font-size:.95rem;font-weight:800;color:#16a34a;background:#dcfce7;padding:.25rem .7rem;border-radius:100px}
.oi-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:.85rem}
.oi-stats > div{background:#f8fafc;border:1px solid #eef1f5;border-radius:10px;padding:.7rem .85rem}
.oi-stats strong{display:block;font-family:var(--ff-d);font-size:1.35rem;font-weight:800;color:var(--carbon);line-height:1.05}
.oi-stats span{font-size:.72rem;color:var(--suave);font-weight:600;display:block;margin-top:.25rem;text-transform:uppercase;letter-spacing:.05em}
.oi-stats .oi-pend{color:var(--rojo)}
.oi-bar{height:8px;background:#e2e8f0;border-radius:100px;overflow:hidden;margin-bottom:.5rem}
.oi-bar-fill{height:100%;background:var(--grad);transition:width .35s ease}
.oi-tamanos{margin-bottom:.5rem}
.oi-tamanos small{font-size:.74rem;color:#94a3b8}
.oi-acts{display:flex;gap:.55rem;margin-top:1rem;flex-wrap:wrap;align-items:center}
.oi-btn{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border:none;padding:.7rem 1.25rem;border-radius:9px;font-weight:700;font-size:.88rem;cursor:pointer;transition:transform .15s,box-shadow .2s;font-family:inherit}
.oi-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(147,193,33,.4)}
.oi-btn:disabled{opacity:.6;cursor:wait;transform:none}
.oi-btn svg{width:16px;height:16px}
.oi-btn-secondary{display:inline-flex;align-items:center;gap:6px;background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;padding:.7rem 1.1rem;border-radius:9px;font-weight:700;font-size:.85rem;cursor:pointer;font-family:inherit}
.oi-btn-secondary svg{width:14px;height:14px}
.oi-done{display:inline-flex;align-items:center;gap:8px;color:#16a34a;font-weight:700;font-size:.9rem;padding:.5rem .8rem;background:#dcfce7;border-radius:8px}
.oi-done svg{width:18px;height:18px}
.oi-log{margin-top:.85rem;padding:.7rem 1rem;background:#0f172a;color:#cbd5e1;border-radius:8px;font-family:monospace;font-size:.78rem;max-height:200px;overflow:auto;display:none;line-height:1.6}
.oi-log.activo{display:block}
.oi-log .ok{color:#86efac}
.oi-log .err{color:#fca5a5}
.oi-log .info{color:#93c5fd}
@media(max-width:600px){
  .oi-stats{grid-template-columns:repeat(2,1fr)}
  .oi-card{padding:1rem}
}