/* =============================================================
MAPA — Mapa de Operaciones
MIPROMA Design System v2 — Fase G
Vanilla CSS, mobile-first.
============================================================= */
:root {
/* Marca Miproma (Fase G) */
--primary: #134838;
--primary-dark: #0a2e21;
--primary-light: #1e6b54;
--accent: #cf865c;
/* Brand aliases (legacy compat — pre-Fase G) */
--color-primary: #134838;
--color-primary-hover: #0D3328;
--color-primary-soft: #E8EFEB;
--color-accent: #cf865c;
--color-accent-hover: #B96E47;
--color-emblem-purple: #6C6C9F;
--color-emblem-red: #E7141A;
/* Neutros (Fase G) */
--bg: #f7f7f5;
--color-surface: #fff;
--color-surface-2: #fafafa;
--color-text: #0f172a;
--color-text-muted: #64748b;
--muted: #64748b;
--color-text-muted-2: #94a3b8;
--color-border: #e5e7eb;
--color-border-strong: #cbd5e1;
/* Legacy neutro aliases */
--color-bg: #f7f7f5;
--color-surface-muted: #fafafa;
--color-text-faint: #94a3b8;
/* Estados visita (Fase G) */
--ec-curso: #f59e0b;
--ec-curso-bg: #fef3c7;
--ec-curso-text: #92400e;
--ec-plan: #3b82f6;
--ec-plan-bg: #dbeafe;
--ec-plan-text: #1e40af;
--ec-atras: #dc2626;
--ec-atras-bg: #fee2e2;
--ec-atras-text: #991b1b;
--ec-comp: #10b981;
--ec-comp-bg: #d1fae5;
--ec-comp-text: #065f46;
/* Severidad puntos plano */
--sev-0: #10b981;
--sev-3: #f59e0b;
--sev-6: #3b82f6;
--sev-9: #dc2626;
/* Condition puntos mapa */
--cond-sin: #9ca3af;
--cond-agua: #3b82f6;
--cond-larvas: #dc2626;
/* Status (legacy compat — pre-Fase G) */
--color-status-pendiente: #64748B;
--color-status-en_curso: #B45309;
--color-status-hecho: #0F766E;
--color-status-descartado: #94A3B8;
/* Priority (legacy compat) */
--color-priority-alta: #E7141A;
--color-priority-media: #B45309;
--color-priority-baja: #0F766E;
/* Danger (legacy compat) */
--color-danger: #E7141A;
--color-danger-soft: #FCE3E4;
/* Spacing scale (Fase G) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
/* Legacy spacing aliases (kept to not break pre-Fase G rules) */
--space-10: 40px;
--space-12: 48px;
/* Type scale (Fase G) */
--fs-xs: 11px;
--fs-sm: 12px;
--fs-md: 13px;
--fs-base: 14px;
--fs-lg: 16px;
--fs-xl: 18px;
--fs-2xl: 22px;
--fs-3xl: 28px;
/* Radius (Fase G) */
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 14px;
--radius-pill: 9999px;
/* Shadows (Fase G) */
--shadow-sm: 0 1px 2px rgba(15,23,42,.04);
--shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04);
--shadow-lg: 0 4px 8px rgba(15,23,42,.06), 0 24px 48px rgba(15,23,42,.08);
/* Topbar */
--topbar-h: 56px;
}
/* ----- Reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
font-size: var(--fs-base);
line-height: 1.5;
color: var(--color-text);
background: var(--bg);
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--color-text); }
h1 { font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; }
h2 { font-size: var(--fs-lg); line-height: 1.4; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-base); line-height: 1.5; }
p { margin: 0; }
/* Type utilities */
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
/* Icons (Lucide inline SVGs). Sized to surrounding font by default. */
.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
flex-shrink: 0;
}
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.brand-mark {
display: inline-block;
flex-shrink: 0;
border-radius: var(--radius);
}
/* ----- Layout ----- */
.main { min-height: 100%; }
body.full-map .main { position: fixed; inset: var(--topbar-h) 0 0 0; }
body.has-topbar .main { padding-top: var(--topbar-h); }
body.full-map.has-topbar .main { padding-top: 0; }
/* =============================================================
TOPBAR
============================================================= */
.topbar {
position: sticky;
top: 0;
height: var(--topbar-h);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-4);
z-index: 1000;
}
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-text);
text-decoration: none;
flex-shrink: 0;
}
.brand:hover { text-decoration: none; color: var(--color-text); }
.brand-text {
display: inline-flex;
flex-direction: column;
line-height: 1;
min-width: 0;
}
.brand-title {
font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-accent);
line-height: 1;
white-space: nowrap;
}
.brand-subtitle {
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
letter-spacing: 0.04em;
margin-top: 3px;
line-height: 1;
white-space: nowrap;
}
@media (max-width: 480px) {
.brand-subtitle { display: none; }
}
.topbar-spacer { flex: 1; }
.topbar-nav {
display: none; /* desktop only */
align-items: center;
gap: var(--space-1);
}
.topbar-nav a {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
color: var(--color-text-muted);
font-size: var(--fs-sm);
font-weight: 500;
}
.topbar-nav a:hover {
background: var(--color-surface-muted);
color: var(--color-text);
text-decoration: none;
}
.topbar-nav a.is-active {
color: var(--color-primary);
background: var(--color-primary-soft);
}
.user-chip {
display: none; /* desktop only */
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-2);
font-size: var(--fs-sm);
}
.user-chip-name {
color: var(--color-text);
font-weight: 500;
}
.user-chip-role {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.icon-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
border-radius: var(--radius);
color: var(--color-text-muted);
transition: background 120ms ease, color 120ms ease;
}
.icon-btn:hover { background: var(--color-surface-muted); color: var(--color-text); }
.icon-btn:active { background: var(--color-border); }
.icon-btn .icon { width: 20px; height: 20px; }
.topbar-menu { /* visible on mobile only */ }
.topbar-filters { /* visible on map view */ }
/* Desktop adjustments */
@media (min-width: 700px) {
.topbar { padding: 0 var(--space-6); }
.topbar-nav { display: inline-flex; }
.user-chip { display: inline-flex; }
.topbar-menu { display: none; }
}
/* =============================================================
SIDE MENU (mobile drawer)
============================================================= */
.side-menu {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 84%;
max-width: 320px;
background: var(--color-surface);
box-shadow: var(--shadow-lg);
padding: var(--space-4);
z-index: 1100;
display: flex;
flex-direction: column;
gap: var(--space-2);
overflow-y: auto;
}
.side-menu[hidden] { display: none; }
.side-menu-close {
align-self: flex-end;
width: 40px; height: 40px;
background: transparent;
border: 0;
border-radius: var(--radius);
color: var(--color-text-muted);
display: inline-flex; align-items: center; justify-content: center;
}
.side-menu-close:hover { background: var(--color-surface-muted); color: var(--color-text); }
.side-menu-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-2);
}
.side-menu-avatar {
width: 40px; height: 40px;
border-radius: var(--radius-pill);
background: var(--color-surface-muted);
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: 0.02em;
flex-shrink: 0;
}
.side-menu-user {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.side-menu-user-name {
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text);
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.side-menu-user-email {
font-size: var(--fs-xs);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.side-menu a,
.side-menu button.btn-link {
display: flex;
align-items: center;
gap: var(--space-3);
height: 48px;
padding: 0 var(--space-3);
border-radius: var(--radius);
color: var(--color-text);
font-size: var(--fs-base);
font-weight: 500;
text-decoration: none;
border: 0;
background: transparent;
width: 100%;
text-align: left;
}
.side-menu a:hover,
.side-menu button.btn-link:hover {
background: var(--color-surface-muted);
color: var(--color-text);
text-decoration: none;
}
.side-menu a .icon,
.side-menu button.btn-link .icon {
width: 20px; height: 20px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.side-menu a:hover .icon,
.side-menu button.btn-link:hover .icon {
color: var(--color-primary);
}
.side-menu form { margin: 0; padding: 0; }
/* =============================================================
FORMS / FIELDS
============================================================= */
.form-stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* El atributo hidden DEBE ganar sobre cualquier display de clase */
.field[hidden], [hidden] { display: none !important; }
.field > label {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.field input[type=text],
.field input[type=email],
.field input[type=password],
.field input[type=date],
.field input[type=time],
.field input[type=number],
.field input[type=tel],
.field input[type=search],
.field input[type=url],
.field input[type=file],
.field textarea,
.field select {
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--fs-md); /* ≥16px stops iOS zoom */
line-height: 1.4;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--color-text-faint);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field input[type=file] {
padding: var(--space-2) var(--space-3);
font-size: var(--fs-sm);
}
.field textarea { min-height: 96px; resize: vertical; }
.field select { appearance: none; padding-right: var(--space-8);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
}
/* =============================================================
BUTTONS (Fase G)
============================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 10px 16px;
border: 0;
border-radius: var(--radius);
background: var(--primary);
color: #fff;
font-size: var(--fs-base);
font-weight: 600;
cursor: pointer;
transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
white-space: nowrap;
text-decoration: none;
}
.btn:hover { background: var(--primary-light); color: #fff; text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 16px; height: 16px; }
/* Loading state on buttons (saving an arqueta, posting a comment, etc.) */
.btn.is-loading { opacity: 0.85; cursor: progress; }
.btn .spinner {
width: 16px; height: 16px;
border-radius: 50%;
border: 2px solid currentColor;
border-right-color: transparent;
animation: spin 720ms linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn-primary { /* alias */ }
.btn-sm { padding: 6px 12px; font-size: var(--fs-md); }
.btn-lg { padding: 14px 20px; font-size: var(--fs-lg); border-radius: 12px; }
.btn-xl { padding: 16px 22px; font-size: var(--fs-lg); border-radius: 12px; width: 100%; box-shadow: 0 4px 12px rgba(19,72,56,.25); }
.btn-secondary {
background: var(--color-surface);
color: var(--primary);
border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-2); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--primary); padding: 8px 12px; }
.btn-ghost:hover { background: rgba(19,72,56,.06); color: var(--primary); }
.btn-danger { background: var(--ec-atras); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
/* "Toca de nuevo para confirmar" state — fully red, no ambiguity. */
.btn-danger.is-armed {
background: var(--ec-atras);
color: #fff;
animation: pulse-danger 1.6s ease-in-out infinite;
}
@keyframes pulse-danger {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
.btn-link {
background: transparent;
color: var(--primary);
padding: 4px 8px;
font-size: var(--fs-md);
font-weight: 600;
border: 0;
}
.btn-link:hover { text-decoration: underline; color: var(--primary); }
.btn-link[disabled] {
color: var(--color-text-faint);
cursor: not-allowed;
text-decoration: none;
}
.btn-link-danger { color: var(--ec-atras); }
.btn-link-danger:hover { color: #991b1b; text-decoration: underline; }
.btn-link-danger[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-block { width: 100%; }
.fab-btn {
position: fixed;
right: var(--space-4);
bottom: 80px;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary);
color: #fff;
border: 0;
box-shadow: 0 8px 20px rgba(19,72,56,.4);
display: grid;
place-items: center;
z-index: 50;
}
.icon-btn {
width: 36px;
height: 36px;
border-radius: var(--radius);
background: transparent;
border: 0;
display: grid;
place-items: center;
color: var(--color-text-muted);
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
/* =============================================================
CHIPS (toggle groups — rectangular, not pill)
============================================================= */
.chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.chip {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--fs-sm);
font-weight: 500;
line-height: 1;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip:hover {
background: var(--color-surface-muted);
border-color: var(--color-border-strong);
}
.chip[aria-pressed="true"] {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
/* =============================================================
TAGS / BADGES (rectangular, status + priority)
============================================================= */
.tag {
display: inline-flex;
align-items: center;
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
font-size: var(--fs-xs);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.01em;
white-space: nowrap;
text-transform: capitalize;
}
/* Status: translucent-tinted background with saturated text. */
.tag-pendiente { background: rgba(100, 116, 139, 0.12); color: var(--color-status-pendiente); }
.tag-en_curso { background: rgba(180, 83, 9, 0.12); color: var(--color-status-en_curso); }
.tag-hecho { background: rgba(15, 118, 110, 0.12); color: var(--color-status-hecho); }
.tag-descartado { background: rgba(148, 163, 184, 0.18); color: var(--color-status-descartado); }
/* Priority */
.tag-alta { background: rgba(231, 20, 26, 0.12); color: var(--color-priority-alta); }
.tag-media { background: rgba(180, 83, 9, 0.12); color: var(--color-priority-media); }
.tag-baja { background: rgba(15, 118, 110, 0.12); color: var(--color-priority-baja); }
/* =============================================================
FLASH MESSAGES
============================================================= */
.flash {
padding: var(--space-3) var(--space-4);
font-size: var(--fs-sm);
font-weight: 500;
border-bottom: 1px solid var(--color-border);
}
.flash-error { background: var(--color-danger-soft); color: var(--color-danger); }
.flash-ok { background: rgba(15, 118, 110, 0.12); color: var(--color-status-hecho); }
/* =============================================================
AUTH PAGES
============================================================= */
.auth-shell {
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6) var(--space-4);
background: var(--color-bg);
}
.auth-card {
width: 100%;
max-width: 420px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: var(--space-8);
}
.auth-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.auth-header h1 {
font-size: var(--fs-xl);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
margin: 0;
}
.auth-subtitle {
font-size: var(--fs-sm);
color: var(--color-text-muted);
margin: 0;
}
.auth-subtitle strong {
color: var(--color-text);
font-weight: 600;
}
.auth-card .form-stack { gap: var(--space-4); }
.auth-card .btn { width: 100%; margin-top: var(--space-2); }
.auth-footer {
margin-top: var(--space-6);
text-align: center;
font-size: var(--fs-xs);
color: var(--color-text-faint);
letter-spacing: 0.04em;
}
/* =============================================================
MAP VIEW
============================================================= */
#map { height: 100%; width: 100%; background: var(--color-surface-muted); }
/* Action bar — locate + plus, joined as a single pill. */
.fab-bar {
position: fixed;
right: var(--space-4);
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
display: inline-flex;
align-items: stretch;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 24px;
box-shadow: var(--shadow);
overflow: hidden;
z-index: 800;
}
.fab-bar > .fab + .fab { border-left: 1px solid var(--color-border); }
.fab {
width: 48px;
height: 48px;
background: var(--color-surface);
border: 0;
color: var(--color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 120ms ease, color 120ms ease;
}
.fab:hover { background: var(--color-surface-muted); color: var(--color-primary-hover); }
.fab:active { background: var(--color-border); }
.fab .icon { width: 22px; height: 22px; stroke-width: 2; }
/* Legacy single-FAB (kept so existing JS that targets .fab keeps working). */
.fabs {
position: fixed;
right: var(--space-4);
bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
gap: var(--space-3);
z-index: 800;
}
/* Leaflet layer-control: corporate segmented look. */
.leaflet-top.leaflet-right { padding: var(--space-3); }
.mapa-layers-control.leaflet-control-layers,
.leaflet-control-layers {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 0;
overflow: hidden;
}
.leaflet-control-layers-expanded {
padding: var(--space-1);
}
.leaflet-control-layers-list {
display: flex;
flex-direction: row;
gap: 0;
}
.leaflet-control-layers-base label {
margin: 0;
padding: 6px var(--space-3);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 120ms ease, color 120ms ease;
display: inline-flex;
align-items: center;
line-height: 1;
}
.leaflet-control-layers-base label:hover {
background: var(--color-surface-muted);
color: var(--color-text);
}
.leaflet-control-layers-base label input[type=radio] {
/* hide native radio, use label state */
position: absolute;
opacity: 0;
pointer-events: none;
}
.leaflet-control-layers-base label span { padding-left: 0; }
.leaflet-control-layers-base label:has(input:checked) {
background: var(--color-primary);
color: #fff;
}
.leaflet-control-layers-separator { display: none; }
/* Pin tooltip (provisional pin hint) */
.leaflet-tooltip.leaflet-tooltip-top {
background: var(--color-primary);
color: #fff;
border: 0;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-sm);
padding: 4px var(--space-2);
font-size: var(--fs-xs);
font-weight: 500;
}
.leaflet-tooltip.leaflet-tooltip-top::before {
border-top-color: var(--color-primary);
}
/* Leaflet zoom control — softer corporate style */
.leaflet-bar a {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border) !important;
}
.leaflet-bar a:hover {
background: var(--color-surface-muted);
}
/* Pin SVG container — strip default leaflet div padding */
.mapa-pin, .mapa-temp-pin {
background: transparent !important;
border: 0 !important;
}
/* =============================================================
BOTTOM SHEETS
============================================================= */
.sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
max-height: 85vh;
background: var(--color-surface);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
box-shadow: var(--shadow-lg);
transform: translateY(100%);
transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
overflow-y: auto;
z-index: 1200;
padding: var(--space-6);
padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}
.sheet[aria-hidden="false"] { transform: translateY(0); }
.sheet-handle {
width: 32px;
height: 4px;
background: var(--color-border-strong);
border-radius: var(--radius-pill);
margin: 0 auto var(--space-4);
}
.sheet-header {
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.sheet-header h2 {
margin: 0;
flex: 1 1 auto;
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: -0.01em;
color: var(--color-text);
min-width: 0;
}
.sheet-header .tag { flex-shrink: 0; }
.sheet-header .icon-btn { flex-shrink: 0; }
.sheet-actions {
display: flex;
gap: var(--space-2);
margin-top: var(--space-6);
flex-wrap: wrap;
}
.sheet-actions .btn { flex: 1 1 auto; }
.sheet-actions .btn:last-child:first-child { flex: 0 1 auto; }
.sheet-backdrop {
position: fixed; inset: 0;
background: rgba(15, 23, 42, 0.45);
z-index: 1150;
display: none;
}
.sheet-backdrop[data-open="true"] { display: block; }
/* Detail sheet — comments and meta blocks */
.sheet img {
width: 100%;
max-height: 240px;
object-fit: cover;
border-radius: var(--radius);
margin: var(--space-2) 0;
display: block;
}
.detail-photos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-2);
margin: var(--space-2) 0;
}
.detail-photos a {
display: block;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border);
line-height: 0;
}
.detail-photos img {
margin: 0;
border-radius: 0;
aspect-ratio: 4 / 3;
transition: transform 200ms ease;
}
.detail-photos a:hover img,
.detail-photos a:active img {
transform: scale(1.03);
}
.sheet p { margin: var(--space-2) 0; color: var(--color-text); font-size: var(--fs-base); }
.sheet p strong { font-weight: 600; }
.sheet p em { color: var(--color-text-muted); font-style: normal; }
.sheet h3 {
margin-top: var(--space-6);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sheet [data-role="comments"] {
margin-top: var(--space-2);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.sheet [data-role="comments"] > div {
border-top: 1px solid var(--color-border) !important;
padding: var(--space-3) 0 !important;
}
.sheet [data-role="comments"] > div:first-child { border-top: 0 !important; }
.sheet [data-role="comments"] strong {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-text);
}
.sheet [data-role="comments"] span {
color: var(--color-text-faint) !important;
font-size: var(--fs-xs) !important;
margin-left: var(--space-1);
}
.sheet [data-role="comments"] > div > div {
margin-top: var(--space-1);
font-size: var(--fs-sm);
color: var(--color-text);
}
/* =============================================================
LIST VIEW
============================================================= */
.page-container {
padding: var(--space-4);
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 700px) {
.page-container { padding: var(--space-6); }
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.page-header h1 {
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: -0.01em;
}
.list-table-wrap {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: var(--shadow-sm);
/* Scrollbar siempre visible (no solo al hacer hover en macOS) — si el
contenido no cabe el usuario necesita verla para saber que puede
arrastrar. */
scrollbar-width: thin;
scrollbar-color: var(--color-border-strong, #cbd5e1) transparent;
}
.list-table-wrap::-webkit-scrollbar { height: 10px; }
.list-table-wrap::-webkit-scrollbar-track { background: transparent; }
.list-table-wrap::-webkit-scrollbar-thumb {
background: var(--color-border-strong, #cbd5e1);
border-radius: 5px;
border: 2px solid var(--color-surface);
}
/* Columna de acciones compacta y pegada a la derecha visualmente. No usamos
position:sticky porque la sombra/fondo opaco daban sensación de columna
flotando aunque no hubiera scroll horizontal — el contenedor ya scrollea
si hace falta y los iconos son lo bastante pequeños para caber. */
.list-table .col-actions {
text-align: right;
white-space: nowrap;
width: 1%; /* truco: width:1% en tabla = "ocupa lo justo" */
}
/* Botones de acción compactos: icon-only en escritorio para que el bloque
completo de acciones quepa siempre dentro del viewport. Tamaño y contraste
pensados para que el ojo los registre como botones (no como decoraciones). */
.icon-btn-sm {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
background: #fff; border: 1px solid var(--color-border, #e5e7eb); border-radius: 8px;
color: #334155;
cursor: pointer; padding: 0; margin-left: 4px;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
transition: background .12s ease, color .12s ease, border-color .12s ease, transform .08s ease;
}
.icon-btn-sm svg { display: block; }
.icon-btn-sm:hover {
background: var(--primary, #134838);
color: #fff;
border-color: var(--primary, #134838);
}
.icon-btn-sm:active { transform: scale(.94); }
.icon-btn-sm.icon-btn-danger { color: #b91c1c; }
.icon-btn-sm.icon-btn-danger:hover {
background: #dc2626; color: #fff; border-color: #dc2626;
}
/* Inputs editables en línea dentro de tablas (maestros · plagas).
Replican el aspecto de .field input para que la edición no parezca un
formulario HTML crudo. */
.inline-edit {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--color-border-strong, #cbd5e1);
border-radius: 6px;
background: var(--color-surface, #fff);
color: var(--color-text, #0f172a);
font: inherit;
font-size: var(--fs-sm, 14px);
line-height: 1.4;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.inline-edit:focus {
outline: none;
border-color: var(--color-primary, #134838);
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(19, 72, 56, .15));
}
.inline-edit-check {
width: 18px; height: 18px;
accent-color: var(--color-primary, #134838);
cursor: pointer;
margin: 0;
}
.cell-center { text-align: center; }
/* Form inline para añadir filas (Nuevo sub-tipo, etc.). */
.form-inline {
display: flex;
gap: 8px;
align-items: stretch;
padding: var(--space-3, 12px) var(--space-4, 16px);
border-top: 1px solid var(--color-border, #e5e7eb);
background: var(--color-surface-muted, #f8fafc);
}
.form-inline input[type=text],
.form-inline input[type=search],
.form-inline input[type=email],
.form-inline input[type=tel] {
flex: 1;
padding: 8px 10px;
border: 1px solid var(--color-border-strong, #cbd5e1);
border-radius: 6px;
background: #fff;
color: var(--color-text, #0f172a);
font: inherit;
font-size: var(--fs-sm, 14px);
line-height: 1.4;
}
.form-inline input:focus {
outline: none;
border-color: var(--color-primary, #134838);
box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(19, 72, 56, .15));
}
.list-table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface);
}
.list-table thead th {
position: sticky;
top: var(--topbar-h);
background: var(--color-surface-muted);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 1px 0 var(--color-border);
padding: var(--space-3) var(--space-4);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: left;
z-index: 1;
}
.list-table tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
font-size: var(--fs-sm);
color: var(--color-text);
vertical-align: middle;
min-height: 56px;
}
.list-table tbody tr {
transition: background 100ms ease;
}
.list-table tbody tr:hover { background: var(--color-surface-muted); cursor: pointer; }
.list-table tbody tr:last-child td { border-bottom: 0; }
/* Priority stripe — left border on first cell */
.list-table .priority-stripe {
border-left: 3px solid var(--color-border);
}
.list-table .priority-alta { border-left-color: var(--color-priority-alta); }
.list-table .priority-media { border-left-color: var(--color-priority-media); }
.list-table .priority-baja { border-left-color: var(--color-priority-baja); }
.list-table .col-title {
font-weight: 500;
color: var(--color-text);
max-width: 320px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.list-empty {
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
.list-empty .icon {
width: 40px; height: 40px;
color: var(--color-text-faint);
margin-bottom: var(--space-3);
}
.list-empty p { margin-bottom: var(--space-4); }
/* =============================================================
ADMIN — USERS
============================================================= */
.admin-table thead th { position: static; }
.admin-table .col-actions { text-align: right; white-space: nowrap; }
.admin-table select[data-action="set-role"] {
height: 36px;
padding: 0 var(--space-6) 0 var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background-color: var(--color-surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--space-2) center;
appearance: none;
font-size: var(--fs-sm);
color: var(--color-text);
}
.admin-table select[data-action="set-role"]:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.admin-table select[disabled] {
color: var(--color-text-faint);
background-color: var(--color-surface-muted);
cursor: not-allowed;
}
/* iOS-style toggle for activo */
.toggle {
position: relative;
display: inline-block;
width: 40px;
height: 24px;
cursor: pointer;
}
.toggle input {
appearance: none;
-webkit-appearance: none;
width: 100%; height: 100%;
margin: 0;
border-radius: var(--radius-pill);
background: var(--color-border-strong);
transition: background 150ms ease;
cursor: pointer;
border: 0;
}
.toggle input:checked { background: var(--color-status-hecho); }
.toggle input:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: var(--radius-pill);
background: #fff;
box-shadow: var(--shadow-sm);
transition: transform 150ms ease;
pointer-events: none;
}
.toggle input:checked + ::before,
.toggle:has(input:checked)::after {
transform: translateX(16px);
}
.admin-empty {
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
/* Mobile/tablet: turn the admin table into stacked cards (tabla 5-cols no cabe). */
@media (max-width: 900px) {
.admin-table thead { display: none; }
.admin-table,
.admin-table tbody,
.admin-table tr,
.admin-table td { display: block; width: 100%; }
.admin-table tbody tr {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.admin-table tbody tr:last-child { border-bottom: 0; }
.admin-table tbody tr:hover { background: transparent; cursor: default; }
.admin-table tbody td {
padding: var(--space-1) 0;
border-bottom: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
/* En mobile la tabla se apila — acciones alineadas a la derecha como
una fila más, no flotando ni pegadas. */
.list-table tbody td.col-actions {
text-align: left;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Row 1: Name (full width, large) */
.admin-table tbody td.col-title {
max-width: none;
white-space: normal;
overflow: visible;
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text);
display: block;
}
/* Row 2: Email (muted, may wrap) */
.admin-table tbody td:nth-child(2) {
font-size: var(--fs-sm);
color: var(--color-text-muted);
word-break: break-all;
white-space: normal;
display: block;
margin-bottom: var(--space-2);
}
/* Rows 3-4: Rol / Activo, with leading label */
.admin-table tbody td:nth-child(3)::before,
.admin-table tbody td:nth-child(4)::before {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.admin-table tbody td:nth-child(3)::before { content: 'Rol'; }
.admin-table tbody td:nth-child(4)::before { content: 'Activo'; }
.admin-table tbody td.col-actions {
text-align: left;
white-space: normal;
margin-top: var(--space-2);
justify-content: flex-start;
}
.admin-table tbody td.col-actions .btn-link {
padding: var(--space-2) 0;
}
}
/* =============================================================
RESPONSIVE
============================================================= */
/* (brand subtitle handles mobile; wordmark stays — Cinzel "MIPROMA" is short enough.) */
@media (min-width: 700px) {
.auth-card { padding: var(--space-10) var(--space-8); }
.fab-bar { right: var(--space-6); bottom: var(--space-6); }
.sheet { padding: var(--space-8); }
.list-table thead th { padding: var(--space-3) var(--space-6); }
.list-table tbody td { padding: var(--space-4) var(--space-6); }
}
/* =============================================================
ADMIN — PENDING REGISTRATIONS
============================================================= */
.pending-section {
background: #fff7ed; /* warn-soft */
border: 1px solid #fed7aa; /* warn-border */
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
margin-bottom: var(--space-5);
}
.pending-title {
margin: 0 0 var(--space-3);
font-size: var(--fs-md);
font-weight: 600;
color: #9a3412; /* warn-text */
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.pending-count {
background: #f97316; /* warn */
color: #fff;
font-size: var(--fs-xs);
padding: 2px 8px;
border-radius: var(--radius-pill);
font-weight: 700;
}
.section-title {
margin: var(--space-4) 0 var(--space-2);
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text-muted);
}
/* Nav badge for pending count */
.nav-badge {
display: inline-block;
margin-left: 6px;
background: #f97316;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: var(--radius-pill);
min-width: 18px;
text-align: center;
line-height: 16px;
vertical-align: middle;
}
/* =============================================================
MAESTROS — HUB + LISTAS + MODALES
============================================================= */
/* Hub */
.maestros-hub {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
margin-top: var(--space-4);
}
@media (min-width: 720px) {
.maestros-hub { grid-template-columns: repeat(3, 1fr); }
}
.maestros-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-2);
padding: var(--space-8);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
color: var(--color-text);
text-decoration: none;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.maestros-card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow);
color: var(--color-text);
text-decoration: none;
}
.maestros-card__icon { font-size: 32px; }
.maestros-card__title { font-weight: 600; }
.maestros-card__count {
font-size: var(--fs-xl);
color: var(--color-primary);
font-weight: 700;
}
/* Filtro arriba de cada lista */
.filter-bar {
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.filter-bar input[type="search"] {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius);
font-size: var(--fs-sm);
min-width: 220px;
flex: 1 1 220px;
}
/* Tag de CP en la lista de ubicaciones */
.cp-tag {
display: inline-block;
padding: 2px var(--space-2);
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
margin-right: 4px;
}
/* Modal genérico */
.modal[hidden] { display: none; }
.modal {
position: fixed; inset: 0; z-index: 1100;
display: flex; align-items: center; justify-content: center;
}
.modal__backdrop {
position: absolute; inset: 0;
background: rgba(15, 23, 42, 0.55);
}
.modal__dialog {
position: relative;
background: var(--color-surface);
border-radius: var(--radius-lg);
width: min(560px, 92vw);
max-height: 90vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.modal__header h3 { margin: 0; }
.modal__error {
color: var(--color-danger);
background: var(--color-danger-soft);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius);
font-size: var(--fs-sm);
}
.modal__actions {
display: flex;
gap: var(--space-2);
justify-content: flex-end;
margin-top: var(--space-4);
}
.modal form { padding: var(--space-4) var(--space-5); overflow-y: auto; }
/* Chips de CP en el modal de ubicaciones */
.cp-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-2);
min-height: 28px;
}
.cp-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 6px 2px 10px;
background: var(--color-primary-soft);
color: var(--color-primary);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
}
.cp-chip button {
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0 4px;
}
.cp-chip button:hover { color: var(--color-danger); }
/* Checkbox alineado */
.field-checkbox label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 500;
}
.field-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
}
/* =============================================================
VISITAS — DASHBOARD OPERARIO + DETALLE + ESTADO BADGES
============================================================= */
.visita-section { margin-bottom: var(--space-6); }
.visita-section-title {
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text-muted);
margin: var(--space-3) 0;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.visita-list { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .visita-list { grid-template-columns: repeat(2, 1fr); } }
.visita-card {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.visita-card__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.visita-card__actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }
.estado-badge {
display: inline-block;
padding: 2px var(--space-2);
border-radius: var(--radius-pill);
font-size: var(--fs-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.estado-badge.estado-planificada { background: #e2e8f0; color: #475569; }
.estado-badge.estado-en_curso { background: #ffedd5; color: #9a3412; }
.estado-badge.estado-completada { background: #d1fae5; color: #065f46; }
/* Buscador ad-hoc resultados */
.adhoc-resultados {
display: flex; flex-direction: column; gap: var(--space-2);
max-height: 50vh; overflow-y: auto;
margin-top: var(--space-3);
}
.adhoc-result {
display: block;
width: 100%;
text-align: left;
padding: var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 120ms ease;
}
.adhoc-result:hover { border-color: var(--color-primary); }
/* Detalle visita */
.visita-info p { margin: var(--space-1) 0; }
.visita-actions { display: flex; gap: var(--space-2); margin: var(--space-4) 0; flex-wrap: wrap; }
.visita-mapa-placeholder {
margin-top: var(--space-6);
padding: var(--space-4);
background: var(--color-surface-muted);
border-radius: var(--radius);
}
/* =============================================================
FASE C — Puntos físicos + evaluaciones embebidos en visita
============================================================= */
/* Bloque "Puntos" en /visitas/{id} */
.visita-puntos { margin-top: var(--space-6); }
.visita-tabs {
display: flex;
gap: var(--space-1);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.visita-tab {
padding: var(--space-2) var(--space-3);
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--color-text-muted);
font-size: var(--fs-sm);
cursor: pointer;
}
.visita-tab.is-active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: 600;
}
.puntos-canvas {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
min-height: 60vh;
}
/* Legacy: FAB scoped a .puntos-canvas (vista antigua /mapa). */
.puntos-canvas .fab-btn {
position: absolute;
right: var(--space-4);
bottom: var(--space-4);
z-index: 100;
box-shadow: var(--shadow);
}
/* Pin dentro de plano (HTML button absoluto) */
.plan-stage { position: relative; display: inline-block; }
.plan-stage img, .plan-stage canvas { max-width: 100%; height: auto; display: block; }
.plan-overlay {
position: absolute; inset: 0; pointer-events: auto;
}
.plan-overlay--armed { cursor: crosshair; }
/* .pp-pin-plano: definido en bloque Fase G al final (planta fullscreen) */
/* Banner "vista legacy" arriba en /mapa y /lista */
.legacy-banner {
background: #fef3c7;
color: #92400e;
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid #fcd34d;
font-size: var(--fs-sm);
}
.legacy-banner a { color: #92400e; text-decoration: underline; font-weight: 600; }
/* =============================================================
FASE G — Visita mapa + bottom sheet pulido (design system v2)
============================================================= */
.vmap {
position: fixed; inset: 0;
display: flex; flex-direction: column;
background: #e5e3df;
/* iOS Safari: 100vh incluye barras dinámicas; dvh respeta el viewport real */
height: 100vh;
height: 100dvh;
}
.vmap-head {
flex-shrink: 0; height: 56px;
background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--color-border);
padding: 8px 14px;
display: flex; align-items: center; gap: 10px;
z-index: 10;
}
.vmap-head-main { flex: 1; min-width: 0; }
.vmap-head-eyebrow { font-size: 10.5px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.vmap-head-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmap-progress-ring {
width: 42px; height: 42px; border-radius: 50%;
background: conic-gradient(var(--primary) 0%, #e2e8f0 0);
display: grid; place-items: center;
font-size: 11px; font-weight: 700; color: var(--primary);
position: relative;
}
.vmap-progress-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.vmap-progress-ring span { position: relative; z-index: 1; }
/* isolation: isolate confina los z-index internos de Leaflet (panes
400, popups 700) a este contenedor. Sin esto, el bottom-sheet
(z-index 30) y el FAB (50) quedaban detrás del mapa. */
.vmap-canvas { flex: 1; position: relative; min-height: 0; isolation: isolate; }
.vmap .fab-btn {
position: absolute; right: 16px;
bottom: calc(92px + 16px + env(safe-area-inset-bottom, 0px));
z-index: 35;
transition: opacity .15s, transform .15s;
}
/* Si el bottom-sheet está abierto (half/full), ocultar el FAB para que no
tape el contenido del sheet (botones, "Ver informe", etc.) */
body.bs-open .vmap .fab-btn {
opacity: 0; pointer-events: none;
transform: translateY(20px) scale(.8);
}
.vmap-action-bar {
flex-shrink: 0;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 10px 14px;
display: flex; gap: 8px;
z-index: 9;
}
.vmap-action-bar[hidden] { display: none; }
.vmap-action-bar .btn { flex: 1; min-height: 44px; font-weight: 700; }
.bs {
position: absolute; left: 0; right: 0; bottom: 0;
background: var(--color-surface);
border-radius: 18px 18px 0 0;
box-shadow: 0 -4px 24px rgba(15,23,42,.1);
height: 100vh; max-height: 100vh;
height: 100dvh; max-height: 100dvh;
display: flex; flex-direction: column;
z-index: 30; touch-action: none;
transition: transform .25s cubic-bezier(.4,0,.2,1);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bs-handle {
flex-shrink: 0; height: 56px;
border: 0; background: transparent; cursor: grab;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
padding: 6px 16px 0; width: 100%;
border-bottom: 1px solid var(--color-border);
-webkit-tap-highlight-color: rgba(0,0,0,.04);
}
.bs-handle:active { cursor: grabbing; }
.bs-bar { width: 44px; height: 5px; background: #cbd5e1; border-radius: 3px; transition: background .15s; }
.bs-handle:hover .bs-bar, .bs-handle:active .bs-bar { background: var(--primary); }
.bs-summary { font-size: 13px; color: var(--color-text); font-weight: 600; line-height: 1.2; }
.bs-body {
flex: 1; overflow-y: auto;
/* Padding-bottom amplio + safe-area para que la URL bar dinámica de Safari
no tape los últimos elementos (Ver informe, Borrar, etc.). */
padding: 0 16px calc(80px + env(safe-area-inset-bottom, 0px));
-webkit-overflow-scrolling: touch;
}
.bs[data-snap="peek"] .bs-body { overflow: hidden; }
.bs-section { padding: 14px 0 0; }
.bs-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bs-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.bs-section-count { font-size: 11px; font-weight: 700; background: var(--color-surface-2); padding: 3px 8px; border-radius: 99px; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.bs-info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.bs-info-row:last-child { border-bottom: 0; }
.bs-ext-stat { padding: 10px 12px; background: var(--color-surface-2); border-radius: var(--radius); border: 1px solid var(--color-border); font-size: 13px; }
.bs-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--color-border); margin-top: 8px; }
.bs-actions-top { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border); }
.bs-actions-top:empty { display: none; }
.bs-actions-top .btn { flex: 1; min-width: 0; }
.edif-row {
display: flex; align-items: center; gap: 12px;
padding: 12px; background: var(--color-surface-2);
border-radius: var(--radius); border: 1px solid var(--color-border);
margin-bottom: 8px; text-decoration: none; color: inherit;
}
.edif-row.is-disabled { opacity: .5; pointer-events: none; }
.edif-icon {
width: 42px; height: 42px; border-radius: 10px;
background: var(--primary); color: #fff;
display: grid; place-items: center; flex-shrink: 0;
}
.edif-main { flex: 1; min-width: 0; }
.edif-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.edif-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.edif-progress { font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.edif-progress.empty { background: #f1f5f9; color: var(--color-text-muted); }
.edif-progress.partial { background: var(--ec-curso-bg); color: var(--ec-curso-text); }
.edif-progress.done { background: var(--ec-comp-bg); color: var(--ec-comp-text); }
.edif-marker-wrap { background: transparent; }
.edif-marker {
width: 36px; height: 36px; border-radius: 8px;
background: var(--primary); color: #fff;
display: grid; place-items: center;
border: 2px solid var(--accent);
box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
.edif-marker svg { width: 20px; height: 20px; }
/* Vista planta fullscreen — definida en bloque Fase G al final */
/* Modal admin edificios — field row */
.field-row {
display: flex;
gap: 12px;
}
.field-row .field { flex: 1; }
/* Edificio card admin */
.edificio-card {
margin-bottom: 16px;
padding: 16px;
background: #fff;
border: 1px solid var(--color-border);
border-radius: 8px;
}
.edificio-card .card__title { display: flex; align-items: center; gap: 8px; }
.edificio-card .card__actions { margin-top: 8px; display: flex; gap: 12px; }
.edificio-card__plantas {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f3f4f6;
}
.planta-list {
list-style: none;
padding: 0;
margin: 8px 0;
}
.planta-list li {
padding: 6px 0;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid #f9fafb;
}
.planta-actions {
margin-left: auto;
display: flex;
gap: 8px;
}
@media (min-width: 768px) {
/* Desktop: bottom sheet pasa a panel lateral fijo al 35% */
.visita-mobile { flex-direction: row; }
.visita-mobile__header { display: none; }
.bottom-sheet {
position: relative;
height: auto;
width: 35%;
max-width: 480px;
border-radius: 0;
box-shadow: -2px 0 8px rgba(0,0,0,0.06);
transform: none !important;
}
.bottom-sheet__handle { display: none; }
.bottom-sheet__body { overflow-y: auto !important; }
}
/* =============================================================
FASE G — Componentes base (badges, chips, cards, kpi, toast, empty)
============================================================= */
/* === BADGES (Fase G) === */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 6px;
line-height: 1.4;
}
.badge-curso, .badge-en_curso, .estado-en_curso { background: var(--ec-curso-bg); color: var(--ec-curso-text); }
.badge-plan, .badge-planificada, .estado-planificada { background: var(--ec-plan-bg); color: var(--ec-plan-text); }
.badge-atras, .badge-atrasada { background: var(--ec-atras-bg); color: var(--ec-atras-text); }
.badge-comp, .badge-completada, .estado-completada { background: var(--ec-comp-bg); color: var(--ec-comp-text); }
/* === CHIPS (Fase G) === */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--radius-pill);
background: var(--color-surface);
border: 1.5px solid var(--color-border);
font-size: var(--fs-md);
font-weight: 500;
color: var(--color-text);
cursor: pointer;
transition: all .12s ease;
}
.chip:hover { border-color: var(--primary); }
.chip[aria-pressed="true"] {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.chip-lg { padding: 14px 18px; font-size: var(--fs-base); font-weight: 600; }
.chip-big {
padding: 14px 10px;
border-radius: 12px;
background: var(--color-surface-2);
border: 2px solid var(--color-border);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-size: var(--fs-md);
font-weight: 600;
color: var(--color-text);
cursor: pointer;
}
.chip-big[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.chip-big-dot { width: 18px; height: 18px; border-radius: 50%; background: #cbd5e1; }
.chip-big[aria-pressed="true"] .chip-big-dot { box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.chip-big.cond-sin .chip-big-dot { background: var(--cond-sin); }
.chip-big.cond-agua .chip-big-dot { background: var(--cond-agua); }
.chip-big.cond-larvas .chip-big-dot { background: var(--cond-larvas); }
.chip-big.sev-0 .chip-big-dot { background: var(--sev-0); }
.chip-big.sev-3 .chip-big-dot { background: var(--sev-3); }
.chip-big.sev-6 .chip-big-dot { background: var(--sev-6); }
.chip-big.sev-9 .chip-big-dot { background: var(--sev-9); }
/* === CARD (Fase G) === */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: var(--space-4);
}
.card-clickable { cursor: pointer; transition: transform .1s ease, box-shadow .15s ease; }
.card-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-stripe { position: relative; overflow: hidden; padding-left: 18px; }
.card-stripe::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 4px;
background: var(--color-border);
}
.card-stripe.curso::before { background: var(--ec-curso); }
.card-stripe.plan::before { background: var(--ec-plan); }
.card-stripe.atras::before { background: var(--ec-atras); }
.card-stripe.comp::before { background: var(--ec-comp); }
/* === EMPTY STATE === */
.empty-state {
text-align: center;
padding: var(--space-7) var(--space-4);
color: var(--color-text-muted);
background: var(--color-surface);
border: 1px dashed var(--color-border);
border-radius: var(--radius);
}
.empty-state .icon { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: .5; }
.empty-state-title { font-size: var(--fs-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.empty-state-sub { font-size: var(--fs-md); }
/* === TOAST === */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
background: var(--color-text);
color: #fff;
padding: 10px 18px;
border-radius: 99px;
font-size: var(--fs-md);
font-weight: 600;
box-shadow: var(--shadow-lg);
opacity: 0;
transition: all .25s ease;
z-index: 1000;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { background: var(--ec-comp-text); }
.toast-error { background: var(--ec-atras); }
/* === KPI CARD === */
.kpi {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-4);
position: relative;
overflow: hidden;
}
.kpi-icon {
width: 36px;
height: 36px;
border-radius: var(--radius);
display: grid;
place-items: center;
margin-bottom: var(--space-3);
}
.kpi-num { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.kpi-lbl { font-size: var(--fs-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-top: 4px; }
.kpi-delta {
position: absolute;
top: var(--space-4);
right: var(--space-4);
font-size: var(--fs-xs);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 3px 7px;
border-radius: 99px;
}
.kpi-delta.up { background: var(--ec-comp-bg); color: var(--ec-comp-text); }
.kpi-delta.down { background: var(--ec-atras-bg); color: var(--ec-atras-text); }
/* === ICON SIZE HELPERS (extras) === */
.icon-xl { width: 32px; height: 32px; }
.ico-inline { width: 18px; height: 18px; vertical-align: -3px; }
/* === LAYOUT OPERARIO (Fase G) === */
body.operario-app { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.op-main { min-height: calc(100vh - 96px); padding-bottom: 32px; }
.op-tabbar {
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
display: grid; grid-template-columns: 1fr 1fr 1fr;
padding: 6px 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom));
z-index: 50;
}
.op-tab {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 6px; border: 0; background: none;
color: var(--color-text-muted); font-size: 10.5px; font-weight: 600;
text-decoration: none;
}
.op-tab:hover { text-decoration: none; }
.op-tab svg { width: 22px; height: 22px; }
.op-tab.is-active { color: var(--primary); }
/* FAB de menú admin (visible para admins en cualquier vista operario) */
.op-admin-fab {
position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: 12px;
z-index: 60;
width: 40px; height: 40px; border-radius: 50%; border: 0;
background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
color: var(--primary-dark); cursor: pointer;
display: grid; place-items: center;
box-shadow: 0 2px 10px rgba(15,23,42,.18);
}
.op-admin-fab:hover { background: #fff; }
.op-admin-fab .icon { width: 20px; height: 20px; }
.op-admin-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,.4);
z-index: 70;
}
.op-admin-backdrop[hidden] { display: none; }
.op-admin-drawer {
position: fixed; top: 0; left: 0; bottom: 0;
width: 280px; max-width: 85vw; height: 100vh;
background: var(--primary-dark); color: #fff;
padding: 18px 14px;
display: flex; flex-direction: column; gap: 6px;
z-index: 75;
overflow-y: auto;
transform: translateX(-100%);
transition: transform .25s cubic-bezier(.4,0,.2,1);
box-shadow: 4px 0 24px rgba(0,0,0,.25);
}
body.is-drawer-open .op-admin-drawer,
.op-admin-drawer.is-open { transform: translateX(0); }
/* App bar operario */
.op-appbar {
background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
color: #fff; padding: 14px 16px 22px;
}
.op-appbar-row { display: flex; align-items: center; justify-content: space-between; }
.op-appbar-greet { font-size: 15px; opacity: .85; }
.op-appbar-name { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.op-appbar-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.3);
display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
text-decoration: none;
}
.op-appbar-stats { display: flex; gap: 10px; margin-top: 18px; }
.op-stat {
flex: 1; background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.15);
border-radius: var(--radius); padding: 9px 10px;
}
.op-stat-num { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.op-stat-lbl { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.op-stat.warn .op-stat-num { color: #fed7aa; }
.op-stat.danger .op-stat-num { color: #fecaca; }
.op-cta-wrap { padding: 16px 16px 0; }
.op-page-simple { padding-top: 0; }
.op-page-header {
background: var(--color-surface); padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
position: sticky; top: 0; z-index: 5;
}
.op-page-header h1 { font-size: 20px; margin: 0; font-weight: 700; }
/* === OPERARIO — cards y secciones (Fase G) === */
.op-section { padding: 20px 16px 6px; }
.op-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.op-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: 700; }
.op-section-count { font-size: 11px; font-weight: 700; background: var(--color-surface); padding: 3px 8px; border-radius: 99px; border: 1px solid var(--color-border); color: var(--color-text-muted); }
.op-card {
display: block;
background: var(--color-surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: 14px 14px 12px 18px;
margin-bottom: 10px;
text-decoration: none;
color: inherit;
border: 1px solid var(--color-border);
transition: transform .08s ease;
}
.op-card:hover { text-decoration: none; transform: translateY(-1px); }
.op-card:active { transform: scale(.99); }
.op-card-eyebrow { font-size: 11px; color: var(--color-text-muted); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 2px; }
.op-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.op-card-meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--color-text-muted); align-items: center; }
.op-card-cta {
display: flex; align-items: center; justify-content: space-between;
margin-top: 12px; padding-top: 12px;
border-top: 1px dashed var(--color-border);
}
.op-card-progress { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.op-card-go { font-size: 14px; font-weight: 600; color: var(--primary); }
.op-card-edit {
position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-surface); color: var(--color-text-muted);
border: 1px solid var(--color-border); cursor: pointer;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.op-card-edit:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.op-card-edit:active { transform: scale(.95); }
/* === WIZARD NUEVA VISITA (Fase G) === */
.wiz { display: flex; flex-direction: column; min-height: 100vh; }
.wiz-head { background: var(--color-surface); padding: 14px 16px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; }
.wiz-head-main { flex: 1; }
.wiz-head-title { font-size: 16px; font-weight: 700; line-height: 1; }
.wiz-head-step { font-size: 11px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.wiz-steps { padding: 12px 16px 0; display: flex; gap: 6px; background: var(--color-surface); }
.wiz-step { flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; }
.wiz-step.done { background: var(--primary); }
.wiz-step.active { background: linear-gradient(90deg, var(--primary) 60%, #e2e8f0 60%); }
.wiz-body { flex: 1; overflow-y: auto; padding: 18px 16px; }
.wiz-foot { padding: 12px 16px; background: var(--color-surface); border-top: 1px solid var(--color-border); display: flex; gap: 8px; }
.wiz-search {
display: flex; align-items: center; gap: 8px;
background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 12px;
padding: 10px 12px; margin-bottom: 14px;
}
.wiz-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; background: transparent; }
.wiz-search svg { color: var(--color-text-muted); }
.wiz-list { display: flex; flex-direction: column; gap: 6px; }
.wiz-item {
display: flex; align-items: center; gap: 12px; padding: 12px;
background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 12px;
cursor: pointer;
}
.wiz-item.selected { border-color: var(--primary); background: #f0fdf4; }
.wiz-item-avatar {
width: 42px; height: 42px; border-radius: 10px; background: var(--primary-dark); color: #fff;
display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0;
}
.wiz-item-main { flex: 1; min-width: 0; }
.wiz-item-name { font-size: 14px; font-weight: 600; line-height: 1.2; }
.wiz-item-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.wiz-item-check {
width: 22px; height: 22px; border-radius: 50%;
background: var(--primary); color: #fff;
display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.wiz-summary { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.wiz-summary:last-child { border-bottom: 0; }
.wiz-date-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.input {
width: 100%; padding: 12px 14px;
border-radius: var(--radius); border: 1.5px solid var(--color-border);
font-size: 15px; background: var(--color-surface); color: var(--color-text);
font-family: inherit;
}
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(19,72,56,.12); }
.field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 8px; }
/* === MODAL EVAL WIZARD (Fase G) === */
.modal__dialog--bottom {
position: fixed;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 24px); max-width: 480px;
max-height: 90vh; overflow: hidden;
background: var(--color-surface);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(15,23,42,.3);
display: flex; flex-direction: column;
}
.modal__dialog--bottom .modal__header {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--color-border);
justify-content: flex-start;
}
.modal__header-main { flex: 1; min-width: 0; }
.modal__title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.2; }
.modal__sub { font-size: 12px; color: var(--color-text-muted); margin: 1px 0 0; }
.eval-head-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--cond-agua); color: #fff; }
.eval-head-icon.kind-mapa { background: var(--cond-agua); }
.eval-head-icon.kind-planta { background: var(--primary); }
.eval-head-icon::before { content: ""; width: 18px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.4); }
.eval-steps { display: flex; gap: 8px; padding: 12px 18px; align-items: center; }
.eval-step { flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; }
.eval-step.done { background: var(--primary); }
.eval-step.active { background: linear-gradient(90deg, var(--primary) 50%, #e2e8f0 50%); }
.eval-step-num { font-size: 11px; color: var(--color-text-muted); font-weight: 700; letter-spacing: .04em; }
.modal__dialog--bottom .modal__body { padding: 14px 18px; overflow-y: auto; flex: 1; }
.modal__dialog--bottom .modal__error { color: var(--ec-atras); font-size: 13px; margin: 0; padding: 8px 18px; background: transparent; }
.modal__dialog--bottom .modal__actions { padding: 12px 18px; border-top: 1px solid var(--color-border); display: flex; gap: 8px; align-items: center; margin-top: 0; justify-content: flex-start; }
.chip-grid { display: grid; gap: 8px; }
.chip-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.chip-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.foto-upload {
border: 2px dashed var(--color-border-strong); border-radius: 14px;
padding: 20px 14px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 6px;
cursor: pointer; background: var(--color-surface-2);
color: var(--color-text);
}
.foto-upload .icon { color: var(--primary); }
.foto-upload-title { font-size: 14px; font-weight: 600; }
.foto-upload-sub { font-size: 12px; color: var(--color-text-muted); }
.foto-preview {
position: relative; border-radius: 14px; overflow: hidden;
background: #1f2937; max-height: 180px;
}
.foto-preview img { display: block; width: 100%; height: 100%; max-height: 180px; object-fit: cover; }
.foto-replace {
position: absolute; top: 8px; right: 8px;
background: rgba(255,255,255,.95); color: var(--color-text);
border: 0; padding: 6px 10px; border-radius: 8px;
font-size: 12px; font-weight: 600; cursor: pointer;
}
/* === PLANTA FULLSCREEN PULIDA (Fase G) === */
body.operario-app.planta-body { background: #1f2937; padding-bottom: 0; }
body.operario-app.planta-body .op-main { padding: 0; min-height: 100vh; }
.planta-page { position: fixed; inset: 0; display: flex; flex-direction: column; background: #1f2937; color: #fff; }
.planta-head {
flex-shrink: 0; height: 56px;
background: var(--primary-dark); color: #fff;
padding: 8px 16px;
display: flex; align-items: center; gap: 12px;
}
.planta-head-main { flex: 1; min-width: 0; }
.planta-head-eyebrow { font-size: 10.5px; opacity: .7; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; line-height: 1; }
.planta-head-title { font-size: 16px; font-weight: 700; line-height: 1.2; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.icon-btn-light { background: rgba(255,255,255,.1); color: #fff; }
.icon-btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.planta-tabs { flex-shrink: 0; display: flex; gap: 0; background: #064e3b; overflow-x: auto; scrollbar-width: none; }
.planta-tabs::-webkit-scrollbar { display: none; }
.planta-tab {
flex-shrink: 0; padding: 10px 16px;
color: #a7f3d0; font-size: 12.5px; font-weight: 600;
text-decoration: none; border-bottom: 2px solid transparent;
white-space: nowrap;
}
.planta-tab.is-active { color: #fff; border-bottom-color: var(--accent); background: rgba(0,0,0,.2); }
.planta-stage { flex: 1; overflow: hidden; position: relative; background: #f3f4f6; display: grid; place-items: center; }
.planta-canvas { position: relative; transform-origin: 0 0; cursor: grab; }
.planta-canvas img, .planta-canvas canvas { display: block; max-width: none; user-select: none; }
.planta-overlay { position: absolute; inset: 0; pointer-events: auto; }
.pp-pin-plano {
position: absolute; width: 30px; height: 30px; border-radius: 50%;
border: 3px solid #fff; transform: translate(-50%, -50%);
box-shadow: 0 4px 8px rgba(0,0,0,.45);
cursor: pointer; padding: 0; color: #fff;
font: 800 12px/1 system-ui, -apple-system, Inter, sans-serif;
display: grid; place-items: center;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
letter-spacing: -.02em;
transition: transform .12s ease-out, box-shadow .12s;
will-change: transform;
}
/* Tamaños del marcador, controlados desde la UI y guardados en localStorage */
.planta-overlay[data-pin-size="xxs"] .pp-pin-plano { width: 10px; height: 10px; font-size: 0; border-width: 1px; text-indent: -9999px; }
.planta-overlay[data-pin-size="xs"] .pp-pin-plano { width: 14px; height: 14px; font-size: 8px; border-width: 1.5px; }
.planta-overlay[data-pin-size="s"] .pp-pin-plano { width: 20px; height: 20px; font-size: 9px; border-width: 2px; }
.planta-overlay[data-pin-size="m"] .pp-pin-plano { width: 30px; height: 30px; font-size: 12px; border-width: 3px; }
.planta-overlay[data-pin-size="l"] .pp-pin-plano { width: 44px; height: 44px; font-size: 16px; border-width: 3px; }
.planta-overlay[data-pin-size="xl"] .pp-pin-plano { width: 60px; height: 60px; font-size: 20px; border-width: 4px; }
/* Hover/touch: aumenta el punto para distinguirlo cuando hay muchos */
.pp-pin-plano:hover, .pp-pin-plano:focus {
transform: translate(-50%, -50%) scale(1.6);
z-index: 4;
box-shadow: 0 6px 14px rgba(0,0,0,.55);
outline: none;
}
/* Botones de tamaño: el activo se destaca */
.pin-size-btn.is-active { background: var(--primary, #134838) !important; box-shadow: inset 0 0 0 1px #fff; }
.planta-legend {
position: absolute; left: 14px; bottom: 18px;
background: rgba(15,23,42,.85); color: #fff;
border-radius: 10px; padding: 8px 10px;
font-size: 11px; display: flex; gap: 10px;
z-index: 5;
}
.planta-legend-item { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.planta-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.planta-legend .dot.sev-0 { background: var(--sev-0); }
.planta-legend .dot.sev-3 { background: var(--sev-3); }
.planta-legend .dot.sev-6 { background: var(--sev-6); }
.planta-legend .dot.sev-9 { background: var(--sev-9); }
.planta-page .fab-btn { position: absolute; right: 16px; bottom: 18px; }
/* === ADMIN SHELL (Fase G) ===
El menú admin se renderiza inline en _layout-admin.php (max compat).
Solo dejamos estilo del body. */
body.admin-app { background: var(--bg); }
/* Estilos de los elementos del sidebar — válidos para mobile (barra de chips)
y para desktop (sidebar lateral). El display:none/flex de brand/section/foot
se controla en las reglas .ad-sidebar de arriba (mobile-first). */
.ad-sb-logo {
width: 36px; height: 36px; border-radius: 8px;
background: linear-gradient(135deg, var(--accent), #a44d2c);
display: grid; place-items: center;
font-family: 'Cinzel'; font-weight: 700; color: #fff; font-size: 13px;
flex-shrink: 0;
}
.ad-sb-name { font-family: 'Cinzel'; font-size: 18px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
.ad-sb-sub { font-size: 10.5px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ad-sb-section { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.45); font-weight: 700; padding: 14px 10px 6px; }
.ad-sb-link-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.ad-sb-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.ad-sb-avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.15); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ad-sb-user-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.ad-sb-user-role { font-size: 11px; opacity: .65; text-transform: uppercase; }
/* En desktop el brand y foot vuelven a tener su layout vertical/separadores */
@media (min-width: 901px) {
.ad-sb-brand {
align-items: center; gap: 10px;
padding: 6px 8px 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
margin-bottom: 10px;
}
.ad-sb-foot { margin-top: auto; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
}
.ad-main { max-width: 1280px; min-width: 0; }
.ad-page-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.ad-page-head .btn { flex-shrink: 0; }
.ad-page-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin: 0; }
.ad-page-sub { font-size: 14px; color: var(--color-text-muted); margin-top: 6px; }
/* (Reglas mobile y desktop ya definidas mobile-first arriba en .ad-sidebar) */
/* === ADMIN DASHBOARD (Fase G) === */
.ad-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.ad-row2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin-bottom: 24px; }
.ad-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ad-panel-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ad-qtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ad-qtable th { text-align: left; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; padding: 8px 8px; border-bottom: 1px solid var(--color-border); }
.ad-qtable td { padding: 11px 8px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ad-qtable tr:last-child td { border-bottom: 0; }
.ad-cliente-cell { display: flex; align-items: center; gap: 8px; }
.av-mini { width: 28px; height: 28px; border-radius: 6px; background: var(--primary-dark); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.ad-bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding: 6px 0; }
.ad-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ad-bar { width: 28px; min-height: 4px; background: linear-gradient(180deg, var(--primary), var(--primary-light)); border-radius: 4px 4px 0 0; }
.ad-bar.accent { background: linear-gradient(180deg, var(--accent), #a44d2c); }
.ad-bar-lbl { font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; }
.ad-bar-meta { text-align: center; margin-top: 8px; font-size: 12px; color: var(--color-text-muted); }
.ad-qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ad-qa { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.ad-qa-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.ad-qa-name { font-size: 14px; font-weight: 700; }
.ad-qa-sub { font-size: 12px; color: var(--color-text-muted); }
@media (max-width: 1100px) { .ad-row2 { grid-template-columns: 1fr; } .ad-kpi-grid { grid-template-columns: repeat(2,1fr); } .ad-qa-grid { grid-template-columns: 1fr; } }
/* === ADMIN TABS + FILTROS + TABLA (Fase G) === */
.ad-tabs {
display: flex; gap: 0;
border-bottom: 1px solid var(--color-border);
margin-bottom: 14px;
overflow-x: auto; scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.ad-tabs::-webkit-scrollbar { height: 0; }
.ad-tab {
padding: 12px 16px; font-size: 13.5px; font-weight: 600;
color: var(--color-text-muted); background: transparent; border: 0;
border-bottom: 2px solid transparent; cursor: pointer;
display: flex; align-items: center; gap: 8px;
flex-shrink: 0; white-space: nowrap;
}
.ad-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-count { background: #f1f5f9; font-size: 11px; padding: 2px 7px; border-radius: 99px; font-weight: 700; color: var(--color-text-muted); }
.ad-tab.is-active .tab-count { background: var(--primary); color: #fff; }
.ad-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-flt-search {
flex: 1; min-width: 240px;
display: flex; align-items: center; gap: 8px;
background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px;
padding: 9px 12px;
}
.ad-flt-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 14px; background: transparent; }
.ad-filters .input { padding: 9px 12px; font-size: 13.5px; }
.ad-vis-group { margin-bottom: 16px; }
.ad-vis-group-head { display: flex; align-items: center; gap: 8px; padding: 10px 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); }
.ad-vis-group-line { flex: 1; height: 1px; background: var(--color-border); }
.ad-vis-group-count { font-size: 10.5px; }
.ad-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ad-tbl td { padding: 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ad-tbl tr:last-child td { border-bottom: 0; }
.ad-tbl tr:hover td { background: var(--color-surface-2); }
.ad-tbl .fecha-stack { font-size: 13px; font-weight: 600; }
.tec-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #f1f5f9; border-radius: 99px; font-size: 12px; font-weight: 600; }
.act-cell { display: flex; gap: 4px; justify-content: flex-end; }