/* 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; }
.container{ max-width:1200px; margin:8px auto; padding:12px; background:white; border-radius:8px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,0.08); }
.header{ background:linear-gradient(90deg, var(--primary-comercio), var(--primary-dark)); color:white; padding:12px 15px; border-radius:6px; margin-bottom:12px; display:flex; gap:8px; 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}
.form-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:6px; align-items:start }
.field{ background:#fdfdfd; padding:6px; border-radius:5px; border:1px solid #e0e0e0 }
.label{ font-size:11px; color:#444; margin-bottom:3px; display:block; font-weight:700; text-transform: uppercase; }
.input, textarea, select{ width:100%; padding:6px; border-radius:5px; border:1px solid #ccc; background:white; color:#333; font-size:13px; transition:border 0.2s }
.input:focus{ outline:none; border-color:var(--primary-comercio); box-shadow:0 0 0 2px rgba(255, 112, 67, 0.1) }
.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}

.img-preview{ width:100px; height:80px; border-radius:5px; background:#f8f9fa; display:flex; align-items:center; justify-content:center; border:1px dashed #d0d0d0; overflow:hidden; margin-top:4px; }
.btn{ background:linear-gradient(90deg, var(--primary-comercio), var(--primary-dark)); color:#fff; padding:8px 16px; border-radius:6px; border:none; cursor:pointer; font-weight:700; transition:all 0.2s; font-size:13px; }
.btn:hover{ background:linear-gradient(90deg, var(--primary-dark), var(--primary-comercio)); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,0.15) }
.btn:disabled{opacity:0.6; cursor:not-allowed}

.code-img{ width:100%; height:130px; border-radius:6px; background:#f8f9fa; display:flex; align-items:center; justify-content:center; border:1px solid #e0e0e0; overflow:hidden; margin-top:4px; }
.result-small{ font-size:12px; color:#666; font-weight:500; }
.notice{ background: rgba(255, 112, 67, 0.1); padding: 8px 10px; 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; font-size: 12px; }

/* MODAL STYLES */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 2000; }
.modal-content { background: #fff; border-radius: 8px; width: 90%; max-width: 500px; max-height: 90vh; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: fadeIn 0.3s; }
.modal-header { background: var(--primary-comercio); color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; font-size: 1.1rem; }
.modal-body { padding: 0; background: #f9f9f9; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #eee; }
.btn-close-modal { background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }

@media(max-width:900px){ .col-6,.col-4,.col-3,.col-2,.col-8,.col-9{grid-column:span 12} }
.img-preview img { object-fit: contain !important; background: white; }
@keyframes fadeIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }