* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body { background: #F1F5F9; color: #0F172A; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px 12px; }
.container { width: 100%; max-width: 480px; background: #FFFFFF; border-radius: 16px; padding: 24px; box-shadow: 0 4px 20px rgba(15,23,42,0.06); border: 1px solid #CBD5E1; }
.header { text-align: center; margin-bottom: 20px; }
.logo-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #EFF6FF; border: 2px solid #1E40AF; border-radius: 14px; margin-bottom: 12px; font-size: 26px; }
.title { font-size: 20px; font-weight: 700; color: #0F172A; letter-spacing: 0.5px; }
.subtitle { font-size: 13px; color: #475569; margin-top: 4px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; margin-bottom: 5px; letter-spacing: 0.5px; }
.form-control { width: 100%; padding: 12px 14px; background: #F8FAFC; border: 1.5px solid #CBD5E1; border-radius: 8px; color: #0F172A; font-size: 15px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
.form-control.textarea-single-line { resize: none; overflow: hidden; white-space: nowrap; height: 46px; line-height: 20px; font-family: inherit; }
.form-control:focus { border-color: #1E40AF; box-shadow: 0 0 0 2px rgba(30,64,175,0.2); background: #FFFFFF; }
.form-control[readonly] { background: #F1F5F9; color: #64748B; cursor: not-allowed; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-primary { width: 100%; padding: 14px; background: #1E40AF; color: #FFFFFF; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 10px; }
.btn-primary:hover { background: #1E3A8A; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { width: 100%; padding: 12px; background: #E2E8F0; color: #1E293B; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s; }
.btn-secondary:hover { background: #CBD5E1; color: #0F172A; }
.alert-card { padding: 14px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; line-height: 1.4; }
.alert-info { background: #EFF6FF; border-left: 4px solid #1E40AF; color: #1E40AF; border: 1px solid #DBEAFE; border-left-width: 4px; }
.alert-error { background: #FEF2F2; border-left: 4px solid #EF4444; color: #B91C1C; border: 1px solid #FEE2E2; border-left-width: 4px; }
.alert-success { background: #ECFDF5; border-left: 4px solid #10B981; color: #047857; border: 1px solid #D1FAE5; border-left-width: 4px; }
.progress-box { display: none; margin: 12px 0; background: #F8FAFC; border-radius: 8px; padding: 10px; border: 1px solid #CBD5E1; }
.progress-bar-bg { width: 100%; height: 8px; background: #E2E8F0; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.progress-bar-fill { height: 100%; width: 0%; background: #1E40AF; transition: width 0.3s; }
.image-preview { max-width: 100%; max-height: 180px; border-radius: 8px; margin-top: 10px; display: none; object-fit: contain; background: #F8FAFC; border: 1px solid #CBD5E1; }

/* Galería Horizontal Deslizable de Capturas TAMIR */
.tamir-gallery-wrapper { display: none; margin: 12px 0 16px 0; }
.tamir-gallery-title { font-size: 11px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.tamir-gallery-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #1E40AF #F1F5F9; }
.tamir-gallery-scroll::-webkit-scrollbar { height: 6px; }
.tamir-gallery-scroll::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 4px; }
.tamir-gallery-scroll::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
.tamir-photo-card { flex: 0 0 125px; width: 125px; height: 175px; position: relative; border-radius: 10px; overflow: hidden; border: 1.5px solid #CBD5E1; background: #F8FAFC; scroll-snap-align: start; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.tamir-photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tamir-card-badge { position: absolute; top: 6px; left: 6px; background: rgba(15, 23, 42, 0.85); color: #FFFFFF; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.3); }
.tamir-delete-card-btn { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; background: rgba(239, 68, 68, 0.9); color: #FFFFFF; border: none; border-radius: 50%; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.2s; }
.tamir-delete-card-btn:hover { background: #DC2626; }
.tamir-add-card { flex: 0 0 125px; width: 125px; height: 175px; border-radius: 10px; border: 2px dashed #1E40AF; background: rgba(30, 64, 175, 0.05); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; scroll-snap-align: start; transition: background 0.2s, transform 0.1s, border-color 0.2s; user-select: none; }
.tamir-add-card:hover { background: rgba(30, 64, 175, 0.12); border-color: #1E3A8A; }
.tamir-add-card:active { transform: scale(0.97); }
.tamir-add-icon { font-size: 38px; color: #1E40AF; font-weight: 300; line-height: 1; margin-bottom: 6px; }
.tamir-add-text { font-size: 11px; color: #0F172A; font-weight: 600; text-align: center; padding: 0 8px; line-height: 1.2; }

/* Secciones Tácticas del Formulario TAMIR */
.section-title { font-size: 11px; font-weight: 800; color: #1E40AF; text-transform: uppercase; letter-spacing: 0.8px; margin: 20px 0 10px 0; display: flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1.5px solid #E2E8F0; }
.sugerencias-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #FFFFFF; border: 1.5px solid #1E40AF; border-radius: 8px; max-height: 250px; overflow-y: auto; z-index: 999; box-shadow: 0 10px 25px rgba(0,0,0,0.12); margin-top: 4px; -webkit-overflow-scrolling: touch; }
.sugerencia-item { padding: 10px 12px; font-size: 13px; color: #0F172A; cursor: pointer; border-bottom: 1px solid #F1F5F9; display: flex; align-items: center; gap: 8px; transition: background 0.15s; }
.sugerencia-item:hover { background: #EFF6FF; color: #1E40AF; }
.tag-chip { display: inline-flex; align-items: center; gap: 6px; background: #EFF6FF; border: 1px solid #1E40AF; color: #1E40AF; padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.tag-chip-del { background: transparent; border: none; color: #EF4444; cursor: pointer; font-size: 14px; font-weight: bold; padding: 0 2px; line-height: 1; transition: color 0.15s; }
.tag-chip-del:hover { color: #DC2626; }
.item-dinamico-row { display: flex; align-items: center; justify-content: space-between; background: #F8FAFC; border: 1.5px solid #E2E8F0; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #0F172A; transition: border-color 0.2s; }
.item-dinamico-row:hover { border-color: #1E40AF; }
.item-dinamico-del { background: transparent; border: none; color: #EF4444; cursor: pointer; font-size: 16px; font-weight: bold; padding: 2px 6px; line-height: 1; }
.footer { text-align: center; margin-top: 24px; font-size: 11px; color: #64748B; letter-spacing: 0.5px; }
.loading-spinner { width: 32px; height: 32px; border: 3px solid rgba(30,64,175,0.2); border-top-color: #1E40AF; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 20px auto; }
.btn-spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }