/* ===========================================================================
   03-MODALS · Modales, Ajustes, Formularios
   =========================================================================== */
.modal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #0a210f66, #04140a99); backdrop-filter: blur(6px); }
.modal-overlay:not([hidden]) { display: flex; animation: overlayIn .22s ease both; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: calc(100dvh - 40px); padding: 0; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px #06210d40; }
.modal.modal-mid { max-width: 560px; } .modal.modal-wide { max-width: 880px; }
#privacyModal .privacy-content { text-align: left; max-height: 46vh; overflow-y: auto; padding-right: 8px; margin-top: 4px; }
#privacyModal .privacy-content h3 { color: var(--primary-glow); font-family: var(--font-display); font-size: 1rem; margin: 18px 0 6px; }
#privacyModal .privacy-content h3:first-child { margin-top: 0; }
#privacyModal .privacy-content p, #privacyModal .privacy-content li { color: var(--text); font-size: .88rem; line-height: 1.6; }
#privacyModal .privacy-content ul { padding-left: 18px; margin: 4px 0; }

/* --- ENVÍO KIT / PASARELA DE PAGO (vista previa) --- */
#shippingModal .modal { max-width: 800px; }
.shipping-icon { background: linear-gradient(135deg, #d9822b, #a85d1f); }
.shipping-form { text-align: left; margin-top: 10px; }
.shipping-section { padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); }
.shipping-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--primary-glow); }
.shipping-section-ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: rgba(63,163,74,.14); font-size: .9rem; }
.shipping-form .auth-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.shipping-form .auth-field:last-child { margin-bottom: 0; }
.shipping-form .auth-field label { font-size: .78rem; font-weight: 700; color: var(--muted); }
.shipping-form .auth-field input, .shipping-form .auth-field select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .88rem; transition: border-color .15s; }
.shipping-form .auth-field input:focus, .shipping-form .auth-field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.shipping-cost-summary { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--primary) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 32%, transparent); color: var(--text); font-size: .85rem; line-height: 1.6; }
.shipping-cost-summary strong { color: var(--primary-glow); font-size: .95rem; }
.shipping-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shipping-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.shipping-row-addr { grid-template-columns: 1fr 160px; }
.phone-input-row { display: flex; gap: 8px; }
.phone-input-row #shipPhone { flex: 1; min-width: 0; }
.shipping-address-details { animation: overlayIn .2s ease both; }
.shipping-country-field { max-width: 380px; }
.country-picker { position: relative; }
.country-picker-input { width: 100%; box-sizing: border-box; padding-right: 30px !important; }
.country-picker-input[readonly] { cursor: pointer; caret-color: transparent; }
.country-picker-input[readonly]:not(:placeholder-shown) { color: var(--text); font-weight: 600; }
.country-picker::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .72rem; pointer-events: none; }
.phone-prefix-picker { flex: none; width: 132px; }
.phone-prefix-picker .country-picker-input { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.country-picker-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(0,0,0,.35); padding: 8px; }
.phone-prefix-picker .country-picker-list { width: 300px; right: auto; }
.country-picker-filter { width: 100%; box-sizing: border-box; margin-bottom: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .82rem; }
.country-picker-filter:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.country-picker-results { max-height: 192px; overflow-y: auto; }
.country-picker-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: .85rem; cursor: pointer; }
.country-picker-item:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.country-picker-code { color: var(--muted); font-size: .78rem; float: right; }
.country-picker-empty { padding: 10px; color: var(--muted); font-size: .82rem; text-align: center; }
.field-error { color: #ff6b6b; font-size: .78rem; margin-top: 4px; }
.field-hint { font-size: .78rem; margin-top: 4px; color: var(--muted); }
.field-hint-ok { color: #3fa34a; }
.field-hint-warn { color: #e0a030; }
#shipPhone.input-invalid, .country-picker-input.input-invalid, #shipName.input-invalid { border-color: #ff6b6b !important; }
.payment-options { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.payment-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); color: var(--text); font-size: .95rem; font-weight: 700; cursor: pointer; transition: transform .16s, border-color .16s; }
.payment-opt:hover { transform: translateY(-2px); border-color: var(--primary); }
.payment-opt-ico { font-size: 1.3rem; }

/* --- ADMIN --- */
#adminUsersModal .modal { max-width: 1100px; width: min(94vw, 1100px); }
#adminPricingModal .modal-body, #adminUsersModal .modal-body { text-align: left; }
#adminPricingModal .modal-icon, #adminPricingModal h2, #adminPricingModal .modal-lead,
#adminUsersModal .modal-icon, #adminUsersModal h2, #adminUsersModal .modal-lead { text-align: center; }
.admin-msg { margin-bottom: 12px; padding: 9px 14px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 16%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); color: var(--primary-glow); font-size: .85rem; font-weight: 700; }
.admin-msg-error { background: color-mix(in srgb, #dc2626 16%, transparent); border-color: color-mix(in srgb, #dc2626 40%, transparent); color: #f87171; }
.admin-search { width: 100%; box-sizing: border-box; margin-bottom: 12px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: .85rem; }
.admin-search:focus { outline: none; border-color: var(--primary); }
.admin-table-wrap { max-height: 52vh; overflow: auto; border: 1px solid var(--line); border-radius: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.admin-table th { position: sticky; top: 0; background: var(--panel-2); color: var(--primary-glow); text-align: left; padding: 10px 12px; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--line); }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-note { color: var(--muted); font-size: .78rem; font-weight: 400; }
.admin-table select.admin-role, .admin-table input.admin-prountil, .admin-table select.admin-sumar-select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font-size: .8rem; }
.admin-days-cell, .admin-actions-cell { white-space: nowrap; }
.admin-btn { border: 0; border-radius: 8px; padding: 6px 12px; font-size: .78rem; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, #166534, #4d7c0f); margin-right: 6px; }
.admin-btn:hover { filter: brightness(1.1); }
.admin-btn-danger { background: linear-gradient(135deg, #7f1d1d, #dc2626); margin-right: 0; }
@media (max-width: 720px) {
  .admin-table { font-size: .76rem; }
  .admin-table th, .admin-table td { padding: 8px; }
}
.admin-pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.admin-pricing-card { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; background: color-mix(in srgb, var(--panel) 96%, var(--bg)); }
.admin-pricing-card-title { font-size: .8rem; font-weight: 800; color: var(--primary-glow); margin-bottom: 8px; }
.admin-pricing-card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-pricing-card label { display: flex; flex-direction: column; gap: 5px; font-size: .7rem; font-weight: 700; color: var(--muted); }
.admin-pricing-card input { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .85rem; width: 100%; box-sizing: border-box; }
.stock-est-content { text-align: left; }
.stock-est-summary { padding: 10px 14px; border-radius: 10px; font-size: .85rem; font-weight: 700; margin-bottom: 12px; }
.stock-est-summary.ok { background: color-mix(in srgb, #3fa34a 18%, transparent); color: #3fa34a; }
.stock-est-summary.low { background: color-mix(in srgb, #e0a030 18%, transparent); color: #e0a030; }
.stock-est-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.stock-est-row { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; background: color-mix(in srgb, var(--panel) 96%, var(--bg)); }
.stock-est-row.low { border-color: color-mix(in srgb, #e0a030 50%, var(--line)); }
.stock-est-row-main { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stock-est-name { font-weight: 800; font-size: .88rem; }
.stock-est-badge { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.stock-est-badge.ok { background: color-mix(in srgb, #3fa34a 20%, transparent); color: #3fa34a; }
.stock-est-badge.low { background: color-mix(in srgb, #e0a030 20%, transparent); color: #e0a030; }
.stock-est-detail { font-size: .76rem; color: var(--muted); margin-top: 4px; }
.area-designer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; justify-content: center; }
.area-chip { border: 2px solid var(--area-chip-color, var(--primary)); background: color-mix(in srgb, var(--area-chip-color, var(--primary)) 16%, transparent); color: var(--text); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: .82rem; font-weight: 700; cursor: pointer; touch-action: none; user-select: none; display: inline-flex; align-items: center; gap: 6px; }
.area-chip.selected { background: var(--area-chip-color, var(--primary)); color: #fff; }
.area-chip.empty { opacity: .35; cursor: default; }
.area-chip-count { font-weight: 900; }
.area-chip-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.4); flex: none; }
.area-designer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.area-designer-toolbar-btns { display: flex; gap: 8px; }
.area-designer-toolbar-btns button { padding: 5px 10px; font-size: .74rem; }
.area-designer-grid { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, var(--bg)); }
.area-cell { border: 2px dashed var(--line); border-radius: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; min-height: 66px; min-width: 28px; overflow: hidden; }
.area-cell.filled { border-style: solid; border-color: var(--area-cell-color); background: color-mix(in srgb, var(--area-cell-color) 24%, var(--panel)); }
.area-cell-img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; border: 1px solid rgba(255,255,255,.35); }
.area-cell-icon { font-size: 1.3rem; line-height: 1; }
.area-cell-name { font-size: .58rem; font-weight: 800; color: var(--text); text-align: center; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-cell.dead-locked { opacity: .5; filter: grayscale(.7); cursor: not-allowed; }
.area-cell.dead-pick { cursor: pointer; }
.area-cell.dead-selected { outline: 3px solid #ef4444; outline-offset: -3px; box-shadow: 0 0 0 2px rgba(239,68,68,.35); }
.area-map-status { padding: 10px 14px; border-radius: 10px; font-size: .82rem; font-weight: 700; margin-bottom: 12px; }
.area-map-status.ok { background: color-mix(in srgb, #3fa34a 18%, transparent); color: #3fa34a; }
.area-map-status.warn { background: color-mix(in srgb, #e0a030 18%, transparent); color: #e0a030; }
.area-drag-ghost { position: fixed; z-index: 20001; pointer-events: none; transform: translate(-50%, -50%); background: var(--area-chip-color, var(--primary)); color: #fff; border-radius: 999px; padding: 6px 14px 6px 6px; font-size: .82rem; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.4); display: flex; align-items: center; gap: 8px; }
.area-drag-ghost-img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.4); flex: none; }
.area-designer-size-fields { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.area-designer-size-fields label { display: flex; flex-direction: column; gap: 5px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.area-designer-size-fields input { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: .95rem; width: 90px; text-align: center; }
.area-designer-size-hint { font-size: .78rem; color: var(--muted); min-height: 1.2em; }
.area-designer-size-hint.warn { color: #e0a030; font-weight: 700; }
.area-designer-3d { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--panel) 96%, var(--bg)); margin-bottom: 10px; }
.area-3d-back { font-size: .78rem; color: var(--muted); background: none; border: none; cursor: pointer; padding: 10px 14px; text-align: left; width: 100%; }
.area-3d-back:hover { color: var(--primary); }
.area-3d-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 14px 12px; }
.area-3d-field { display: flex; flex-direction: column; gap: 4px; font-size: .68rem; color: var(--muted); }
.area-3d-field label { display: flex; justify-content: space-between; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.area-3d-field .v { color: var(--primary); text-transform: none; }
.area-3d-field input[type=range] { accent-color: var(--primary); width: 100%; }
.area-3d-field-num input[type=number] { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font-size: .85rem; width: 100%; }
#area3dGridHint.warn { color: #e0a030; font-weight: 700; font-size: .78rem; padding: 0 14px 10px; margin: 0; }
.area-3d-canvas-wrap { width: 100%; height: 320px; position: relative; }
.area-3d-pill { position: absolute; top: 10px; right: 12px; font-size: .74rem; padding: 5px 12px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid var(--line); font-weight: 700; z-index: 2; }
.area-3d-pill.ok { color: #7ee08a; }
.area-3d-pill.caution { color: #e0a030; }
.area-3d-pill.bad { color: #ef4444; }
.area-3d-hint { font-size: .72rem; color: var(--muted); padding: 8px 14px 12px; margin: 0; }
.area-3d-tooltip { position: absolute; z-index: 5; pointer-events: none; background: rgba(6,19,10,.92); border: 1px solid var(--line); color: var(--text); font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 8px; transform: translate(0, -100%); white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.area-3d-mini-controls { position: absolute; z-index: 4; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 8px; background: rgba(6,19,10,.72); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(2px); }
.area-3d-mini-controls label { display: flex; flex-direction: column; gap: 3px; font-size: .68rem; color: var(--muted); }
.area-3d-mini-controls label .v { color: var(--glow, #7ee08a); font-weight: 700; }
.area-3d-mini-controls input[type=range] { width: 140px; accent-color: var(--primary); }
@media (max-width: 700px) { .area-3d-controls { grid-template-columns: repeat(2, 1fr); } }
.admin-pricing-card input:focus { outline: none; border-color: var(--primary); }
.admin-pricing-card input:focus { outline: none; border-color: var(--primary); }
.adm-inp { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; font-size: .8rem; width: 100%; box-sizing: border-box; }
.adm-inp:focus { outline: none; border-color: var(--primary); }
.adm-num { width: 64px; }
#adminDefaultContent .help-table th, #adminDefaultContent .help-table td { white-space: nowrap; }
.modal-body { padding: 30px 28px 24px; text-align: center; overflow-y: auto; flex: 1 1 auto; }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 4; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 1rem; display: grid; place-items: center; transition: background .15s; }
.modal-close:hover { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--text); }

.modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; font-size: 1.9rem; background: linear-gradient(135deg, #2f7d32, #75a843); box-shadow: 0 10px 22px #1f5b2740; }
.modal-icon.start { background: linear-gradient(135deg, #166534, #65a30d); }
.modal-icon.danger { background: linear-gradient(135deg, #dc2626, #f59e0b); animation: dangerPulse 1.6s ease-in-out infinite; }
.modal-icon.dead { background: linear-gradient(135deg, #7f1d1d, #dc2626); }
.modal-icon.problem { background: linear-gradient(135deg, #a16207, #eab308); }
@keyframes dangerPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.modal h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 800; }
.modal-lead { margin: 0 auto 20px; max-width: 48ch; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.modal-options { display: grid; gap: 12px; text-align: left; }
.opt { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 15px 16px; border: 1.5px solid var(--line); border-radius: 15px; background: color-mix(in srgb, var(--panel) 92%, var(--bg)); transition: transform .16s, border-color .16s; }
.opt:hover { transform: translateY(-2px); border-color: var(--primary); }
.opt-emoji { font-size: 1.5rem; line-height: 1.2; flex: none; }
.opt-text { display: flex; flex-direction: column; gap: 3px; }
.opt-text strong { font-size: .98rem; font-weight: 800; } .opt-text small { font-size: .78rem; color: var(--muted); }
.modal-cancel { margin-top: 16px; border: 0; background: transparent; color: var(--muted); font-size: .85rem; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.modal-cancel:hover { color: var(--text); background: color-mix(in srgb, var(--muted) 14%, transparent); }

.date-field { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 4px auto 2px; max-width: 280px; }
.date-field label { font-size: .74rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.date-field input[type="date"] { min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font-size: 1.02rem; font-weight: 700; }
.date-hint { margin: 10px auto 0; max-width: 30ch; font-size: .78rem; color: var(--muted); }

.modal-field { display: flex; flex-direction: column; gap: 8px; text-align: left; margin: 4px auto 2px; max-width: 320px; }
.modal-field label { font-size: .74rem; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.modal-field input, .modal-field textarea { min-height: 46px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); font-size: 1rem; font-weight: 700; }
.modal-field input:focus, .modal-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px #2f7d3222; }
.modal-field textarea { min-height: 108px; padding: 12px 14px; resize: vertical; }

.btn-confirm-start { width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #166534, #4d7c0f); color: #fff; font-size: .95rem; font-weight: 800; box-shadow: 0 8px 18px #16653440; }
.btn-confirm-start:disabled { opacity: .42; cursor: not-allowed; }

.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.btn-back, .btn-destroy { flex: 1; min-height: 44px; border-radius: 12px; font-size: .9rem; font-weight: 800; border: 1px solid var(--line); text-align: center; justify-content: center; align-items: center; }
.btn-back { background: var(--panel); color: var(--text); }
.btn-back:disabled { opacity: .45; cursor: not-allowed; }
.btn-destroy { background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff; border-color: transparent; }
.btn-start-table { flex: 1.4; min-height: 44px; border-radius: 12px; border: 0; color: #fff; font-size: .9rem; font-weight: 800; background: linear-gradient(135deg, #166534, #4d7c0f); }
.btn-dead { background: linear-gradient(135deg, #7f1d1d, #dc2626) !important; }
.btn-problem { background: linear-gradient(135deg, #a16207, #eab308) !important; color: #1a1500 !important; }

/* --- FOTO --- */
.photo-preview-container { position: relative; width: 100%; min-height: 200px; background: rgba(0,0,0,.3); border-radius: 12px; overflow: hidden; margin: 16px 0; display: flex; align-items: center; justify-content: center; }
.photo-preview { max-width: 100%; max-height: 400px; display: block; border-radius: 8px; }
.photo-empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.photo-empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; opacity: .5; }
.photo-actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.photo-upload-btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.photo-camera-view { width: 100%; background: rgba(0,0,0,.3); border-radius: 12px; overflow: hidden; margin-bottom: 16px; padding: 14px; box-sizing: border-box; }
.photo-camera-video { width: 100%; max-height: 400px; display: block; border-radius: 8px; background: #000; }
.photo-camera-status { margin: 10px 0 0; text-align: center; color: var(--muted); font-size: .82rem; min-height: 1.1em; }
.photo-camera-actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }

/* --- AJUSTES MENU --- */
.settings-menu { position: fixed; z-index: 1500; min-width: 320px; max-height: min(82vh, 620px); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(160deg, #13301d, #0d2014); box-shadow: 0 24px 60px #00000077; transform-origin: top left; animation: settingsPop .2s cubic-bezier(.2,.85,.25,1) both; overflow-x: hidden; overflow-y: auto; }
.settings-menu[hidden] { display: none; }
@keyframes settingsPop { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
.settings-menu-section { padding: 6px 8px; }
.settings-menu-header { display: flex; align-items: center; gap: 8px; padding: 4px 12px 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--primary-glow); border-left: 3px solid var(--primary); margin-bottom: 3px; }
.settings-menu-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); margin: 1px 16px; opacity: .4; }
.settings-cat { padding: 6px 8px; }
.settings-cat-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 12px; font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--primary-glow); border: 0; border-left: 3px solid var(--primary); border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.settings-cat-header:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.settings-cat-chevron { transition: transform .15s ease; }
.settings-cat-header[aria-expanded="true"] .settings-cat-chevron { transform: rotate(90deg); }
.settings-cat-body { padding-top: 2px; }
.settings-cat-body[hidden] { display: none; }
.settings-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; position: relative; }
.settings-menu-item[hidden] { display: none !important; }
.settings-menu-item:hover { background: color-mix(in srgb, var(--primary) 18%, transparent); transform: translateX(3px); }
.settings-menu-item:disabled { opacity: .45; cursor: not-allowed; }
.settings-menu-item:disabled:hover { background: transparent; transform: none; }
.smi-ico { font-size: 1.25rem; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(63,163,74,.1); }
.smi-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.settings-menu-toggle input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.15); position: relative; cursor: pointer; margin: 0; transition: background .2s ease; }
.settings-menu-toggle input[type="checkbox"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.settings-menu-toggle input[type="checkbox"]:checked { background: var(--primary); }
.settings-menu-toggle input[type="checkbox"]:checked::before { transform: translateX(16px); }
.settings-menu-toggle:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.settings-menu-toggle:has(input:disabled):hover { background: transparent; transform: none; }
.settings-menu-toggle input:disabled { cursor: not-allowed; }
.smi-txt strong { font-size: .9rem; font-weight: 800; } .smi-txt small { font-size: .7rem; color: var(--muted); }

/* =========================================================
   MENÚ DE AJUSTES — reparto en 3 columnas EXPLÍCITAS (no el
   auto-balanceo de CSS columns, que mezclaba las categorías sin
   control) en vez de una lista vertical larga (18 opciones no
   cabían en pantalla). Columna 1 = Configuración + Copias de
   seguridad, columna 2 = Extras, columna 3 = Cuenta -agrupación
   fija por .settings-menu-col en el propio HTML, no por altura.
   Las categorías dejan de plegarse (siempre visibles, sin
   acordeón) y el submenú de Stock queda siempre desplegado bajo
   su cabecera, con sangría, en vez de necesitar un clic. Se
   mantiene el comportamiento original (una sola columna,
   acordeón normal) en pantallas estrechas.
   ========================================================= */
.settings-menu {
  min-width: 660px !important;
  max-width: 94vw;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.settings-menu-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.settings-cat, .settings-menu-divider { margin-bottom: 4px; }
/* Configuración, Extras y Cuenta se quedan siempre desplegadas
   (sin acordeón); Copias de seguridad y el submenú de Stock
   vuelven a su comportamiento nativo: plegadas por defecto,
   clic para desplegar. */
.settings-menu .settings-cat-body[hidden] { display: block !important; }
.settings-menu #catBackupBody[hidden] { display: none !important; }
.settings-menu .settings-cat-chevron { display: none; }
.settings-menu .settings-cat-header { cursor: default; }
.settings-menu .settings-cat-header:hover { background: transparent; }
.settings-menu #catBackupToggle .settings-cat-chevron { display: inline; }
.settings-menu #catBackupToggle { cursor: pointer; }
.settings-menu #catBackupToggle:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.settings-menu .settings-stock-subitem { padding-left: 34px; border: none; box-shadow: none; }
.settings-menu .settings-stock-subitem .smi-txt strong { font-size: .82rem; font-weight: 700; }
.settings-menu .settings-stock-subitem .smi-ico { box-shadow: none; border: none; }
.settings-menu .smi-txt small { display: none; }
@media (max-width: 720px) {
  .settings-menu { min-width: 320px !important; flex-direction: column; gap: 0; }
  .settings-menu-col { flex: none; width: 100%; }
  .settings-menu .settings-cat-chevron { display: inline; }
  .settings-menu .settings-cat-header { cursor: pointer; }
  .settings-menu .settings-cat-body[hidden] { display: none !important; }
  .settings-menu .smi-txt small { display: block; }
}

/* --- TOAST --- */
.toast { position: fixed; top: 50%; left: 50%; z-index: 3000; transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; background: linear-gradient(180deg, rgba(17,39,25,.98), rgba(10,22,16,.98)); border: 1px solid var(--primary-glow); color: #d6ffe4; font-weight: 700; padding: 13px 20px; border-radius: 13px; box-shadow: 0 16px 40px rgba(0,0,0,.5); display: flex; gap: 10px; align-items: center; max-width: min(560px, calc(100vw - 40px)); }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast .tk { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-glow); }

/* --- HELP --- */
.help-intro { padding: 14px 18px; background: rgba(63,163,74,.1); border-left: 4px solid var(--primary); border-radius: 10px; margin-bottom: 18px; }
.help-section { margin-bottom: 16px; padding: 16px 18px; background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 12px; text-align: left; }
.help-section h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 800; color: var(--primary-glow); }
.help-section p, .help-section li { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.help-section code { background: rgba(0,0,0,.4); padding: 1px 6px; border-radius: 5px; font-size: .8rem; color: var(--primary-glow); }

/* GP RANGE NOTICE — HOVER ONLY */
.range-warning,
.out-of-range,
.out-range,
.metric-warning,
.range-alert,
[data-range-warning] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.metric-field:hover .range-warning,
.metric-field:focus-within .range-warning,
.metric-field:hover .out-of-range,
.metric-field:focus-within .out-of-range,
.metric-field:hover .out-range,
.metric-field:focus-within .out-range,
.metric-field:hover .metric-warning,
.metric-field:focus-within .metric-warning,
.metric-field:hover .range-alert,
.metric-field:focus-within .range-alert,
.metric-field:hover [data-range-warning],
.metric-field:focus-within [data-range-warning],
.range-warning:hover,
.out-of-range:hover,
.out-range:hover,
.metric-warning:hover,
.range-alert:hover,
[data-range-warning]:hover {
  visibility: visible !important;
  opacity: 1 !important;
}

/* GP-REPORT-ACTIONS-V1: solo queda visible Imprimir */
#copyReport,#copyText,#copyReportText,#downloadTxt,#downloadText,#downloadReportTxt,
.copy-report,.copy-text,.download-txt,.download-text{display:none !important}

/* GP-REPORT-ACTIONS-V2 */
#historyContent button:has(+ *){} /* keep selector parser grouping stable */
#historyContent button[id*="copy" i],
#historyContent button[class*="copy" i],
#historyContent button[id*="download" i],
#historyContent button[class*="download" i]{display:none!important}

/* --- GP-LANGMODAL-1: selector de idioma ---
   Antes el grid de idiomas reutilizaba .opt (pensado para una lista
   vertical de tarjetas icono+texto a la izquierda) con un grid-template
   inline "1fr 1fr 1fr": como .opt no permite encoger su contenido por
   debajo del ancho del texto (nombres largos como "Português"/"English"),
   las columnas se salían del ancho de la tarjeta hacia la derecha. Aquí
   se fuerza min-width:0 en cada opción (para que sí puedan encoger dentro
   de su columna) y se centra el contenido en vez de dejarlo pegado a la
   izquierda. */
#langModal .lang-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
#langModal .opt.lang-opt { min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px; text-align: center; }
#langModal .opt.lang-opt .opt-emoji { flex: none; font-size: 1.6rem; line-height: 1; }
#langModal .opt.lang-opt .opt-emoji svg { display: block; margin: 0 auto; }
#langModal .opt.lang-opt .opt-text { min-width: 0; width: 100%; align-items: center; }
#langModal .opt.lang-opt .opt-text strong { display: block; width: 100%; font-size: .82rem; line-height: 1.25; overflow-wrap: break-word; }
#langModal .opt.lang-opt.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, transparent); }
#langModal .opt.lang-opt.active .opt-text strong { color: var(--primary-glow); }
@media (max-width: 420px) {
  #langModal .lang-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}