/*
 * APP-CORE.CSS — Ambipar / Minera Centinela
 * Estilos compartidos por todos los módulos.
 * Fase 2 — unificación de código duplicado.
 *
 * Cada módulo incluye este archivo y solo mantiene su CSS específico.
 * NUNCA editar aquí cosas específicas de un módulo; usar la etiqueta
 * <style> inline del módulo para eso.
 */

/* ── RESET Y VARIABLES ──────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --azul:#2C4A42;--azul2:#233D36;--azul3:#1A2E27;--azul-c:#E3E3DD;--azul-s:#F1F1EC;
  --azul-txt:#2C4A42;
  --verde:#456600;--verde-bg:#E9F5C7;--amarillo:#946F00;--amarillo-bg:#FCEFC2;
  --rojo:#A32D2D;--rojo-bg:#FCEBEB;--gris:#F2F2F0;--gris2:#D8D8D2;--gris-t:#4A4A47;
  --lima:#C8FF00;--lima-d:#9ACD00;--blanco-r:#F5F7F4;
  --r:8px;--rl:12px;
}
body{font-family:Arial,sans-serif;font-size:14px;color:#1a1a1a;background:var(--gris);min-height:100vh}

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--azul2);padding:11px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.25);overflow:hidden}
.topbar::before{content:"";position:absolute;top:-50%;right:18%;width:120px;height:220%;background:linear-gradient(105deg,transparent 46%,rgba(200,255,0,.08) 50%,transparent 54%)}
.topbar-left{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.t-logo{width:34px;height:34px;background:var(--azul3);border:2px solid var(--lima);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}
.t-title{color:var(--blanco-r);font-size:14px;font-weight:700;line-height:1.2}
.t-sub{color:rgba(245,247,244,.65);font-size:10px;letter-spacing:.02em}
.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.pill{font-size:11px;padding:4px 11px;border-radius:20px;background:rgba(245,247,244,.13);color:var(--blanco-r);border:1px solid rgba(245,247,244,.28)}
.pill-A{background:var(--lima-d);color:var(--azul3);border:none;font-weight:700}
.pill-B{background:#C9A300;color:var(--azul3);border:none;font-weight:700}
.btn-out{font-size:11px;padding:5px 11px;border-radius:20px;background:rgba(245,247,244,.1);color:var(--blanco-r);border:1px solid rgba(245,247,244,.22);cursor:pointer;font-family:Arial,sans-serif}
.btn-out:hover{background:rgba(245,247,244,.22)}
.btn-inicio{font-size:11px;padding:5px 11px;border-radius:20px;background:rgba(200,255,0,.16);color:#e8ff9e;border:1px solid rgba(200,255,0,.32);cursor:pointer;font-family:Arial,sans-serif}
.btn-inicio:hover{background:rgba(200,255,0,.3)}

/* ── INDICADOR DE SINCRONIZACIÓN ────────────────────────────────────────── */
.sdot{width:7px;height:7px;border-radius:50%;background:#456600}
.sdot.syn{background:#946F00;animation:pulse 1s infinite}
.sdot.err{background:#A32D2D}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── NAVEGACIÓN DE PESTAÑAS ─────────────────────────────────────────────── */
.nav{background:#fff;border-bottom:3px solid var(--gris2);display:flex;overflow-x:auto}
.nav::-webkit-scrollbar{display:none}
.nav button{padding:11px 14px;font-size:12px;font-weight:700;border:none;background:none;color:var(--gris-t);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-3px;white-space:nowrap;font-family:Arial,sans-serif}
.nav button:hover{color:var(--azul-txt)}
.nav button.active{color:var(--azul-txt);border-bottom-color:var(--lima-d)}
.nav button.adm{color:var(--rojo)}
.nav button.adm.active{border-bottom-color:var(--rojo)}

/* ── ÁREA DE CONTENIDO ──────────────────────────────────────────────────── */
#content{padding:14px;flex:1}

/* ── CARDS Y LAYOUT ─────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--gris2);border-radius:var(--rl);padding:16px;margin-bottom:12px;box-shadow:0 2px 6px rgba(31,56,100,.08);width:100%;box-sizing:border-box;overflow:hidden}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--azul-c)}
.ct{font-size:12px;font-weight:700;color:var(--azul);text-transform:uppercase;letter-spacing:.04em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;box-sizing:border-box}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;width:100%;box-sizing:border-box}

/* ── FORMULARIOS ────────────────────────────────────────────────────────── */
.fl{margin-bottom:12px}
.fl label{display:block;font-size:11px;font-weight:700;color:var(--azul);margin-bottom:5px;text-transform:uppercase}
.fl input,.fl select,.fl textarea{width:100%;padding:9px 12px;border:2px solid var(--gris2);border-radius:var(--r);font-size:13px;font-family:Arial,sans-serif}
.fl input:focus,.fl select:focus,.fl textarea:focus{outline:none;border-color:var(--azul2)}

/* ── BOTONES ────────────────────────────────────────────────────────────── */
.btn{padding:9px 15px;border-radius:var(--r);border:2px solid var(--gris2);background:#fff;color:var(--azul);cursor:pointer;font-size:12px;font-weight:700;font-family:Arial,sans-serif}
.bp{background:var(--azul);color:#fff;border-color:var(--azul)}
.bp:hover{background:var(--azul2)}
.bg2{background:var(--verde);color:#fff;border-color:var(--verde)}
.br{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.bsm{padding:5px 10px;font-size:11px}
.bxs{padding:3px 8px;font-size:10px}

/* ── BOTÓN CON ESTADO DE GUARDANDO (anti-doble-toque) ───────────────────── */
.btn-guardando{opacity:.7;cursor:not-allowed}

/* ── TABLAS ─────────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead tr{background:var(--azul)}
.tbl th{text-align:left;padding:8px 10px;color:#fff;font-size:11px;font-weight:700;text-transform:uppercase}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--gris2)}
.tbl tbody tr:hover td{background:var(--azul-s)}
.tbl tbody tr:nth-child(even) td{background:var(--gris)}
.tbl-w{overflow-x:auto}

/* ── BADGES Y ALERTAS ───────────────────────────────────────────────────── */
.badge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700}
.bA{background:var(--verde-bg);color:var(--verde)}
.bB{background:var(--amarillo-bg);color:var(--amarillo)}
.al{padding:10px 14px;border-radius:var(--r);font-size:12px;margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-weight:600}
.aw{background:var(--amarillo-bg);color:var(--amarillo);border-left:4px solid var(--amarillo)}
.ae{background:var(--rojo-bg);color:var(--rojo);border-left:4px solid var(--rojo)}
.ag{background:var(--verde-bg);color:var(--verde);border-left:4px solid var(--verde)}

/* ── SKELETON / LOADING ─────────────────────────────────────────────────── */
.loading{text-align:center;padding:40px;color:var(--azul-txt);font-size:14px;font-weight:700}
.sk{background:linear-gradient(90deg,var(--gris2) 25%,var(--gris) 50%,var(--gris2) 75%);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r);height:20px;margin-bottom:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── TOAST ──────────────────────────────────────────────────────────────── */
#toast{position:fixed;top:14px;right:14px;padding:10px 18px;border-radius:var(--r);font-size:13px;font-weight:700;z-index:9999;display:none;box-shadow:0 4px 16px rgba(0,0,0,.2);color:#fff;max-width:320px}

/* ── COMPONENTE FOTO PICKER ─────────────────────────────────────────────── */
.fpk-wrap{margin-bottom:6px}
.fpk-input{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;border:0!important;opacity:0!important;pointer-events:none!important}
.fpk-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 14px;background:var(--blanco-r,#F5F7F4);color:var(--azul);border:2px dashed var(--gris2);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;font-family:inherit}
.fpk-btn:hover{background:var(--verde-bg);border-color:var(--lima-d)}
.fpk-btn:active{transform:scale(.98)}
.fpk-btn.has{border-style:solid;background:var(--verde-bg);border-color:var(--verde)}
.fpk-ico{font-size:16px}
.fpk-preview:empty{display:none}
.fpk-preview{margin-top:8px}
.fpk-pv{display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border-radius:10px;border:1.5px solid var(--gris2)}
.fpk-pv img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0}
.fpk-pmeta{flex:1;min-width:0;font-size:12px}
.fpk-pname{font-weight:600;color:var(--azul);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpk-psize{font-size:11px;color:#888;margin-top:2px}
.fpk-prm{background:transparent;border:none;color:var(--rojo);font-size:20px;cursor:pointer;padding:4px 10px;border-radius:6px;flex-shrink:0;line-height:1}
.fpk-prm:hover{background:var(--rojo-bg)}
.fpk-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;animation:fpkFadeIn .15s ease}
@keyframes fpkFadeIn{from{opacity:0}to{opacity:1}}
.fpk-mbox{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:340px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.fpk-mtitle{font-size:15px;font-weight:700;color:var(--azul);text-align:center;margin-bottom:16px;text-transform:uppercase;letter-spacing:.03em}
.fpk-mopts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.fpk-mopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;background:var(--blanco-r,#F5F7F4);border:2px solid transparent;border-radius:12px;cursor:pointer;font-family:inherit;color:var(--azul);transition:all .15s ease}
.fpk-mopt:hover{background:var(--lima-d);border-color:var(--verde);color:var(--azul3)}
.fpk-mopt:active{transform:scale(.97)}
.fpk-oico{font-size:34px;line-height:1}
.fpk-oname{font-weight:700;font-size:14px}
.fpk-osub{font-size:11px;color:#888}
.fpk-mopt:hover .fpk-osub{color:var(--azul3)}
.fpk-mcancel{width:100%;padding:11px;background:transparent;border:1.5px solid var(--gris2);border-radius:10px;font-size:13px;font-weight:600;color:#555;cursor:pointer;font-family:inherit}
.fpk-mcancel:hover{background:var(--gris)}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:520px){.two,.three{grid-template-columns:1fr}}