/* ======================================================
   PALETA INSTITUCIONAL
====================================================== */
:root{
  --guinda:#9d2449;
  --gold:#b38e5d;
  --text:#2b1b1f;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, Arial, sans-serif;
  background:#ffffff;
  color:var(--text);
}

/* ======================================================
   SPLASH
====================================================== */
.splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  z-index:9999;
  transition:.6s;
}
.splash.hide{ opacity:0; pointer-events:none; }

.splash-wrap{ position:relative; }

.splash-logo{
  width:300px;
  padding:16px;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(157,36,73,.25);
}

.splash-glow{
  position:absolute;
  inset:-25px;
  background:radial-gradient(circle,rgba(179,142,93,.6),transparent 65%);
  filter:blur(25px);
  z-index:-1;
}

/* ======================================================
   APP
====================================================== */
.app{ opacity:0; transition:.4s; }
.app.show{ opacity:1; }

/* ======================================================
   HEADER
====================================================== */
.topbar{
  display:flex;
  justify-content:space-between;
  padding:12px 18px;
  border-bottom:1px solid rgba(157,36,73,.15);
}

.logo-sedap{ height:45px; }
.logo-cgp-mini{ height:49px; border-radius:10px; }

/* ======================================================
   LAYOUT GENERAL
====================================================== */
.container{
  max-width:960px;
  margin:auto;
  padding:24px 16px;
}

.hero{ text-align:center; }
.hero h1{ color:var(--guinda); }
.hero p{ color:#666; }

/* ======================================================
   CARDS GENERALES
====================================================== */
.card{
  margin-top:18px;
  border:1px solid rgba(157,36,73,.18);
  border-radius:18px;
  padding:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* ======================================================
   FORMULARIOS
====================================================== */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

@media(max-width:720px){
  .grid{ grid-template-columns:1fr; }
}

.field label{
  font-size:12px;
  margin-bottom:6px;
  display:block;
}

.field small{
  font-size:11px;
  color:#666;
}

.field input,
.field select{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(157,36,73,.25);
  color:var(--guinda);
  font-weight:600;
  background:#fff;
}

::placeholder{
  color:var(--guinda);
  opacity:.55;
}

.field input:focus,
.field select:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(157,36,73,.15);
}

/* ======================================================
   FILE INPUT
====================================================== */
.file-field{ text-align:left; }

.file-btn{
  display:inline-block;
  margin-top:6px;
  background:var(--guinda);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  border-radius:10px;
  text-align:center;
  white-space:nowrap;
  line-height:1;
}

.file-btn.small{
  width:110px;
  padding:6px 10px;
  font-size:12px;
}

.file-btn:hover{ filter:brightness(1.05); }

.file-name{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#555;
}

/* ======================================================
   BOTONES
====================================================== */
.btn{
  background:var(--guinda);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
}

.btn:hover{ filter:brightness(1.05); }

/* ======================================================
   ALERTAS
====================================================== */
.alert{
  margin:10px 0;
  padding:12px;
  border-radius:14px;
}

.alert-error{
  background:rgba(157,36,73,.1);
  border:1px solid rgba(157,36,73,.3);
}

/* ======================================================
   FOOTER
====================================================== */
.footer{
  margin-top:18px;
  text-align:center;
  font-size:12px;
  color:#666;
}

/* ======================================================
   LEYENDA LEGAL
====================================================== */
.legal{
  margin-top:14px;
  text-align:center;
  font-size:11px;
  color: rgba(43,27,31,.65);
  line-height:1.35;
}

/* ======================================================
   ======================================================
      🔴  MÓDULO PGN (NUEVO)
   ======================================================
   ====================================================== */

/* Fondo suave */
body.pgn{ background:#f6f6f6; }

/* Cards listado productores */
.card-reg{
  border-radius:18px;
  border:1px solid rgba(157,36,73,.18);
  box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* Columna botón centrado vertical + horizontal */
.btn-col{
  width:240px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Botón guinda fuerte */
.btn-guinda{
  background:var(--guinda);
  color:#fff;
  border:none;
  border-radius:14px;
  font-weight:700;
}
.btn-guinda:hover{ filter:brightness(1.05); }

/* Tipografía mono */
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Miniatura INE */
.ine-thumb-wrap{
  width:95px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.ine-thumb{
  width:92px;
  height:72px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  transition:.1s;
}
.ine-thumb:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.ine-label{
  font-size:11px;
  color:#666;
  margin-top:4px;
}

/* Modal institucional */
.modal-header.brand{
  background:var(--guinda);
  color:#fff;
  border-bottom:4px solid var(--gold);
}

.modal-header.brand .modal-title{
  color:#fff;
}

.brand-logos{
  display:flex;
  align-items:center;
  gap:.6rem;
}

.brand-logos img{
  height:36px;
  width:auto;
  border-radius:10px;
  background:#fff;
  padding:2px;
}

/* ======================================================
   PGN — AJUSTES COMPACTOS (más ligero visualmente)
====================================================== */

/* Reducir grosor del contenedor */
.card-reg{
  padding:12px !important;      /* antes ~18 */
}

/* Reducir separación entre registros (~30% menos) */
.row.g-3{
  --bs-gutter-y: 0.7rem;       /* default 1rem aprox */
}

/* Menos separación interna */
.card-reg .card-body{
  padding:10px 12px !important;
  gap:10px !important;
}

/* Botón más compacto */
.btn-guinda{
  padding:9px 14px !important;
  font-size:14px;
}

/* Miniatura un poco más chica */
.ine-thumb{
  width:84px;
  height:64px;
}