:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #16a34a;
    --danger: #dc2626;
    --bg: #f3f4f6;
    --card: #ffffff;
    --text: #1f2937;
    --border: #e5e7eb;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg); color: var(--text); line-height:1.5; overscroll-behavior-y:none;
}

.app-container { max-width:480px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }

header {
    background: var(--primary); color:white; padding:1.5rem 1rem; text-align:center;
    position:sticky; top:0; z-index:10; box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
header h1 { font-size:1.5rem; margin-bottom:0.25rem; }
.subheader { font-size:0.9rem; opacity:0.9; }
.badge {
    display:inline-block; background:rgba(255,255,255,0.2);
    padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.875rem; font-weight:600;
}

main { flex:1; padding:1rem; display:flex; flex-direction:column; gap:1rem; }

.card {
    background: var(--card); border-radius:1rem; padding:1.25rem;
    box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
label {
    display:block; font-weight:600; margin-bottom:0.5rem; color:#374151;
    font-size:0.875rem; text-transform:uppercase; letter-spacing:0.05em;
}
input, select {
    width:100%; padding:0.875rem; border:2px solid var(--border); border-radius:0.75rem;
    font-size:1rem; transition:border-color 0.2s; background:white;
}
input:focus, select:focus { outline:none; border-color:var(--primary); }

.gps-status {
    display:flex; align-items:center; gap:0.75rem; padding:1rem;
    background:#dbeafe; border-radius:0.75rem; color:#1e40af; font-weight:500;
}
.gps-status.error { background:#fee2e2; color:#991b1b; }
.gps-status.success { background:#dcfce7; color:#166534; }
.gps-detalles { margin-top:0.75rem; font-size:0.875rem; color:#6b7280; }

.foto-card input[type="file"] {
    padding:0.75rem; border:2px dashed var(--border); border-radius:0.75rem;
    background:#fafafa; cursor:pointer; width:100%;
}
.foto-preview {
    width:100%; max-height:200px; object-fit:cover; border-radius:0.75rem;
    margin-top:0.75rem; border:1px solid var(--border);
}
.foto-info {
    margin-top:0.5rem; font-size:0.8rem; color:#6b7280; text-align:center;
}

.btn-primary {
    width:100%; padding:1rem; background:var(--primary); color:white; border:none;
    border-radius:0.75rem; font-size:1.125rem; font-weight:600; cursor:pointer;
    transition:all 0.2s; box-shadow:0 4px 6px -1px rgba(37,99,235,0.2);
}
.btn-primary:active { transform:scale(0.98); background:var(--primary-dark); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }

.btn-secondary {
    display:block; width:100%; padding:0.75rem; background:white; color:var(--primary);
    border:2px solid var(--border); border-radius:0.75rem; font-size:0.875rem;
    font-weight:600; cursor:pointer; text-align:center; text-decoration:none;
}

/* Botón de paginación */
.btn-pag {
    background: #e5e7eb; border: none; padding: 0.4rem 0.75rem;
    border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem;
}
.btn-pag:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-pag:not(:disabled):hover { background: #d1d5db; }

.mensaje {
    padding:1rem; border-radius:0.75rem; text-align:center; font-weight:500;
    animation:slideIn 0.3s ease;
}
.mensaje.success { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.mensaje.error { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.hidden { display:none !important; }

.area-info {
    margin-top:0.75rem; padding:0.75rem; background:#f9fafb;
    border-radius:0.5rem; font-size:0.875rem; color:#4b5563;
}

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.stat-card {
    background:var(--card); padding:1.25rem; border-radius:1rem;
    text-align:center; box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.stat-card h3 { font-size:0.875rem; color:#6b7280; margin-bottom:0.5rem; }
.stat-card p { font-size:1.875rem; font-weight:700; color:var(--primary); }

.table-container { overflow-x:auto; margin-top:1rem; }
table { width:100%; border-collapse:collapse; font-size:0.875rem; }
th, td { padding:0.75rem; text-align:left; border-bottom:1px solid var(--border); }
th { font-weight:600; color:#6b7280; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.05em; }
tr:hover { background:#f9fafb; }
.foto-thumb { width:60px; height:45px; object-fit:cover; border-radius:0.25rem; cursor:pointer; border:1px solid var(--border); }

@keyframes slideIn {
    from { opacity:0; transform:translateY(-10px); }
    to { opacity:1; transform:translateY(0); }
}