/* ESTILOS COMERFLOW COMPACTOS - NARANJA */
:root{
  --bg: #f4f4f4; 
  --primary-comercio: #FF7043;
  --primary-dark: #F4511E;
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:'Poppins',sans-serif;
  background:var(--bg);
  color:#333;
  padding:8px; /* ← Compacto: menos padding */
}
.container{
  max-width:1200px;
  margin:8px auto; /* ← Compacto: menos margen */
  padding:12px; /* ← Compacto: menos padding */
  background:white;
  border-radius:8px; /* ← Compacto: bordes más pequeños */
  overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,0.08); /* ← Sombras más sutiles */
}
.header{
  background:linear-gradient(90deg, var(--primary-comercio), var(--primary-dark));
  color:white;
  padding:12px 15px; /* ← Compacto: menos padding */
  border-radius:6px; /* ← Compacto */
  margin-bottom:12px; /* ← Compacto */
  display:flex;
  gap:8px; /* ← Compacto: menos gap */
  align-items:center
}
.logo{width:50px;height:50px;border-radius:6px;background:rgba(255,255,255,0.2)}
h1{margin:0;font-size:1.2rem;color:white !important}
.small{color:rgba(255,255,255,0.8) !important; font-size:11px} /* ← Compacto */
.form-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px; /* ← MUY IMPORTANTE: gap reducido de 10px a 6px */
  align-items:start
}
.field{
  background:#fdfdfd; /* ← Más claro */
  padding:6px; /* ← Compacto: reducido de 10px a 6px */
  border-radius:5px; /* ← Compacto */
  border:1px solid #e0e0e0 /* ← Borde más fino */
}
.label{
  font-size:11px; /* ← Compacto: reducido de 12px */
  color:#444; /* ← Más oscuro para mejor legibilidad */
  margin-bottom:3px; /* ← Compacto: reducido de 6px */
  display:block;
  font-weight:700;
  text-transform: uppercase; /* ← Para coincidir con el otro */
}
.input, textarea, select{
  width:100%;
  padding:6px; /* ← Compacto: reducido de 9px */
  border-radius:5px; /* ← Compacto */
  border:1px solid #ccc; /* ← Borde más sutil */
  background:white;
  color:#333;
  font-size:13px; /* ← Compacto: reducido de 14px */
  transition:border 0.2s
}
.input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--primary-comercio);
  box-shadow:0 0 0 2px rgba(255, 112, 67, 0.1) /* ← Sombra más pequeña */
}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-2{grid-column:span 2}
.col-8{grid-column:span 8}
.col-9{grid-column:span 9}

/* IMÁGENES COMPACTAS */
.img-preview{
  width:100px; /* ← Compacto: reducido de 120px */
  height:80px; /* ← Compacto: reducido de 100px */
  border-radius:5px;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed #d0d0d0; /* ← Borde más sutil */
  overflow:hidden;
  margin-top:4px; /* ← Compacto */
}

/* BOTONES COMPACTOS */
.btn{
  background:linear-gradient(90deg, var(--primary-comercio), var(--primary-dark));
  color:#fff;
  padding:8px 16px; /* ← Compacto: reducido */
  border-radius:6px; /* ← Compacto */
  border:none;
  cursor:pointer;
  font-weight:700;
  transition:all 0.2s;
  font-size:13px; /* ← Compacto */
}
.btn:hover{
  background:linear-gradient(90deg, var(--primary-dark), var(--primary-comercio));
  transform:translateY(-1px); /* ← Efecto más sutil */
  box-shadow:0 3px 8px rgba(0,0,0,0.15) /* ← Sombra más pequeña */
}
.btn:disabled{opacity:0.6; cursor:not-allowed}

/* CÓDIGOS COMPACTOS */
.code-img{
  width:100%;
  height:130px; /* ← Compacto: reducido de 160px */
  border-radius:6px;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e0e0e0;
  overflow:hidden;
  margin-top:4px; /* ← Compacto */
}
.result-small{
  font-size:12px; /* ← Compacto: reducido de 13px */
  color:#666;
  font-weight:500;
}

/* --- CARNET COMERCIO FORMATO COMPACTO --- */
/* --- CARNET COMERCIO FORMATO COMPACTO --- */
.carnet-card {
  width: 320px; /* ← Ligeramente más compacto */
  height: 195px; /* ← Ligeramente más compacto */
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px; /* ← Compacto */
  overflow: hidden;
  position: relative;
  box-shadow:0 3px 6px rgba(0,0,0,0.1); /* ← Sombra más sutil */
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  color: #333;
}
.carnet-header { 
  flex: 0 0 40px; /* ← Compacto: reducido de 50px */
  background: linear-gradient(90deg, var(--primary-comercio), var(--primary-dark));
  display: flex;
  align-items: center;
  padding: 0 10px; /* ← Compacto: reducido de 15px */
  justify-content: space-between;
}
.carnet-logo { height: 35px; } /* ← Compacto: reducido de 50px */
.carnet-rol { 
  color: #fff;
  font-size: 0.9rem; /* ← Compacto: reducido de 1.1rem */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px; /* ← Reducido de 1px */
}
.carnet-body {
  flex: 1;
  display: flex;
  padding: 8px; /* ← Compacto: reducido de 12px */
  gap: 8px; /* ← Compacto: reducido de 12px */
  align-items: center;
  overflow: hidden;
}
/* CONTENEDOR DEL LOGOTIPO COMPACTO */
.carnet-photo {
  width: 65px; /* ← REDUCIDO de 70px */
  height: 65px; /* ← REDUCIDO de 70px */
  background: white;
  border-radius: 4px; /* ← Compacto */
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px; /* ← Espacio interno para que respire la imagen */
}

/* LOGOTIPO AJUSTADO AL CONTENEDOR */
.carnet-photo img {
  width: 100%; /* ← Ocupa todo el contenedor */
  height: 100%; /* ← Ocupa todo el contenedor */
  object-fit: contain !important; /* ← MANTIENE PROPORCIONES sin deformar */
  object-position: center;
  background: white;
  max-width: 100%;
  max-height: 100%;
}

.carnet-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.carnet-name {
  font-size: 0.85rem; /* ← Ligeramente más pequeño para caber mejor */
  font-weight: 700;
  color: #000;
  margin-bottom: 2px; /* ← Compacto: reducido de 4px */
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1; /* ← Para que ocupe menos altura vertical */
}
.carnet-data {
  font-size: 0.65rem; /* ← Más pequeño para espacio */
  color: #555;
  margin-bottom: 1px; /* ← Compacto: reducido de 2px */
  line-height: 1.1;
}
.carnet-badge {
  margin-top: 3px; /* ← Compacto: reducido de 4px */
  background: #ffebee;
  color: var(--primary-dark);
  padding: 2px 5px; /* ← Aumentado un poco para mejor legibilidad */
  border-radius: 3px; /* ← Compacto */
  font-size: 0.55rem; /* ← Más pequeño aún */
  font-weight: 600;
  align-self: flex-start;
  border: 1px solid #ffcdd2;
  line-height: 1.1;
}
.carnet-footer {
  flex: 0 0 55px; /* ← Compacto: reducido de 70px */
  background: #f8f9fa;
  border-top: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px; /* ← Compacto: reducido de 12px */
}
.carnet-barcode {
  height: 40px; /* ← Compacto: reducido de 50px */
  width: 110px; /* ← Compacto: reducido de 130px */
  flex-shrink: 0;
}
.carnet-municipio {
  font-size: 0.6rem; /* ← Compacto: reducido de 0.65rem */
  font-weight: 600;
  color: #333;
  text-align: center;
  flex: 1;
  padding: 0 4px; /* ← Compacto */
  line-height: 1.1;
}
.carnet-qr {
  width: 48px; /* ← Compacto: reducido de 56px */
  height: 48px; /* ← Compacto: reducido de 56px */
  flex-shrink: 0;
  padding: 2px; /* ← Compacto */
  background: #fff;
  border-radius: 3px; /* ← Compacto */
}

/* NOTICE COMPACTO */
.notice{
  background: rgba(255, 112, 67, 0.1);
  padding: 8px 10px; /* ← Compacto: reducido */
  border-radius: 5px;
  color: var(--primary-dark);
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(255, 112, 67, 0.3);
  margin: 12px 0; /* ← Compacto */
  font-size: 12px; /* ← Compacto */
}

/* RESPONSIVE COMPACTO */
@media(max-width:900px){
  .col-6,.col-4,.col-3,.col-2,.col-8,.col-9{grid-column:span 12}
  .carnet-card {
    width: 100%;
    max-width: 320px;
  }
}

/* FIX para logotipos sin deformar */
.img-preview img,
.carnet-photo img {
  object-fit: contain !important;
  object-position: center;
  background: white;
}

.carnet-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white !important;
}