/* ESTILOS PANTALLA WEB */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7f6; margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: 0 auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.tabs { display: flex; border-bottom: 2px solid #ddd; margin-bottom: 0; overflow-x: auto; }
.tab { padding: 10px 15px; cursor: pointer; font-weight: bold; color: #7f8c8d; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab.active { color: #2c3e50; border-bottom: 3px solid #3498db; }
.seccion { display: none; padding-top: 20px; }
.seccion.active { display: block; }
h1 { color: #2c3e50; margin-top: 0; }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { display: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

input[type="file"], input[type="text"], input[type="number"], input[type="email"], input[type="date"], input[type="password"], select, textarea { margin: 8px 0; padding: 10px; border: 1px solid #ccc; border-radius: 5px; width: 100%; box-sizing: border-box; font-family: inherit; }
button { background-color: #3498db; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 5px; cursor: pointer; transition: opacity 0.3s; }
button:hover { opacity: 0.9; }
button:disabled { background-color: #bdc3c7 !important; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 13px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
tr:hover { background-color: #f9f9f9; }
.badge { background: #eee; padding: 3px 8px; border-radius: 12px; font-size: 11px; color: #555; display: inline-block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }

.inline-input { appearance: none; background: transparent; border: 1px solid transparent; font-weight: bold; font-size: 13px; color: #2c3e50; text-align: center; width: 100%; box-sizing: border-box; margin: 0; padding: 4px; min-width: 40px; }
.inline-input:focus { border: 1px solid #3498db; background: white; outline: none; }
.ubi-select { appearance: none; background: transparent; border: none; font-weight: bold; font-size: 13px; color: #8e44ad; outline: none; cursor: pointer; text-align: center; width: 100%; }

body.modo-stock .col-finanzas { display: none !important; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; display: none; align-items: center; justify-content: center; }
.modal-box { background: white; padding: 25px; border-radius: 8px; width: 600px; max-width: 95%; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto; position: relative; }

#pantalla-login { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #2c3e50; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.login-box { background: white; padding: 40px; border-radius: 10px; width: 350px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

/* =======================================================
   MAGIA DEL PDF: IMPRESIÓN NATIVA A4 100% ANCHO (CTRL+P)
   ======================================================= */
.solo-imprimir { display: none; }
@media print {
    @page { size: A4 portrait; margin: 10mm 15mm; }
    body, html { width: 100%; height: 100%; margin: 0; padding: 0; background: white; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .container { width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; border: none !important; }
    body * { visibility: hidden; }
    .no-imprimir { display: none !important; }
    .solo-imprimir { display: block !important; visibility: visible; }
    .solo-imprimir-inline { display: inline !important; visibility: visible; }
    
    #sec-comprobantes { display: block !important; visibility: visible; position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; }
    #lienzo-pdf, #lienzo-pdf * { visibility: visible; }
    #lienzo-pdf { position: absolute; left: 0; top: 0; width: 100%; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
    
    .inline-input, textarea, select { border: none !important; background: transparent !important; color: black !important; font-size: 12px !important; box-shadow: none !important; padding: 0 !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; font-weight: normal; text-align: left;}
    textarea { resize: none; overflow: hidden; min-height: 180px !important; }
    #num-comp { font-size: 16px !important; font-weight: bold !important; color: #000 !important; }
    
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
    tr { page-break-inside: avoid; }
    
    .pdf-header-table { width: 100%; border-bottom: 2px solid #2c3e50; padding-bottom: 10px; margin-bottom: 15px; }
    .pdf-box { border: 1px solid #333; border-radius: 5px; padding: 10px; margin-bottom: 15px; background: white !important; }
    .tabla-pdf { width: 100%; table-layout: fixed; }
    .tabla-pdf th { background-color: #f0f0f0 !important; color: black !important; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 6px; font-size: 11px !important; text-align: center; }
    .tabla-pdf td { border-bottom: 1px solid #eee; padding: 4px; font-size: 11px !important; text-align: center;}
    .pdf-totales { width: 300px; float: right; border: 1px solid #333; border-radius: 5px; padding: 10px; page-break-inside: avoid; background: white !important; }
}