/* ===== VARIABLES ===== */
:root {
--ford-blue: #003478;
--ford-blue-light: #1769FF;
--ford-blue-dark: #002255;
--white: #FFFFFF;
--gray-50: #F8F9FA;
--gray-100: #F1F3F5;
--gray-200: #E9ECEF;
--gray-400: #ADB5BD;
--gray-600: #6C757D;
--gray-800: #343A40;
--gray-900: #1A1A2E;
--silver: #A8B2C1;
--green: #00A651;
--green-light: #E6F7EF;
--yellow: #F5A623;
--yellow-light: #FFF8EC;
--red: #D0021B;
--red-light: #FEE8EA;
--blue-light: #EBF2FF;
--shadow-sm: 0 1px 3px rgba(0,52,120,.08);
--shadow-md: 0 4px 12px rgba(0,52,120,.12);
--shadow-lg: 0 8px 24px rgba(0,52,120,.16);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
/* Tipografía tipo Apple (San Francisco en dispositivos Apple; buenos fallbacks
en el resto). Todo hereda var(--font) → una sola fuente en TODA la app. */
--font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
/* ===== Escala tipográfica normalizada (estilo iOS/HIG) — usar estas vars a
futuro para títulos, secciones y cuerpo, así todo queda consistente ===== */
--fs-largetitle: 26px; --fw-largetitle: 800; /* título grande de pantalla */
--fs-title: 20px; --fw-title: 700; /* título de vista/toolbar */
--fs-headline: 17px; --fw-headline: 700; /* encabezado destacado */
--fs-section: 13px; --fw-section: 700; /* encabezado de sección */
--fs-body: 15px; --fw-body: 400; /* cuerpo */
--fs-callout: 14px; --fw-callout: 500; /* secundario */
--fs-footnote: 13px; --fw-footnote: 400; /* nota */
--fs-caption: 11.5px; --fw-caption: 600; /* etiqueta pequeña */
--header-h: 56px;
--nav-h: 58px;
--topbar-h: 100px; /* header-h + nav-h, fijos para no perder en calc anidado */
--transition: .18s ease;
}
/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ===== Splash loader — visible al arrancar la app ===== */
.app-splash {
position: fixed; inset: 0; z-index: 99999;
background: #003478; /* azul Ford sólido, EXACTAMENTE el fondo del ícono — splash homogéneo */
display: flex; align-items: center; justify-content: center;
transition: opacity .45s ease;
}
.app-splash.hiding { opacity: 0; pointer-events: none; }
.app-splash-inner { text-align: center; color: #fff; padding: 24px; }
.app-splash-logo-wrap {
width: 132px; height: 132px; margin: 0 auto;
background: transparent; /* sin tarjeta blanca: el ícono (azul) se funde con el fondo */
border-radius: 28px; padding: 0;
box-shadow: none;
display: flex; align-items: center; justify-content: center;
animation: splashLogoPulse 2.2s ease-in-out infinite;
overflow: hidden;
}
.app-splash-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-splash-spinner {
width: 38px; height: 38px;
border: 4px solid rgba(255,255,255,.22);
border-top-color: #fff;
border-radius: 50%;
margin: 28px auto 14px;
animation: splashSpin .9s linear infinite;
}
.app-splash-text {
font-size: 12px; letter-spacing: 4.5px; font-weight: 800; opacity: .92;
font-family: var(--font);
}
.app-splash-sub {
font-size: 11px; letter-spacing: 1.5px; margin-top: 6px;
opacity: .55; font-weight: 600;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@keyframes splashLogoPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
html, body { height: 100%; overflow: hidden; }
/* Body: fondo azul Ford SOLO en los bordes laterales (más allá del viewport
útil cuando el browser hace zoom o el contenido se centra a max-width 1280px).
Así la barra azul del header se ve continua incluso si el zoom es 90%. */
html { background: var(--ford-blue); }
body {
font-family: var(--font);
font-size: 14px;
color: var(--gray-900);
background: #ffffff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; /* render nítido tipo Apple */
text-rendering: optimizeLegibility;
letter-spacing: -0.01em; /* tracking sutil de SF */
}
input, select, textarea, button { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
/* ===== SCREENS ===== */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
/* ===== LOGIN — estilo Santander con banner de imagen de fondo =====
Logo arriba a la izquierda, formulario pegado al fondo de la pantalla. */
.login-bg {
position: relative;
flex: 1;
display: flex;
align-items: flex-end; /* card empuja al fondo */
justify-content: center;
padding: 0 16px 16px; /* sin padding arriba para que la imagen llene */
overflow: hidden;
background: linear-gradient(160deg, var(--ford-blue-dark) 0%, var(--ford-blue) 50%, var(--ford-blue-light) 100%);
}
/* Logo JM en esquina superior izquierda — separado del formulario */
.login-logo-corner {
position: absolute;
top: 22px;
left: 22px;
z-index: 2;
width: 110px;
height: auto;
filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.5));
}
@media (max-width: 480px) {
.login-logo-corner { width: 90px; top: 18px; left: 18px; }
}
/* Fondo del login: UNA sola imagen local (la habitación JM Home con maleta)
con efecto Ken Burns (zoom + pan sutil que respira). El usuario probó el
slideshow de 4 y prefirió esta única vista. */
.login-bg::before {
content: '';
position: absolute;
inset: -3%; /* extra para que el zoom no descubra bordes */
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-image: url('/static/login-bg/4.jpg');
animation: loginKenBurns 14s ease-in-out infinite alternate;
z-index: 0;
will-change: transform;
}
.login-bg::after {
content: '';
position: absolute;
inset: 0;
/* Capa más oscura/sobria — destaca el card del login sin perder la imagen */
background: linear-gradient(180deg, rgba(10,10,18,.20) 0%, rgba(10,10,18,.08) 30%, rgba(0,18,48,.85) 100%);
z-index: 0;
}
/* Ken Burns: zoom + pan sutil para dar vida a la imagen */
@keyframes loginKenBurns {
0% { transform: scale(1.00) translate(0, 0); }
50% { transform: scale(1.08) translate(-1.5%, -1%); }
100% { transform: scale(1.04) translate(1%, 1.5%); }
}
/* Reducir el efecto si el usuario tiene preferencia de menos movimiento */
@media (prefers-reduced-motion: reduce) {
.login-bg::before { animation: none; }
}
/* Desktop: usa las mismas imágenes — sólo cambia el background-position si quieres recorte distinto */
@media (min-width: 720px) {
.login-bg::before { background-position: center center; }
}
/* Card del login — vidrio MUY transparente para ver la imagen detrás */
.login-card {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, .70); /* ~70% opaco para mejor contraste */
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .65);
border-radius: 22px 22px 18px 18px;
padding: 28px 24px 24px;
width: 100%;
max-width: 440px;
margin-bottom: 8px;
box-shadow: 0 -4px 28px rgba(0, 26, 71, .45), 0 2px 6px rgba(0, 0, 0, .12);
}
/* Inputs y selects: casi opacos para legibilidad, BLANCOS puros al enfocarse */
.login-card .form-group input,
.login-card .form-group select,
.login-card .form-group textarea,
.login-card #login-pais,
.login-card #reg-pais {
background: rgba(255,255,255,.85);
border: 1px solid rgba(255,255,255,.7);
color: var(--gray-900);
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.login-card .form-group input::placeholder,
.login-card .form-group textarea::placeholder {
color: rgba(0,26,71,.55);
}
.login-card .form-group input:focus,
.login-card .form-group select:focus,
.login-card .form-group textarea:focus,
.login-card #login-pais:focus,
.login-card #reg-pais:focus {
background: #ffffff; /* fondo blanco al picar */
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(0,52,120,.18);
outline: none;
}
/* Labels con sombra sutil para legibilidad sobre la imagen */
.login-card .form-group label {
color: #002b5c;
font-weight: 700;
text-shadow: 0 1px 3px rgba(255,255,255,.85);
}
/* Mejor contraste para todo el texto auxiliar del login (switches, links, párrafos) */
.login-card .login-switch {
color: #002b5c;
text-shadow: 0 1px 3px rgba(255,255,255,.7);
font-weight: 700;
}
.login-card .link-btn {
color: var(--ford-blue);
text-shadow: 0 1px 2px rgba(255,255,255,.7);
font-weight: 800;
}
.login-card .text-muted,
.login-card p {
color: #002b5c !important;
text-shadow: 0 1px 3px rgba(255,255,255,.7);
font-weight: 600;
}
.login-card h3 {
color: var(--ford-blue) !important;
text-shadow: 0 1px 3px rgba(255,255,255,.85);
font-weight: 800;
}
.login-card .alert.alert-danger {
background: #fff;
color: #b91c1c;
border: 1px solid #fca5a5;
font-weight: 600;
}
@media (min-width: 720px) {
/* En desktop: card como tarjeta flotante a la derecha o centrada */
.login-bg { align-items: center; padding: 24px; }
.login-card { margin-bottom: 0; max-width: 420px; border-radius: var(--radius-xl); padding: 36px 28px; }
}
/* Etiqueta "JM Home — Tu hogar" — sobre la imagen, arriba a la derecha */
.login-tagline-banner {
position: absolute;
top: 28px;
right: 22px;
z-index: 2;
color: #fff;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
background: rgba(0,0,0,.30);
padding: 6px 12px;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
text-shadow: 0 1px 4px rgba(0,0,0,.4);
pointer-events: none;
max-width: 60vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 480px) {
.login-tagline-banner {
top: auto;
bottom: calc(100% - 80px); /* arriba pero pequeño en móvil */
right: 16px;
font-size: 9.5px;
padding: 4px 10px;
}
}
.login-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
margin-bottom: 28px;
}
.login-logo-img {
width: 132px;
height: auto;
display: block;
filter: drop-shadow(0 2px 6px rgba(0,52,120,.12));
}
.logo-mark {
width: 52px; height: 52px;
background: var(--ford-blue);
color: var(--white);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800; letter-spacing: -1px;
}
.logo-text { display: flex; flex-direction: column; }
.logo-name { font-size: 22px; font-weight: 800; color: var(--ford-blue); letter-spacing: -0.5px; }
.logo-slogan { font-size: 12px; color: var(--gray-600); font-style: italic; }
/* ===== LOGIN EXTRAS ===== */
.login-switch {
margin-top: 18px;
text-align: center;
font-size: 13px;
color: var(--ford-blue); /* texto en azul Ford igual que el botón "Regístrate" */
font-weight: 600;
}
.link-btn {
background: none;
border: none;
color: var(--ford-blue);
font-weight: 600;
font-size: 13px;
cursor: pointer;
padding: 0 4px;
text-decoration: underline;
}
/* ===== TOPBAR (header + nav) — Facebook-style auto-hide on scroll ===== */
.app-topbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
display: flex;
flex-direction: column;
transform: translateY(0);
transition: transform .25s cubic-bezier(.2,.8,.2,1);
will-change: transform;
/* Fondo azul Ford continuo en TODO el topbar (header + slot) sin interrupcion. */
background: var(--ford-blue);
}
/* La clase topbar-hidden se aplica en #app-screen para esconder TODAS las barras */
#app-screen.topbar-hidden .app-topbar {
transform: translateY(-100%);
}
/* Slot vacío por defecto (no añade altura al topbar) */
.view-toolbar-slot:empty { display: none; }
/* Barra como FLEX en flujo: [‹ volver] [ toolbar/título ] [Opciones]. Sin
position:absolute (antes el botón volver se metía tras el header en web). */
.view-toolbar-slot {
background: var(--white); position: relative; z-index: 90;
display: flex; align-items: center;
}
/* Altura UNIFORME para todas las toolbars superiores (mensajes, etc. ya no
quedan más altas que limpieza): alto fijo + padding vertical 0 + centrado. */
.view-toolbar-slot > .view-toolbar { height: 55px; min-height: 55px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; flex: 1 1 auto; min-width: 0; }
.tb-back, .view-toolbar-slot .tb-opciones {
flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px;
background: transparent !important; border: 0 !important; box-shadow: none !important;
color: var(--ford-blue) !important; font-weight: 700; font-size: 17.5px;
cursor: pointer; padding: 10px 13px; white-space: nowrap; min-width: 0; height: auto;
}
.tb-back { order: -1; max-width: 40%; }
.tb-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-back:active, .view-toolbar-slot .tb-opciones:active { opacity: .55; }
.view-toolbar-slot .tb-opciones { order: 99; margin-left: auto; }
/* Botones "Opciones" convertidos a menú de 3 puntos (kebab): icono redondo a la
derecha. Solo aplica a los que quedaron icon-only (fa-ellipsis-vertical). */
.tb-opciones > i.fa-ellipsis-vertical {
font-size: 19px; line-height: 1;
}
.tb-opciones:has(> i.fa-ellipsis-vertical:only-child) {
padding: 6px 8px; border-radius: 50%; gap: 0;
}
/* FAB flotante "+" para la acción "Nuevo" de cada vista. Mismo look que .fab-btn,
fijo a la pantalla (vive en ) abajo a la derecha, sobre el bottom-nav. */
.nuevo-fab {
position: fixed; right: 20px;
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
z-index: 9000;
transition: background .2s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, opacity .2s ease;
}
.nuevo-fab.hidden { display: none; }
/* En chat el composer va pegado abajo: sube el FAB para que quede arriba de él. */
body:has(#view-chat.active) .nuevo-fab {
bottom: calc(env(safe-area-inset-bottom, 0px) + 100px);
}
/* Igual que el bottom-nav y el .fab-wrap: al hacer scroll hacia ABAJO el FAB "+"
se va fuera del viewport; al subir reaparece. (#nuevo-fab vive en , por
eso usamos body:has() en vez de descendiente de #app-screen.) */
body:has(#app-screen.topbar-hidden) .nuevo-fab {
transform: translateY(calc(100% + var(--nav-h) + env(safe-area-inset-bottom, 0px) + 40px));
opacity: 0;
pointer-events: none;
}
/* Cuando hay un modal/popup/hoja abierta, el FAB "+" (z-index 9000) se va DETRÁS
para no estorbar la interacción con la ventana. modal-overlay=500, pila-picker-ov
/mini-menu=600 → bajamos el FAB por debajo y desactivamos sus toques. */
body:has(.modal-overlay:not(.hidden)) .nuevo-fab,
body:has(.pila-picker-ov) .nuevo-fab {
z-index: 400;
pointer-events: none;
}
/* Tono/estilo SYNC: tarjeta blanca elevada + glifo azul Ford (como los tiles
del hub Admin / .limpieza-app), en vez del fondo gris del FAB genérico. */
.nuevo-fab {
background: #fff;
color: var(--ford-blue);
border: none;
box-shadow: 0 1px 3px rgba(16,24,40,.12), 0 6px 16px rgba(16,24,40,.18);
}
.nuevo-fab:hover { background: #fff; transform: translateY(-1px); }
.nuevo-fab:active { transform: translateY(0) scale(.96); }
/* En desktop el FAB NO debe pegarse a la orilla del navegador (quedaría sobre
el riel de notificaciones): se ancla al borde derecho de la franja central
de la app, igual que el contenido/bottom-nav. */
@media (min-width: 1200px) {
body:has(#app-screen.active) .nuevo-fab {
right: calc(var(--dock-right) + max(16px, (100vw - var(--dock-left) - var(--dock-right) - 1280px) / 2) + 8px);
}
}
/* Título CENTRADO sobre toda la barra (absoluto). Así queda centrado tenga o
no botones a los lados. El back/Opciones van en flujo a las orillas. */
.view-toolbar-slot .toolbar-title {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
margin: 0; text-align: center; white-space: nowrap; max-width: 56%;
overflow: hidden; text-overflow: ellipsis; pointer-events: none; z-index: 1;
}
/* Las view-toolbar originales dentro de los views quedan ocultas — se duplican en el slot del topbar */
.view > .view-toolbar { display: none; }
/* === Slot del topbar (BLANCO): el `.view-toolbar` que cae aquí tiene FONDO
TRANSPARENTE y todos sus textos/iconos se pintan en AZUL FORD. Esta es la
regla global (ver `feedback_jmhome_toolbar_transparente.md`). Sin fondos
sólidos, sin tintes pesados. Solo el estado `active` del toggle conserva
un tinte azul translúcido para indicar selección. === */
.view-toolbar-slot > .view-toolbar {
background: transparent !important;
border-bottom: 1px solid var(--gray-100);
color: var(--ford-blue);
}
.view-toolbar-slot .toolbar-title,
.view-toolbar-slot .view-toolbar-title {
color: var(--ford-blue);
font-family: var(--font);
font-weight: 700;
letter-spacing: .2px;
font-size: 26px;
}
.view-toolbar-slot .btn-icon,
.view-toolbar-slot .btn-icon i,
.view-toolbar-slot .view-toolbar > * > i,
.view-toolbar-slot .view-toolbar i { color: var(--ford-blue); }
.view-toolbar-slot .btn,
.view-toolbar-slot .btn-primary,
.view-toolbar-slot .btn-secondary {
background: transparent !important;
color: var(--ford-blue) !important;
border: 1px solid rgba(0,52,120,.30);
box-shadow: none;
}
.view-toolbar-slot .btn:hover,
.view-toolbar-slot .btn-primary:hover,
.view-toolbar-slot .btn-secondary:hover { background: rgba(0,52,120,.06) !important; }
.view-toolbar-slot .btn i,
.view-toolbar-slot .btn-primary i,
.view-toolbar-slot .btn-secondary i { color: var(--ford-blue) !important; }
/* Toggle de vista (lista/grid) — transparente, solo borde azul Ford */
.view-toolbar-slot .notas-view-toggle {
background: transparent !important;
border-color: rgba(0,52,120,.30);
}
.view-toolbar-slot .notas-view-btn {
background: transparent !important;
color: rgba(0,52,120,.55);
}
.view-toolbar-slot .notas-view-btn.active {
background: rgba(0,52,120,.10) !important;
color: var(--ford-blue);
}
.view-toolbar-slot .notas-view-btn:not(.active):hover {
background: rgba(0,52,120,.06) !important;
color: var(--ford-blue);
}
/* ===== Wrapper de input password con botón ojo (mostrar/ocultar) =====
Se aplica a TODOS los inputs type="password" envueltos en .pwd-input-wrap.
El input mantiene padding-right extra para que el icono no se solape con
los caracteres tecleados. */
.pwd-input-wrap {
position: relative;
display: block;
}
.pwd-input-wrap > input {
width: 100%;
padding-right: 42px;
}
.pwd-toggle-btn {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 32px; height: 32px;
background: transparent;
border: none;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-500);
font-size: 14px;
cursor: pointer;
padding: 0;
transition: color .12s ease, background .12s ease;
}
.pwd-toggle-btn:hover { color: var(--ford-blue); background: rgba(0,52,120,.06); }
.pwd-toggle-btn:active { transform: translateY(-50%) scale(.92); }
.pwd-toggle-btn:focus-visible { outline: 2px solid var(--ford-blue); outline-offset: 2px; }
/* ===== HEADER ===== */
.app-header {
height: var(--header-h);
background: var(--ford-blue);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
z-index: 100;
}
.header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Barra de búsqueda en el header (entre logo y geo-pill) */
.header-search {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
margin: 0 8px;
}
.header-search-btn {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
padding: 0 14px;
/* Fondo transparente en reposo — solo se sugiere con un borde tenue.
Al hover/focus aparece un tinte suave para confirmar el target. */
background: transparent;
border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;
color: rgba(255,255,255,.92);
font-size: 13px;
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
min-width: 0;
}
.header-search-btn:hover,
.header-search-btn:focus-visible {
background: rgba(255,255,255,.10);
border-color: rgba(255,255,255,.45);
}
.header-search-btn i { font-size: 13px; flex-shrink: 0; }
/* Colapsado a solo icono (tras el saludo). Al tocar abre el buscador para escribir. */
/* Colapsado: el botón de búsqueda se va a la IZQUIERDA, justo a la derecha del
logo (margin-right:auto empuja el resto del header a la derecha). */
.header-search.collapsed { flex: 0 0 auto; margin-left: 4px; margin-right: auto; }
.header-search-btn.collapsed {
flex: 0 0 auto;
width: 36px;
padding: 0;
gap: 0;
justify-content: center;
border: none; /* sin círculo cuando está colapsada — solo el icono */
background: transparent;
}
.header-search-btn.collapsed:hover,
.header-search-btn.collapsed:focus-visible {
background: transparent;
border-color: transparent;
}
.header-search-btn.collapsed .header-search-placeholder { display: none; }
.header-search-placeholder {
flex: 1;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity .35s ease, transform .35s ease;
}
.header-search-placeholder.greeting {
font-weight: 700;
color: #fff;
letter-spacing: .1px;
}
.header-search-placeholder.fade-out {
opacity: 0;
transform: translateY(-4px);
}
.header-search-placeholder.fade-in {
animation: phFadeIn .45s ease both;
}
@keyframes phFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Modo saludo: la barra deja de parecer "search" y se vuelve protagonista —
se ensancha, sin ícono ni borde, fondo translúcido suave, texto grande tipo banner */
.header-search-btn.greeting-active {
background: rgba(255,255,255,.10);
border-color: transparent;
border-radius: 14px;
padding: 8px 14px;
height: auto;
animation: greetExpand .4s ease both;
}
.header-search-btn.greeting-active i.fa-search { display: none; }
.header-search-btn.greeting-active .header-search-placeholder {
font-size: 15px;
font-weight: 800;
letter-spacing: .2px;
color: #fff;
text-align: center;
text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
@keyframes greetExpand {
0% { transform: scale(.96); opacity: .6; }
60% { transform: scale(1.02); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* Botón de perfil (avatar circular pequeño en header) */
.header-profile-btn {
padding: 0;
width: 36px; height: 36px;
border-radius: 50%;
overflow: hidden;
}
.header-profile-btn .header-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
color: var(--white);
border: 2px solid rgba(255,255,255,.35);
}
.header-profile-btn .header-avatar img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
/* Mi perfil — primer item del drawer (más prominente) */
.menu-item-profile {
background: linear-gradient(135deg, var(--ford-blue), #1769FF);
color: #fff !important;
margin: 0 0 0 0;
border-radius: 0;
padding: 14px 16px;
}
.menu-item-profile:hover { filter: brightness(1.05); }
.menu-item-profile span { color: #fff; font-weight: 700; }
.menu-item-profile .menu-item-arrow { color: rgba(255,255,255,.85); }
.menu-profile-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.22);
border: 2px solid rgba(255,255,255,.45);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 14px;
}
.menu-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* ===== Instalar como App — Modal auto (móvil web) ===== */
.install-prompt {
position: fixed; inset: 0;
z-index: 9999;
background: rgba(0,0,0,.62);
display: flex;
align-items: flex-end;
justify-content: center;
animation: installFade .25s ease both;
}
.install-prompt.hidden { display: none; }
@keyframes installFade { from { opacity: 0; } to { opacity: 1; } }
.install-prompt-card {
width: 100%;
max-width: 440px;
background: var(--white);
border-radius: 18px 18px 0 0;
padding: 20px 18px 24px;
box-shadow: 0 -10px 40px rgba(0,0,0,.25);
animation: installSlide .35s cubic-bezier(.2,.9,.3,1) both;
}
@media (min-width: 480px) {
.install-prompt { align-items: center; }
.install-prompt-card { border-radius: 18px; margin: 0 14px; padding-bottom: 20px; }
}
@keyframes installSlide {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.install-prompt-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.install-prompt-icon {
width: 56px; height: 56px;
border-radius: 14px;
box-shadow: 0 4px 12px rgba(0,52,120,.25);
}
.install-prompt-title {
font-size: 18px; font-weight: 800; color: var(--gray-900);
letter-spacing: -.3px;
}
.install-prompt-sub {
font-size: 13px; color: var(--gray-600);
margin-top: 2px;
}
.install-prompt-bullets {
list-style: none; margin: 8px 0 12px; padding: 0;
}
.install-prompt-bullets li {
display: flex; align-items: center; gap: 10px;
padding: 8px 4px;
font-size: 13px;
color: var(--gray-800);
border-bottom: 1px solid var(--gray-100);
}
.install-prompt-bullets li:last-child { border-bottom: none; }
.install-prompt-bullets i {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--blue-light);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 13px; flex-shrink: 0;
}
.install-prompt-ios {
background: #fff8e1;
border-left: 3px solid #ff8c00;
border-radius: 8px;
padding: 10px 12px;
font-size: 12px;
color: #5d3500;
margin: 6px 0 10px;
}
.install-prompt-ios.hidden { display: none; }
.install-prompt-actions {
display: flex; gap: 10px;
margin-top: 6px;
}
/* ===== Búsqueda global — Overlay ===== */
.search-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: var(--white);
display: flex; flex-direction: column;
animation: searchIn .18s ease both;
}
.search-overlay.hidden { display: none; }
@keyframes searchIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.search-overlay-bar {
display: flex;
align-items: center;
gap: 6px;
height: var(--header-h);
padding: 0 8px;
background: var(--ford-blue);
flex-shrink: 0;
}
/* Contenedor interno con max-width 1280 px centrado: igual que el header / nav
normales, para que el overlay no parezca distinto cuando aparece. */
.search-overlay-bar-inner {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
max-width: 1280px;
margin: 0 auto;
min-width: 0;
}
.search-overlay-bar .btn-icon { color: var(--white); }
.search-overlay-bar input {
flex: 1 1 auto;
width: 100%;
min-width: 0;
/* Importante: NO crecer en función del contenido. El input siempre ocupa el
mismo espacio dentro del contenedor centrado de 1280 px. */
max-width: 100%;
box-sizing: border-box;
height: 38px;
background: rgba(255,255,255,.95);
border: none;
border-radius: 999px;
padding: 0 14px;
font-size: 14px;
outline: none;
}
.search-overlay-results {
flex: 1;
overflow-y: auto;
padding: 8px 0;
/* Mismo ancho máximo que las demás vistas (Forma de salida, etc.) */
width: 100%;
max-width: 1280px;
margin: 0 auto;
box-sizing: border-box;
}
.search-section-label {
padding: 12px 16px 6px;
font-size: 11px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .5px;
}
.search-result {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: background .12s;
}
.search-result:hover { background: var(--gray-100); }
.search-result-icon {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--blue-light);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.search-result-body { flex: 1; min-width: 0; }
.search-result-title {
font-size: 14px; font-weight: 600; color: var(--gray-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-meta { font-size: 11px; color: var(--gray-600); margin-top: 1px; }
.search-empty, .search-no-results {
padding: 28px 20px;
text-align: center;
color: var(--gray-600);
font-size: 13px;
}
mark.search-hl {
background: rgba(23,105,255,.18);
color: inherit;
padding: 0 2px;
border-radius: 2px;
font-weight: 700;
}
.header-brand {
display: flex;
align-items: center;
gap: 10px;
/* Logo clickeable → navega a Inicio (mismo onclick que el botón Home del bottom-nav) */
cursor: pointer;
border-radius: 8px;
padding: 2px 4px;
transition: background .15s ease, transform .12s ease;
}
.header-brand:hover { background: rgba(0,52,120,.06); }
.header-brand:active { transform: scale(.97); }
.header-brand:focus-visible { outline: 2px solid var(--ford-blue); outline-offset: 2px; }
.header-logo {
width: 32px; height: 32px;
background: rgba(255,255,255,.15);
color: var(--white);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 800;
}
.header-logo-text {
/* Misma tipografía que "Menú" del drawer (Inter por defecto, peso 700). */
font-weight: 700;
font-size: 18px;
color: var(--ford-blue);
line-height: 1;
white-space: nowrap;
transition: opacity .35s ease;
}
.header-logo-text.fade-out { opacity: 0; }
.header-logo-img {
height: 36px;
width: auto;
display: block;
/* Logo nativo en azul Ford sobre header blanco (v447) — sin filtros.
Antes había un `filter: brightness(0) invert(1)` para pintarlo blanco
cuando el header era azul; ahora se pinta nativo y se ve correctamente. */
}
#header-title { color: var(--white); font-weight: 700; font-size: 16px; }
/* Credencial virtual (carnet) en modal de perfil */
.credencial-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
background: linear-gradient(135deg, var(--ford-blue) 0%, #2150a0 70%, #4f7df9 100%);
color: #fff;
border-radius: 14px;
padding: 16px;
box-shadow: 0 8px 24px rgba(0,52,120,.30);
position: relative;
overflow: hidden;
margin-bottom: 16px;
}
.credencial-card::before {
content: '';
position: absolute;
top: -30px; right: -30px;
width: 140px; height: 140px;
background: rgba(255,255,255,.08);
border-radius: 50%;
}
.credencial-foto {
width: 78px; height: 78px;
border-radius: 50%;
background: rgba(255,255,255,.20);
border: 3px solid #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 24px;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
flex-shrink: 0;
z-index: 1;
}
.credencial-foto img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.credencial-foto-edit {
position: absolute;
bottom: 0; right: 0;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--white);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 10px;
border: 2px solid var(--ford-blue);
}
.credencial-info { min-width: 0; z-index: 1; }
.credencial-rol {
font-size: 10px;
font-weight: 800;
letter-spacing: 1.5px;
opacity: .85;
margin-bottom: 2px;
}
.credencial-nombre {
font-size: 18px;
font-weight: 800;
margin: 0 0 8px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.credencial-meta {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
opacity: .92;
}
.credencial-meta i { width: 14px; opacity: .8; }
.credencial-logo {
z-index: 1;
align-self: flex-start;
}
.credencial-logo img {
width: 44px; height: 44px;
filter: brightness(0) invert(1);
opacity: .7;
}
/* ===== Perfil — vista compacta (read-only por defecto) ===== */
.perfil-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
background: var(--ford-blue);
color: #fff;
padding: 12px 14px;
border-radius: 14px;
position: relative;
margin-bottom: 12px;
}
.perfil-foto {
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(255,255,255,.18);
border: 3px solid rgba(255,255,255,.55);
display: flex; align-items: center; justify-content: center;
font-size: 22px; font-weight: 800;
position: relative;
overflow: hidden;
flex-shrink: 0;
cursor: pointer;
}
.perfil-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.perfil-foto-edit {
position: absolute; bottom: -2px; right: -2px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--white);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 9px;
border: 2px solid var(--ford-blue);
}
.perfil-card-info { min-width: 0; }
.perfil-rol {
font-size: 10px; font-weight: 800; letter-spacing: .8px;
opacity: .85;
}
.perfil-nombre {
font-size: 16px; font-weight: 800;
line-height: 1.2;
margin: 1px 0 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perfil-meta {
font-size: 12px; opacity: .9;
}
.perfil-qr {
width: 76px; height: 76px;
background: #fff;
border-radius: 8px;
padding: 4px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.perfil-qr img { width: 100%; height: 100%; display: block; }
/* Botón Editar como pill debajo de la tarjeta — no se sobrepone al QR */
.perfil-edit-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 14px;
margin: -4px 0 12px;
background: var(--blue-light);
color: var(--ford-blue);
border: 1px solid rgba(0,52,120,.12);
border-radius: 12px;
font-size: 13px;
font-weight: 800;
letter-spacing: .2px;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
}
.perfil-edit-pill:hover { background: rgba(33,80,160,.14); }
.perfil-edit-pill:active { transform: scale(.985); }
.perfil-edit-pill i { font-size: 12px; }
/* ============================================================
v473 — Tarjeta "WiFi del edificio" en Mi perfil
QR a la izquierda + credenciales y botón "Se cayó" a la derecha.
============================================================ */
.perfil-wifi-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 14px 14px 12px;
margin: 12px 0 14px;
box-shadow: var(--shadow-sm);
}
.perfil-wifi-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.perfil-wifi-title {
display: flex; align-items: center; gap: 8px;
font-size: 14.5px; font-weight: 800; color: var(--ford-blue);
letter-spacing: .2px;
}
.perfil-wifi-title i { font-size: 16px; }
.perfil-wifi-report-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: #fff7ed;
color: #b45309;
border: 1px solid #fed7aa;
border-radius: 999px;
font-size: 12.5px; font-weight: 700;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
}
.perfil-wifi-report-btn:hover { background: #ffedd5; }
.perfil-wifi-report-btn:active { transform: scale(.97); }
.perfil-wifi-report-btn i { font-size: 12px; }
.perfil-wifi-body {
display: grid; grid-template-columns: 130px 1fr; gap: 14px;
align-items: center;
}
.perfil-wifi-qr-wrap {
width: 130px; height: 130px;
border-radius: 10px; overflow: hidden;
background: #f9fafb;
border: 1px solid var(--gray-200);
display: flex; align-items: center; justify-content: center;
}
.perfil-wifi-qr-img {
width: 100%; height: 100%; object-fit: contain; display: block;
background: #fff;
}
.perfil-wifi-qr-skeleton {
color: var(--gray-400); font-size: 22px;
}
.perfil-wifi-cred { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.perfil-wifi-cred-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
}
.perfil-wifi-cred-k {
display: inline-block; min-width: 46px;
font-weight: 700; color: var(--gray-600);
font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase;
}
.perfil-wifi-cred-v {
flex: 1; min-width: 0;
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-weight: 700; color: var(--gray-900);
font-size: 13.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
user-select: all;
}
.perfil-wifi-copy {
background: transparent;
border: 1px solid var(--gray-200);
width: 28px; height: 28px;
border-radius: 8px;
color: var(--gray-600);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease, color .12s ease;
}
.perfil-wifi-copy:hover { background: var(--gray-50); color: var(--ford-blue); }
.perfil-wifi-copy:active { transform: scale(.96); }
.perfil-wifi-hint {
margin: 4px 0 0;
font-size: 11.5px; color: var(--gray-600);
line-height: 1.4;
}
@media (max-width: 420px) {
.perfil-wifi-body { grid-template-columns: 110px 1fr; gap: 10px; }
.perfil-wifi-qr-wrap { width: 110px; height: 110px; }
.perfil-wifi-cred-v { font-size: 12.5px; }
}
/* Preview de la foto del módem en el modal de reporte */
.wifi-rep-preview {
margin-top: 8px;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--gray-200);
background: #f9fafb;
}
.wifi-rep-preview img {
display: block;
width: 100%;
max-height: 220px;
object-fit: contain;
background: #fff;
}
/* === Modal "Compartir Wi-Fi" (Mi espacio) — estilo Android Quick Share === */
.wifi-share-sheet {
max-width: 380px;
width: calc(100% - 32px);
border-radius: 22px;
background: #fff;
position: relative;
padding: 0;
overflow: hidden;
}
.wifi-share-close {
position: absolute;
top: 10px; right: 10px;
width: 36px; height: 36px;
border-radius: 50%;
background: transparent;
border: none;
color: var(--gray-600);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 2;
}
.wifi-share-close:hover { background: var(--gray-100); }
.wifi-share-body {
padding: 32px 24px 26px;
text-align: center;
}
.wifi-share-icon {
width: 44px; height: 44px;
margin: 0 auto 14px;
border-radius: 10px;
background: #ccfbf1;
color: #0d9488;
display: inline-flex; align-items: center; justify-content: center;
font-size: 22px;
}
.wifi-share-title {
font-size: 24px;
font-weight: 800;
color: #111827;
margin: 0 0 10px;
letter-spacing: -.2px;
}
.wifi-share-sub {
font-size: 13.5px;
color: var(--gray-600);
line-height: 1.5;
margin: 0 0 22px;
padding: 0 6px;
}
.wifi-share-sub strong {
color: var(--gray-800);
font-weight: 700;
}
.wifi-share-qr-wrap {
width: 240px; height: 240px;
margin: 0 auto 20px;
border-radius: 8px;
background: #fff;
display: flex; align-items: center; justify-content: center;
}
.wifi-share-qr-img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
.wifi-share-qr-skeleton {
color: var(--gray-400);
font-size: 28px;
}
.wifi-share-pass {
font-size: 14px;
color: #111827;
margin: 0 0 22px;
line-height: 1.4;
}
.wifi-share-pass strong {
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-weight: 700;
user-select: all;
letter-spacing: .3px;
}
.wifi-share-actions {
display: flex; gap: 10px;
justify-content: center;
}
.wifi-share-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: #fff;
border: 1px solid #0d9488;
color: #0d9488;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background .12s ease, transform .12s ease;
}
.wifi-share-btn:hover { background: #f0fdfa; }
.wifi-share-btn:active { transform: scale(.97); }
.wifi-share-btn i { font-size: 12px; }
@media (max-width: 380px) {
.wifi-share-body { padding: 28px 18px 22px; }
.wifi-share-qr-wrap { width: 210px; height: 210px; }
.wifi-share-title { font-size: 22px; }
.wifi-share-actions { flex-wrap: wrap; }
}
/* Vista de solo lectura (filas compactas) */
.perfil-view {
background: var(--white);
border-radius: 12px;
border: 1px solid var(--gray-200);
padding: 6px 4px;
box-shadow: var(--shadow-sm);
}
.perfil-view.hidden { display: none; }
.perfil-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid var(--gray-100);
font-size: 13px;
}
.perfil-row:last-child { border-bottom: none; }
.perfil-row-k {
color: var(--gray-600);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.perfil-row-k i {
width: 16px;
text-align: center;
color: var(--ford-blue);
opacity: .85;
}
.perfil-row-v {
color: var(--gray-900);
font-weight: 600;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60%;
}
.perfil-row-v .muted { color: var(--gray-400); font-weight: 500; }
.perfil-group-label {
font-size: 10px;
font-weight: 800;
letter-spacing: .8px;
color: var(--ford-blue);
text-transform: uppercase;
padding: 8px 12px 4px;
margin-top: 2px;
background: var(--blue-light);
border-bottom: 1px solid var(--gray-100);
}
.perfil-group-label:first-child { margin-top: 0; }
/* Hoy No Circula */
.hnc-row { background: rgba(0,52,120,.04); }
.hnc-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: .3px;
}
.hnc-badge.hnc-yes { background: var(--green-light, #e6f7ef); color: #00824a; }
.hnc-badge.hnc-no { background: #ffe5e5; color: #c0392b; }
.hnc-badge.hnc-amb { background: #fff3e0; color: #ef6c00; }
.hnc-motivo {
font-size: 11px;
color: var(--gray-600);
padding: 0 12px 8px;
margin: -2px 0 0;
line-height: 1.4;
}
/* Detalle de verificación (rango fechas, holograma, costo, verificentro) */
.ver-detalle {
margin: 4px 12px 10px;
padding: 10px 12px;
background: #f9fafb;
border-left: 3px solid var(--ford-blue, #003478);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ver-detalle .ver-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11.5px;
gap: 10px;
}
.ver-detalle .ver-row span { color: var(--gray-600); }
.ver-detalle .ver-row strong { color: #1f2937; font-weight: 700; text-align: right; }
.perfil-foot {
font-size: 10px;
color: var(--gray-500);
text-align: center;
margin: 8px 0 2px;
}
.perfil-edit-actions {
display: flex;
gap: 8px;
margin-top: 14px;
justify-content: flex-end;
}
.perfil-edit-actions .btn { flex: 0 0 auto; padding: 8px 16px; }
@media (max-width: 380px) {
.perfil-qr { width: 64px; height: 64px; }
.perfil-foto { width: 54px; height: 54px; font-size: 18px; }
.perfil-nombre { font-size: 14px; }
}
/* Form perfil */
.perfil-section {
font-size: 11px;
font-weight: 700;
letter-spacing: .8px;
color: var(--ford-blue);
text-transform: uppercase;
margin: 14px 0 6px;
padding-bottom: 4px;
border-bottom: 1px solid var(--gray-200);
}
.form-perfil .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.form-perfil .form-group { margin-bottom: 8px; }
.form-perfil label {
font-size: 11px;
color: var(--gray-700);
font-weight: 600;
display: block;
margin-bottom: 3px;
}
.form-perfil input {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--gray-300);
border-radius: 6px;
font-size: 13px;
}
.form-perfil input:focus {
outline: none;
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(33,80,160,.12);
}
@media (max-width: 480px) {
.credencial-card { grid-template-columns: auto 1fr; }
.credencial-logo { display: none; }
.form-perfil .form-row { grid-template-columns: 1fr; gap: 0; }
}
/* Drawer de menú lateral derecho (hamburguesa) */
.menu-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 9998;
opacity: 0;
transition: opacity .22s ease;
}
.menu-overlay:not(.hidden) { opacity: 1; }
.menu-overlay.hidden { display: none; }
.menu-drawer {
position: fixed;
top: 0; bottom: 0; left: 0;
width: min(340px, 88vw);
background: var(--white);
z-index: 9999;
display: flex; flex-direction: column;
box-shadow: 6px 0 28px rgba(0,0,0,.22);
transform: translateX(-100%);
transition: transform .26s cubic-bezier(.2,.8,.2,1);
overscroll-behavior: contain;
}
.menu-drawer.hidden { display: none; }
.menu-drawer.open { transform: translateX(0); }
/* Drawer DERECHO de notificaciones — espejo del menu-drawer pero slide
desde la derecha. Mismo header azul, misma anchura. */
.notif-drawer {
position: fixed;
top: 0; bottom: 0; right: 0;
width: min(360px, 92vw);
background: var(--white);
z-index: 9999;
display: flex; flex-direction: column;
box-shadow: -6px 0 28px rgba(0,0,0,.22);
transform: translateX(100%);
transition: transform .26s cubic-bezier(.2,.8,.2,1);
overscroll-behavior: contain;
}
.notif-drawer.hidden { display: none; }
.notif-drawer.open { transform: translateX(0); }
.notif-drawer .menu-drawer-header { background: var(--ford-blue); color: #fff; }
.notif-drawer-body {
flex: 1;
display: flex; flex-direction: column;
overflow: hidden;
background: #fff;
}
.notif-drawer-list {
flex: 1;
overflow-y: auto;
padding: 6px 0;
}
.notif-drawer-footer {
display: flex; gap: 8px; padding: 10px 14px;
border-top: 1px solid var(--gray-200);
background: #f9fafb;
flex-shrink: 0;
}
.notif-drawer-footer .btn { flex: 1; }
.notif-drawer-item {
display: flex; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--gray-100);
cursor: pointer;
transition: background .12s;
}
.notif-drawer-item:hover { background: var(--gray-50, #f9fafb); }
.notif-drawer-item.unread { background: #eff6ff; }
.notif-drawer-item.unread:hover { background: #dbeafe; }
.notif-drawer-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--ford-blue);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
}
.notif-drawer-body-text { flex: 1; min-width: 0; }
.notif-drawer-title {
font-size: 13px; font-weight: 700; color: #1f2937;
margin-bottom: 2px;
}
.notif-drawer-msg {
font-size: 12px; color: var(--gray-600);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.notif-drawer-time {
font-size: 10.5px; color: var(--gray-500);
margin-top: 4px;
}
/* Botón "Ver más" del panel de notificaciones */
.notif-ver-mas {
display: block; width: calc(100% - 28px);
margin: 8px 14px; padding: 9px 12px;
border: 1px solid var(--gray-200); border-radius: 8px;
background: #f9fafb; color: var(--ford-blue);
font-size: 12.5px; font-weight: 600; cursor: pointer;
transition: background .12s;
}
.notif-ver-mas:hover { background: var(--gray-100, #f3f4f6); }
/* Campana en el header — botón con badge rojo si hay no leídos */
.header-bell-btn {
position: relative;
padding: 8px;
background: transparent;
border: none;
color: #fff;
cursor: pointer;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px;
}
.header-bell-btn:hover { background: rgba(255,255,255,.12); }
.header-bell-btn:active { transform: scale(.94); }
.header-bell-btn i { font-size: 17px; }
.header-bell-badge {
position: absolute;
top: 4px; right: 4px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: #ef4444;
color: #fff;
font-size: 9.5px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
border: none;
line-height: 1;
}
.header-bell-badge.hidden { display: none; }
/* === Desktop ancho (≥1200px): drawers como columnas FIJAS permanentes
PERO sólo cuando el usuario está dentro de la app (#app-screen.active).
En la pantalla de login o tras cerrar sesión, los drawers NO se ven —
eso queda enforced con `body:not(:has(#app-screen.active))`. === */
@media (min-width: 1200px) {
/* Zoom 90% para que entren los 3 paneles sin scroll horizontal */
html { zoom: 0.9; }
/* Anchos de las columnas laterales (a 90% de zoom efectivo) */
:root, body { --dock-left: 300px; --dock-right: 320px; }
/* ─────────── LOGIN / LOGOUT: drawers ocultos siempre ─────────── */
body:not(:has(#app-screen.active)) .menu-drawer,
body:not(:has(#app-screen.active)) .notif-drawer {
display: none !important;
}
/* ─────────── DENTRO DE LA APP: drawers como columnas fijas ─────────── */
/* Overlays nunca se ven en desktop — el contenido NO está cubierto */
body:has(#app-screen.active).has-drawer-open #menu-overlay,
body:has(#app-screen.active).has-drawer-open #notif-overlay,
body:has(#app-screen.active) #menu-overlay,
body:has(#app-screen.active) #notif-overlay {
background: transparent !important;
pointer-events: none !important;
display: none !important;
}
/* === Menú izquierdo permanentemente visible === */
body:has(#app-screen.active) .menu-drawer {
position: fixed;
top: 0; bottom: 0; left: 0;
width: var(--dock-left);
transform: none !important; /* anula el slide */
box-shadow: 1px 0 0 var(--gray-200);
z-index: 50; /* DEBAJO de modals (que están en 9999) */
display: flex !important;
}
body:has(#app-screen.active) .menu-drawer.hidden { display: flex !important; }
/* El botón "X" de cerrar del header del drawer queda oculto en desktop
porque ya no tiene sentido (el panel es permanente). */
body:has(#app-screen.active) .menu-drawer .menu-drawer-header > .btn-icon[onclick*="toggleMenuDrawer"] {
display: none;
}
/* === Panel notificaciones derecho permanentemente visible === */
body:has(#app-screen.active) .notif-drawer {
position: fixed;
top: 0; bottom: 0; right: 0;
width: var(--dock-right);
transform: none !important;
box-shadow: -1px 0 0 var(--gray-200);
z-index: 50;
display: flex !important;
}
body:has(#app-screen.active) .notif-drawer.hidden { display: flex !important; }
body:has(#app-screen.active) .notif-drawer .menu-drawer-header > .btn-icon[onclick*="toggleNotifDrawer"] {
display: none;
}
/* Los botones del header (hamburguesa y campana) pierden su función
toggle en desktop — los ocultamos para que el header se vea limpio. */
body:has(#app-screen.active) #menu-btn,
body:has(#app-screen.active) #header-bell-btn {
display: none !important;
}
/* === Contenido central queda con padding fijo a izquierda y derecha
igual al ancho de los paneles. El max-width sigue siendo 1280 dentro
de ese espacio. === */
body:has(#app-screen.active) #app-screen .app-content,
body:has(#app-screen.active) #app-screen .app-topbar,
body:has(#app-screen.active) #app-screen .top-nav {
padding-left: calc(var(--dock-left) + max(12px, calc((100% - var(--dock-left) - var(--dock-right) - 1280px) / 2))) !important;
padding-right: calc(var(--dock-right) + max(12px, calc((100% - var(--dock-left) - var(--dock-right) - 1280px) / 2))) !important;
}
/* Bottom nav fija — en desktop también ajustarla a la franja central */
body:has(#app-screen.active) #bottom-nav {
left: var(--dock-left) !important;
right: var(--dock-right) !important;
width: auto !important;
}
/* El JS ya no necesita actualizar --drawer-shift-* porque el padding ya
refleja anchos fijos. Pero por compatibilidad mantenemos las vars en 0. */
#app-screen {
--drawer-shift-left: 0px;
--drawer-shift-right: 0px;
}
}
.menu-drawer-header {
display: flex; align-items: center; justify-content: space-between;
height: var(--header-h);
padding: 0 12px;
background: var(--ford-blue);
color: var(--white);
flex-shrink: 0;
}
.menu-drawer-title {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 17px;
}
.menu-drawer-header .btn-icon { color: var(--white); }
/* Buscador inline del menú — al lado del título "Menú".
Fondo transparente por default; se vuelve blanco solo cuando el user enfoca o escribe. */
.menu-drawer-title {
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 17px;
flex: 1;
min-width: 0;
}
/* Buscador del menú hamburguesa.
Regla de contraste: fondo Ford Blue → letra BLANCA; fondo blanco → letra
FORD BLUE. Estados:
· Inactivo: translúcido sobre el header azul (letra blanca).
· Activo (focus o ya tipeando): blanco sólido (letra Ford Blue). */
.menu-drawer-search-inline {
flex: 1;
min-width: 60px;
height: 36px;
margin-left: 6px;
padding: 0 14px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;
background: transparent;
color: rgba(255,255,255,.92);
font-size: 13px;
outline: none;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.menu-drawer-search-inline::placeholder {
color: rgba(255,255,255,.75);
font-weight: 500;
}
/* Hover SIN cambio visual — el usuario pidió que pasar el mouse encima sin
hacer click se vea idéntico a cuando el mouse está fuera de la barra.
Solo focus / typing activan el cambio de color. */
.menu-drawer-search-inline:hover {
background: transparent;
border-color: rgba(255,255,255,.28);
}
.menu-drawer-search-inline:focus,
.menu-drawer-search-inline:not(:placeholder-shown) {
background: #ffffff;
border-color: #ffffff;
color: var(--ford-blue);
}
.menu-drawer-search-inline:focus::placeholder,
.menu-drawer-search-inline:not(:placeholder-shown)::placeholder {
color: rgba(0,52,120,.5);
}
.menu-search-empty {
padding: 30px 18px;
text-align: center;
color: var(--gray-500);
}
.menu-search-empty i {
font-size: 32px;
color: var(--gray-300);
margin-bottom: 10px;
}
.menu-search-empty p { margin: 0; font-size: 13px; }
.menu-search-empty {
padding: 30px 18px;
text-align: center;
color: var(--gray-500);
}
.menu-search-empty i {
font-size: 32px;
color: var(--gray-300);
margin-bottom: 10px;
}
.menu-search-empty p { margin: 0; font-size: 13px; }
/* === Permisos de la IA — matriz con switches === */
.ia-permisos-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 56vh;
overflow-y: auto;
}
.ia-perm-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border: 1px solid var(--gray-200);
border-radius: 12px;
background: var(--white);
transition: border-color .15s, background .15s;
}
.ia-perm-row:hover { border-color: rgba(0,52,120,.30); background: rgba(0,52,120,.03); }
.ia-perm-row.off { opacity: .65; }
.ia-perm-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: var(--blue-light, #EBF2FF);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 15px;
}
.ia-perm-body { flex: 1; min-width: 0; }
.ia-perm-title { font-size: 14px; font-weight: 700; color: var(--gray-900); }
.ia-perm-desc { font-size: 12px; color: var(--gray-600); margin-top: 2px; line-height: 1.4; }
.ia-perm-switch {
position: relative;
width: 44px; height: 24px;
flex-shrink: 0;
cursor: pointer;
user-select: none;
}
.ia-perm-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ia-perm-switch .slider {
position: absolute; inset: 0;
background: var(--gray-300, #c9d0d8);
border-radius: 999px;
transition: background .18s ease;
}
.ia-perm-switch .slider::after {
content: '';
position: absolute;
width: 20px; height: 20px;
top: 2px; left: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,.18);
transition: transform .18s ease;
}
.ia-perm-switch input:checked + .slider { background: var(--ford-blue); }
.ia-perm-switch input:checked + .slider::after { transform: translateX(20px); }
/* Strip de usuarios conectados (estilo Telegram — amontonados) */
.menu-drawer-online-wrap {
background: transparent; /* fondo transparente */
border-bottom: 1px solid rgba(0,52,120,.08);
flex-shrink: 0;
padding: 10px 0 12px;
}
/* ===== Strip de TUTORIALES en el menú hamburguesa ===== */
/* Cards horizontales tipo Anuncios pero con thumb de video + título. */
.menu-drawer-tut-wrap {
background: transparent;
border-bottom: 1px solid rgba(0,52,120,.08);
flex-shrink: 0;
padding: 10px 0 12px;
}
.menu-drawer-tut-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px 8px;
}
.menu-drawer-tut-label {
font-size: 11px;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--ford-blue);
display: flex;
align-items: center;
gap: 6px;
}
.menu-drawer-tut-label::before {
content: '\f03d'; /* fa-video */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 11px;
color: var(--ford-blue);
}
.menu-drawer-tut-add {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--ford-blue);
color: #fff;
border: none;
cursor: pointer;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.menu-drawer-tut-add:hover { background: #002b5c; }
.menu-drawer-tut {
display: flex;
gap: 10px;
padding: 0 16px 4px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.menu-drawer-tut::-webkit-scrollbar { display: none; }
.menu-drawer-tut:empty { display: none; }
.tut-card {
flex: 0 0 auto;
width: 140px;
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
cursor: pointer;
border: none;
padding: 0;
text-align: left;
transition: transform .15s ease;
}
.tut-card:hover { transform: translateY(-2px); }
.tut-card-thumb {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #0c1330;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tut-card-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.tut-card-thumb::after {
content: '\f04b'; /* fa-play */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
color: #fff;
background: rgba(0,0,0,.32);
text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.tut-card-title {
font-size: 12px;
font-weight: 700;
color: var(--gray-900);
padding: 8px 10px 10px;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* === Modal player de tutorial — fullscreen estilo YouTube === */
.tut-player-modal.modal-overlay {
align-items: stretch;
justify-content: stretch;
padding: 0;
background: #000;
}
.tut-player-sheet {
position: relative;
width: 100%;
height: 100%;
background: #000;
display: flex;
flex-direction: column;
margin: 0;
border-radius: 0;
max-width: none;
}
.tut-player-topbar {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
padding-top: max(12px, env(safe-area-inset-top));
background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
pointer-events: none;
}
.tut-player-title {
flex: 1;
margin: 0;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(0,0,0,.7);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
}
.tut-player-close {
pointer-events: auto;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.55);
color: #fff;
border: none;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .15s ease;
}
.tut-player-close:hover, .tut-player-close:active { background: rgba(0,0,0,.85); }
.tut-player-stage {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
background: #000;
min-height: 0;
}
.tut-player-video {
width: 100%;
height: 100%;
max-height: 100%;
background: #000;
display: block;
}
.tut-player-desc {
flex: 0 0 auto;
margin: 0;
padding: 12px 16px;
padding-bottom: max(12px, env(safe-area-inset-bottom));
background: #111;
color: #d4d4d4;
font-size: 13px;
line-height: 1.5;
max-height: 30vh;
overflow-y: auto;
}
.tut-player-desc:empty { display: none; }
/* === Vista #view-tutoriales — grid grande de tarjetas (estilo galería) === */
.tutoriales-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
padding: 16px;
}
.tut-grid-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
text-align: left;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
padding: 0;
font-family: inherit;
}
.tut-grid-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0,52,120,.12);
border-color: var(--ford-blue);
}
.tut-grid-thumb {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(135deg, #1a2944, #003478);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tut-grid-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tut-grid-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background: rgba(0,0,0,.18);
color: #fff;
font-size: 38px;
text-shadow: 0 4px 16px rgba(0,0,0,.4);
transition: background .15s;
}
.tut-grid-card:hover .tut-grid-play { background: rgba(0,0,0,.32); }
.tut-grid-meta {
padding: 10px 12px 12px;
}
.tut-grid-title {
font-size: 14px;
font-weight: 700;
color: var(--gray-900);
line-height: 1.3;
margin-bottom: 4px;
}
.tut-grid-desc {
font-size: 12px;
color: var(--gray-600);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* En móvil, 1-2 columnas según ancho */
@media (max-width: 480px) {
.tutoriales-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
padding: 12px;
}
}
.menu-drawer-online-label {
font-size: 11px;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
color: var(--ford-blue); /* azul Ford */
padding: 0 16px 8px;
display: flex;
align-items: center;
gap: 6px;
}
.menu-drawer-online-label::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #43a047;
box-shadow: 0 0 6px rgba(67,160,71,.6);
animation: onlinePulse 1.6s ease-in-out infinite;
}
.menu-drawer-online {
display: flex;
padding: 0 16px 4px;
flex-shrink: 0;
}
.menu-drawer-online::-webkit-scrollbar { display: none; }
.menu-drawer-online:empty { display: none; }
.online-circle {
flex: 0 0 auto;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
position: relative;
transition: transform .15s ease;
}
/* Amontonado tipo Telegram: cada uno detrás del anterior. Overlap aumentado a
-20px para que quepan 9-10 avatares en el ancho del drawer (340px) sin
recortarse en el extremo derecho. */
.online-circle:not(:first-child) { margin-left: -20px; }
.online-circle:hover { transform: translateY(-3px); z-index: 100 !important; }
.online-circle-ring {
position: relative;
width: 44px; height: 44px;
border-radius: 50%;
padding: 2px;
background: linear-gradient(135deg, var(--ford-blue), #4b8bff, var(--ford-blue));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 2px #fff;
}
.online-circle.online .online-circle-ring {
background: linear-gradient(135deg, #43a047, #66bb6a, #43a047);
}
.online-circle-avatar {
width: 100%; height: 100%;
border-radius: 50%;
background: #fff;
color: var(--ford-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
overflow: hidden;
}
.online-circle-avatar img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
.online-circle.online .online-circle-dot {
position: absolute;
bottom: 0; right: 0;
width: 10px; height: 10px;
border-radius: 50%;
background: #43a047;
border: 2px solid #fff;
box-shadow: 0 0 6px rgba(67,160,71,.6);
animation: onlinePulse 1.6s ease-in-out infinite;
}
@keyframes onlinePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: .85; }
}
/* Skeleton de carga */
.online-circle.skeleton .online-circle-ring,
.online-circle.skeleton .online-circle-avatar {
background: var(--gray-200) !important;
animation: skeletonPulse 1.4s ease-in-out infinite;
color: transparent;
}
.online-circle.skeleton:not(:first-child) { margin-left: -14px; }
@keyframes skeletonPulse {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
.menu-drawer-body {
overflow-y: auto;
flex: 1;
padding: 4px 0 8px;
-webkit-overflow-scrolling: touch;
font-family: inherit; /* misma tipografía global en todo el drawer */
}
/* === Homogeneidad del menú hamburguesa ===
TODOS los items del drawer (los de categoría y los sueltos al final como
"Descargar app", "Activar notificaciones", "Cerrar sesión", etc.) usan
exactamente la misma tipografía, tamaño, icono y flecha. Solo se exceptúa
`.menu-item-profile` (la tarjeta grande "Mi perfil" arriba). */
.menu-drawer-body .menu-item:not(.menu-item-profile) {
width: 100%;
margin: 0 0 2px;
padding: 9px 10px;
display: flex;
align-items: center;
gap: 10px;
font-family: inherit;
font-size: 18px; /* normalizado con la lista SYNC de Administración */
font-weight: 500;
color: var(--gray-900);
background: transparent;
border: none;
border-radius: 8px;
box-shadow: none;
text-align: left;
}
.menu-drawer-body .menu-item:not(.menu-item-profile) .menu-item-icon {
width: 26px;
text-align: center;
font-size: 18px; /* iconos del drawer estandarizados a 18px */
color: var(--ford-blue);
flex-shrink: 0;
}
.menu-drawer-body .menu-item:not(.menu-item-profile) .menu-item-arrow {
margin-left: auto;
font-size: 11px;
color: var(--gray-400);
}
.menu-drawer-body .menu-item:not(.menu-item-profile):hover {
background: var(--gray-100);
}
.menu-drawer-body .menu-item:not(.menu-item-profile):active {
transform: scale(0.99);
}
/* Items sueltos (no dentro de menu-cat-items): mismo margen horizontal que las
categorías para que la columna izquierda quede alineada visualmente. */
.menu-drawer-body > .menu-item:not(.menu-item-profile) {
width: calc(100% - 16px);
margin-left: 8px;
margin-right: 8px;
}
/* ===== Drawer categorías SIEMPRE expandidas (sin colapso) ===== */
.menu-cat {
margin: 6px 8px 4px;
background: transparent;
}
/* Categorías y items del drawer comparten el MISMO tamaño de fuente (13px).
Sin uppercase forzado — todo en sentence case para que se lea uniforme. */
.menu-cat-header {
padding: 8px 10px 6px;
display: flex;
align-items: center;
gap: 10px;
font-family: inherit;
font-size: 18px; /* estandarizado: todo el texto del drawer a 18px */
font-weight: 700;
color: var(--ford-blue);
text-transform: none;
letter-spacing: 0;
user-select: none;
border-bottom: 1px solid var(--gray-100);
margin-bottom: 4px;
}
.menu-cat-icon {
width: 26px;
text-align: center;
color: var(--ford-blue);
font-size: 18px; /* iconos del drawer estandarizados a 18px */
flex-shrink: 0;
}
.menu-cat-header span { flex: 1; }
.menu-cat-items {
padding: 0;
background: transparent;
/* sangría visual ligera para mostrar jerarquía submenu */
padding-left: 14px;
border-left: 2px solid var(--gray-100);
margin-left: 10px;
}
/* Después de "Mi perfil" agregamos un pequeño respiro lateral */
.menu-drawer-body .menu-item-profile + .menu-item { margin-top: 6px; }
/* ===== Itinerario semanal de limpieza (matriz) ===== */
.itin-week-nav {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin: 4px 16px 8px;
font-size: 13px; font-weight: 700;
}
.itin-week-label { min-width: 200px; text-align: center; }
.itin-table-wrap {
margin: 0 8px 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.itin-table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
min-width: 0;
table-layout: fixed;
font-size: 11px;
}
.itin-table th, .itin-table td {
border: 1px solid var(--gray-200);
padding: 6px 4px;
text-align: center;
vertical-align: middle;
background: transparent;
}
.itin-table thead th {
background: transparent;
font-weight: 800;
color: var(--gray-800);
position: sticky;
top: 0;
z-index: 2;
text-transform: uppercase;
letter-spacing: .4px;
font-size: 11px;
}
.itin-table th.itin-day { min-width: 0; padding: 4px 2px; cursor: pointer; user-select: none; transition: background .12s; }
.itin-table th.itin-day:hover { background: #eaf2fb; }
.itin-table th.itin-day.today { background: var(--ford-blue); color: #fff; border-radius: 8px; background-clip: padding-box; }
.itin-table th.itin-day.filter-active { background: #d97706 !important; color: #fff !important; box-shadow: inset 0 -3px 0 #92400e; }
/* Fila del depto: ahora cada celda corresponde a un día. La celda con el título
se posiciona bajo la columna del día que le toca a ese depto.
Altura aumentada ~1.5x para que la fila del depto se vea más prominente. */
.itin-table .itin-row-depto td.itin-depto-cell {
background: transparent;
font-weight: 800;
text-align: center;
padding: 4px 6px; /* filas más compactas (sin tocar tamaño de letra) */
white-space: nowrap;
overflow: visible; /* permitir que el nombre se desborde a celdas vacías a la derecha */
position: relative;
z-index: 2;
min-height: 24px;
}
.itin-table .itin-row-depto td.itin-depto-cell-empty {
background: transparent;
padding: 4px 0; /* mismo padding vertical para mantener altura uniforme */
min-height: 24px;
}
.itin-table .itin-row-depto td.itin-depto-cell-secundaria {
background: transparent;
padding: 4px 2px;
text-align: center;
min-height: 24px;
}
.itin-depto-pin {
display: inline-block;
min-width: 18px;
padding: 1px 6px;
border-radius: 9px;
background: #cfe9d4;
color: #1f5b2c;
font-size: 10px;
font-weight: 800;
line-height: 1.2;
}
.itin-depto-col { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: max-content; margin: 0 auto; }
.itin-depto-col .depto-name { flex: 1; }
.itin-depto-col .btn-eye {
padding: 3px 6px;
font-size: 11px;
border-radius: 6px;
background: transparent;
border: 1px solid var(--gray-300);
color: var(--gray-600);
cursor: pointer;
}
.itin-depto-col .btn-eye:hover { background: var(--gray-100); }
.itin-cell {
cursor: pointer;
transition: background .12s ease;
height: auto;
min-height: 22px;
position: relative;
background: #fff;
padding: 2px 1px;
}
.itin-cell:hover { background: var(--gray-100); }
/* Tag pequeño con texto: "Tareas", "Habitaciones" (con salto), "Areas comunes" (con salto) */
.itin-tag {
display: inline-block;
padding: 2px 4px;
border-radius: 5px;
font-size: 8px;
font-weight: 800;
letter-spacing: .2px;
line-height: 1.05;
text-transform: uppercase;
white-space: pre-line; /* respeta el \n para 2 palabras en 2 líneas */
text-align: center;
}
.itin-cell.tipo-hab.activa .itin-tag { background: #cfe1ff; color: #003478; }
.itin-cell.tipo-com.activa .itin-tag { background: #cfe9d4; color: #1f5b2c; }
.itin-cell.tipo-acc.activa .itin-tag { background: #ede6ff; color: #4c1d95; }
/* Etiquetas (Habitaciones / Áreas comunes) centradas en su celda */
.itin-row-tipo .itin-cell { text-align: center; vertical-align: middle; min-height: 0; padding: 1px; }
.itin-row-tipo .itin-tag { margin: 0 auto; }
/* Chips arrastrables: mantener presionado y mover de día */
.itin-drag { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.itin-drag.itin-dragging { opacity: .35; }
.itin-drag-ghost { box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.itin-cell.itin-drop-hover { outline: 2px dashed var(--ford-blue); outline-offset: -2px; background: #eaf2fb; border-radius: 8px; }
/* ===== Itinerario compacto: 1 fila por depa (nombre fijo + chips por día) ===== */
.itin-name-col-head { width: 62px; background: transparent; }
.itin-name-cell {
width: 62px; text-align: center; font-weight: 800; padding: 3px 4px;
background: transparent; border-radius: 8px; background-clip: padding-box; vertical-align: middle;
}
.itin-name-cell.toca-hoy { background: var(--ford-blue); }
.itin-name-cell.toca-hoy .depto-name { color: #fff; }
.itin-day-cell { vertical-align: middle; padding: 2px; }
.itin-day-cell .itin-tag { display: block; width: fit-content; max-width: 100%; margin: 2px auto; }
.itin-tag.tipo-hab { background: #cfe1ff; color: #003478; }
.itin-tag.tipo-com { background: #cfe9d4; color: #1f5b2c; }
/* Fila del depto (clickeable para colapsar) */
.itin-row-depto { cursor: pointer; }
.itin-row-depto:hover td.itin-depto-cell,
.itin-row-depto:hover td.itin-depto-cell-empty,
.itin-row-depto:hover td.itin-depto-cell-secundaria { background: #eef2ff !important; }
/* Croquis preview en limpieza */
.itin-row-croquis td {
padding: 0 !important;
background: transparent;
}
/* ===== Indicadores de pilas por depa (entre los desplegables del itinerario) ===== */
.itin-pilas-wrap {
padding: 10px 2px;
border-top: 1px solid var(--gray-100, #f3f4f6);
border-bottom: 1px solid var(--gray-100, #f3f4f6);
}
.itin-pilas-title {
font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--gray-500, #6b7280);
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
/* Chips COMPACTOS y horizontales: caben todos en UNA sola fila (menos altura). */
.itin-pilas {
display: flex; flex-direction: column; gap: 6px;
}
.pila-chip {
flex: 0 0 auto; width: 100%; min-width: 0;
display: flex; flex-direction: row; align-items: center; gap: 6px;
padding: 10px 10px; min-height: 72px; border: 0; /* el doble de altas */
border-radius: 11px; background: #fff; cursor: pointer; text-align: left;
transition: box-shadow .15s, transform .12s, background .12s;
/* Sombra estilo Ford SYNC: flotante pero pegado */
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
}
.pila-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18); }
.pila-chip:active { transform: translateY(0) scale(.99); box-shadow: 0 1px 2px rgba(16,24,40,.10); }
.pila-ico { font-size: 16px; flex-shrink: 0; }
.pila-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.pila-lbl {
font-size: 13px; font-weight: 600; color: var(--gray-700, #374151);
max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pila-bar {
width: 100%; height: 4px; border-radius: 3px; background: var(--gray-200, #e5e7eb);
overflow: hidden;
}
.pila-fill { display: block; height: 100%; border-radius: 3px; transition: width .3s; }
.pila-pct { font-size: 14px; font-weight: 700; flex-shrink: 0; }
/* Selector 0 / 50 / 100 % al tocar una pila */
.pila-picker-ov { position: fixed; inset: 0; z-index: 600; background: rgba(0,0,0,.45);
display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px); }
.pila-picker-sheet { background: #fff; border-radius: 16px 16px 0 0; width: 100%; max-width: 460px;
padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column;
gap: 10px; box-shadow: 0 -8px 32px rgba(0,0,0,.2); animation: slideUp .2s ease; }
.pila-picker-head { font-size: 13px; font-weight: 700; color: var(--gray-800); text-align: center; line-height: 1.4; }
.pila-picker-head small { font-weight: 500; color: var(--gray-500); font-size: 11px; }
.pila-picker-opt { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 12px;
border: 1.5px solid var(--gray-200); background: #fff; font-size: 15px; font-weight: 700;
color: var(--gray-800); cursor: pointer; text-align: left; }
.pila-picker-opt.actual { border-color: var(--c); background: #f8fafc; }
.pila-picker-opt:active { transform: scale(.98); }
.pila-picker-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.pila-picker-cancel { padding: 11px; border: 0; background: var(--gray-100); border-radius: 12px;
font-weight: 600; color: var(--gray-600); cursor: pointer; }
/* ===== Panel WA ===== */
.wa-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px;
padding: 16px; margin: 12px auto; max-width: 720px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.wa-card-title { font-size: 15px; font-weight: 800; color: var(--gray-900); margin: 0 0 12px;
display: flex; align-items: center; gap: 8px; }
.wa-card-title .fa-whatsapp { color: #25D366; }
.wa-img-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.wa-img-preview { position: relative; max-width: 200px; margin: 6px 0; }
.wa-img-preview img { width: 100%; border-radius: 10px; display: block; }
.wa-img-quitar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%;
border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }
.wa-grupos-label { font-size: 12px; font-weight: 700; color: var(--gray-600);
text-transform: uppercase; letter-spacing: .03em; margin: 12px 0 6px; }
.wa-grupos-lista { display: flex; flex-direction: column; gap: 6px; }
.wa-grupo-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border: 1.5px solid var(--gray-200); border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; }
.wa-grupo-item input { width: 18px; height: 18px; accent-color: #25D366; }
.wa-resultado { margin-top: 10px; }
.wa-res { padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.wa-res.ok { background: var(--green-light, #e7f8ed); color: #16a34a; }
.wa-res.err { background: var(--red-light, #fde8e8); color: #dc2626; }
.wa-bots-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wa-bot { border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 14px; background: #fafbfc; }
.wa-bot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.wa-bot-head strong { font-size: 14px; }
.wa-bot-cmd { background: #eef2ff; color: #1769FF; font-size: 12px; font-weight: 700;
padding: 2px 8px; border-radius: 6px; }
.wa-bot-edit { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 0;
background: #eef2f7; color: var(--ford-blue); cursor: pointer; }
.wa-bot-row { font-size: 12.5px; color: var(--gray-700); line-height: 1.5; margin-top: 2px; }
.wa-bot-row b { color: var(--gray-900); }
.wa-form-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--gray-600); margin: 8px 0 3px; }
/* ============================================================================
PRUEBA — tema estilo "Apple Settings": fondo gris claro + tarjetas/listas
blancas redondeadas + barra superior translúcida. (Cambio contenido; si no
gusta, se quita este bloque.)
============================================================================ */
:root { --ios-bg: #f2f2f7; --ios-card: #ffffff; --ios-sep: #e5e5ea; }
/* Fondo BLANCO de toda el área de contenido */
#app-content { background: var(--white); }
/* Barra superior (toolbar) translúcida con blur, como las nav bars de iOS */
.view-toolbar-slot {
background: rgba(249,249,251,.92);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
}
/* Listas → "grupos" iOS: tarjeta blanca redondeada con separadores finos */
.view-body .list-container {
background: var(--ios-card);
border-radius: 12px;
overflow: hidden;
margin: 10px 0 14px;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.view-body .list-container > * { border-bottom: 1px solid var(--ios-sep); }
.view-body .list-container > *:last-child { border-bottom: 0; }
/* Tiles (limpieza/admin) y tarjetas: sombra suave estilo iOS */
.limpieza-app {
box-shadow: 0 1px 2px rgba(0,0,0,.06);
border: 1px solid rgba(0,0,0,.05);
}
.wa-card, .info-card { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
/* Encabezados de sección, gris tenue como iOS */
.view-body .list-section-header,
.view-body .section-header h3 { color: var(--gray-600); }
/* Filas del directorio: integradas a la tarjeta (sin doble borde) */
.view-body .list-container .dir-row { border-bottom: 1px solid var(--ios-sep); }
/* --- Chat: SIN avatar en las burbujas (se entiende con quién hablas) --- */
.msg-side-avatar { display: none !important; }
/* --- Hubs (Limpieza / Admin / Tickets) con cuadraditos que se auto-ajustan,
igual que "Mi espacio": 4 cols en móvil, 6 en tablet, 8 en desktop --- */
@media (min-width: 600px) { .limpieza-apps { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) { .limpieza-apps { grid-template-columns: repeat(8, 1fr); } }
/* --- Móvil: el álbum/slider de anuncios al MISMO ancho que el banner --- */
@media (max-width: 719px) {
.anuncios-album-home { margin: 4px 0 14px; }
.anuncios-album-preview { border-radius: 18px; }
}
/* --- Menú hamburguesa estilo iOS Settings: fondo gris + grupos en tarjetas --- */
#menu-drawer { background: var(--ios-bg); }
#menu-drawer .menu-cat {
background: var(--ios-card); border-radius: 12px; margin: 10px 12px; overflow: hidden;
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
#menu-drawer .menu-cat-items > .menu-item { border-bottom: 1px solid var(--ios-sep); }
#menu-drawer .menu-cat-items > .menu-item:last-child { border-bottom: 0; }
/* --- Administración estilo SYNC en LISTA: reusa .limpieza-app (mismo aspecto
de ícono glossy + animación de tap) pero en fila (ícono + nombre),
estilo ajustes de iOS, dentro del cajón hamburguesa. --- */
#menu-drawer .sync-list { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; }
#menu-drawer .sync-list .limpieza-app {
flex-direction: row; align-items: center; justify-content: flex-start;
gap: 13px; text-align: left; width: 100%; padding: 6px 12px;
}
#menu-drawer .sync-list .limpieza-app .limpieza-app-name {
font-size: 18px !important; font-weight: 600; margin-top: 0; white-space: normal;
}
/* Íconos pequeños en la lista: -60% del tamaño real (74px/36px → ~30px/14px).
El estilo base usa !important, así que aquí también, y ajusto --app-glyph. */
#menu-drawer .sync-list .limpieza-app-icon {
--app-glyph: 18px !important; /* glifo estandarizado a 18px como el resto del drawer */
width: 30px !important;
height: 30px !important;
font-size: 18px !important;
border-radius: 7px !important;
-webkit-text-stroke-width: 1.4px;
flex: none;
}
/* --- Notificaciones estilo iOS (vista Y drawer, web y móvil): cada aviso es
una tarjeta blanca redondeada flotante; iconos como "squircle". --- */
#view-notificaciones .notif-item,
#view-notificaciones .notif-card,
#notif-drawer .notif-item {
background: var(--ios-card); border-radius: 14px; margin: 8px 10px; border: 0 !important;
box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 13px 14px;
}
#view-notificaciones .notif-item.unread,
#notif-drawer .notif-item.unread { background: #fff; }
#view-notificaciones .notif-item.unread::before,
#notif-drawer .notif-item.unread::before { left: -2px; }
#notif-drawer { background: var(--ios-bg); }
#view-notificaciones .notif-icon,
#notif-drawer .notif-icon { border-radius: 13px; } /* squircle estilo iOS */
/* La vista de notificaciones sobre fondo gris */
#view-notificaciones .view-body, #notificaciones-body { background: var(--white); }
/* --- DRAWER de notificaciones (panel lateral) estilo iOS --- */
#notif-drawer .notif-drawer-body,
#notif-drawer .notif-drawer-list { background: var(--ios-bg); }
#notif-drawer .notif-drawer-item {
background: var(--ios-card); border-radius: 14px; margin: 8px 10px; border: 0 !important;
box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 12px 13px;
}
#notif-drawer .notif-drawer-item.unread,
#notif-drawer .notif-drawer-item.unread:hover { background: #fff; }
#notif-drawer .notif-drawer-icon { border-radius: 11px; }
#notif-drawer .notif-drawer-footer { background: var(--ios-bg); border-top: 1px solid var(--ios-sep); }
.notif-view-tabs { background: var(--ios-bg); border-bottom: 0; padding: 12px 14px 8px; }
.notif-view-tabs .notif-tab, .notif-tab { background: #e3e3ea; color: var(--gray-700); }
.notif-view-tabs .notif-tab.active, .notif-tab.active { background: var(--ford-blue); color: #fff; }
/* ===== Itinerario estilo iOS (tarjeta redondeada, fondo blanco) ===== */
.itin-table-wrap {
/* fondo azul glossy (el mismo de la barra superior y el menú) */
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%);
border: 1px solid var(--gray-200); border-radius: 18px;
/* misma sombra que los botones (.limpieza-app) */
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
padding: 4px 6px; margin: 0 8px 16px;
overflow: hidden; /* recorta las esquinas redondeadas de la tabla */
}
/* Vista "Itinerario" (completa): tabla con fondo TRANSPARENTE */
.itin-table-wrap.itin-table-wrap-full { background: transparent; box-shadow: none; border: none; }
/* Navegación de semana (flechitas) del itinerario */
.itin-semana-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.itin-semana-arrow { width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; color: var(--ford-blue); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.itin-semana-arrow:active { background: #eef2f7; }
.itin-semana-label { flex: 1; min-width: 0; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; padding: 9px 8px; font-size: 13px; font-weight: 600; color: var(--gray-800); cursor: pointer; text-align: center; }
/* Controles de edición del itinerario (solo admin) */
.itin-edit-controls { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gray-200); }
.itin-edit-hint { font-size: 12px; color: var(--gray-600); margin: 0 2px 10px; }
.itin-semana-estado { font-size: 12px; font-weight: 600; color: var(--gray-700); margin: 0 2px 10px; }
.itin-override-dot { color: #ec407a; font-size: 11px; vertical-align: middle; }
/* Hint bajo la preview de Limpieza: toca para ir al itinerario completo */
.itin-preview-hint { text-align: center; font-size: 12px; color: var(--ford-blue); font-weight: 600; margin: 8px 8px 0; cursor: pointer; }
.itin-table th, .itin-table td { border: 0; } /* sin línea gris entre filas */
.itin-table tbody tr:last-child td { border-bottom: 0; }
.itin-table thead th { background: transparent; color: var(--gray-600); }
/* Pequeña separación visual entre el topbar fijo y el contenido */
.app-topbar { box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.itin-cro-wrap {
padding: 6px 12px 10px;
display: flex;
flex-direction: column;
gap: 0; /* sin salto entre desplegables/botones */
}
/* Section colapsable unificada (Croquis y Leyenda usan el mismo estilo).
Contorno transparente — solo se ve el contenido. */
.itin-cro-section {
background: transparent;
border: 1px solid transparent;
border-radius: 10px;
padding: 6px 8px;
overflow: hidden;
}
.itin-cro-section-head {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
user-select: none;
}
.itin-cro-section-head h4 {
margin: 0;
font-size: 13px;
text-transform: none; /* sentence case (Mayúscula y minúsculas) */
letter-spacing: 0;
color: var(--gray-800);
font-weight: 600;
}
.itin-cro-section-head h4 i { color: var(--ford-blue); margin-right: 4px; }
.itin-cro-section.collapsed .ord-leyenda-chevron { transform: rotate(-90deg); }
.itin-cro-section.collapsed .itin-cro-section-body { display: none; }
.itin-cro-section-body { margin-top: 4px; }
.itin-cro-tap-hint {
font-size: 10px;
color: var(--gray-500);
font-style: italic;
}
/* Pestañas (tabs) dentro del croquis */
.itin-cro-tabs {
display: flex;
gap: 4px;
margin-bottom: 8px;
flex-wrap: wrap;
}
.itin-cro-tab {
background: #f1f5f9;
border: 1px solid var(--gray-200);
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
color: var(--gray-700);
cursor: pointer;
font-weight: 600;
transition: background .12s, color .12s, border-color .12s;
}
.itin-cro-tab:hover { background: #eaf2fb; }
.itin-cro-tab.active {
background: var(--ford-blue);
color: #fff;
border-color: var(--ford-blue);
}
.itin-cro-canvas-wrap {
background: transparent;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 6px;
display: flex;
justify-content: center;
align-items: center;
cursor: zoom-in;
transition: background .15s;
}
.itin-cro-canvas-wrap:hover {
background: #f5f9ff;
}
.itin-cro-canvas-wrap canvas {
width: 100%;
max-width: 480px;
height: auto;
display: block;
pointer-events: none;
}
/* Lightbox del croquis (zoom + pan) */
.itin-cro-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.85);
z-index: 99999;
display: flex;
flex-direction: column;
}
.itin-cro-lightbox.hidden { display: none; }
.itin-cro-lightbox-toolbar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(0,0,0,.6);
color: #fff;
}
.itin-cro-lightbox-title {
font-weight: 600;
font-size: 14px;
}
.itin-cro-lightbox-btn {
background: rgba(255,255,255,.12);
color: #fff;
border: none;
border-radius: 8px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.itin-cro-lightbox-btn:hover { background: rgba(255,255,255,.22); }
.itin-cro-lightbox-btn.itin-cro-lightbox-close { background: rgba(220,38,38,.7); }
.itin-cro-lightbox-btn.itin-cro-lightbox-close:hover { background: rgba(220,38,38,.9); }
.itin-cro-lightbox-zoom {
color: #fff;
font-size: 13px;
min-width: 48px;
text-align: center;
}
.itin-cro-lightbox-body {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
touch-action: none;
user-select: none;
}
.itin-cro-lightbox-body:active { cursor: grabbing; }
#itin-cro-lightbox-canvas {
background: #fff;
border-radius: 8px;
max-width: 90vw;
max-height: calc(100vh - 80px);
width: auto;
height: auto;
transform-origin: center center;
transition: transform .05s linear;
pointer-events: none;
}
.itin-cro-vacio .itin-cro-canvas-wrap {
min-height: 80px;
}
.itin-cro-vacio-msg {
font-size: 12px;
color: var(--gray-500);
font-style: italic;
padding: 12px;
}
.itin-cro-leyenda-list {
display: flex;
flex-direction: column;
gap: 6px;
}
/* Mini dashboard de Mi espacio — siempre 3 columnas en móvil para que entren
tres iconos por fila. En tablet/desktop crecemos a 4/5 columnas. */
.me-mini-dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 iconos por línea en móvil */
gap: 8px;
padding: 0 14px 24px;
}
@media (min-width: 600px) {
.me-mini-dashboard { grid-template-columns: repeat(6, 1fr); gap: 18px 16px; padding: 4px 20px 26px; }
}
@media (min-width: 900px) {
.me-mini-dashboard { grid-template-columns: repeat(8, 1fr); gap: 24px 20px; padding: 6px 28px 30px; }
}
.me-mini-card {
background: #fff;
border: none; /* sin contorno */
border-radius: 12px;
padding: 10px 4px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
text-align: center;
font-family: inherit;
transition: box-shadow .15s, transform .12s, background .12s;
min-width: 0;
/* Estilo Ford SYNC: tarjeta elevada, sombra flotante */
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
}
.me-mini-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18);
}
.me-mini-card:active {
transform: translateY(0) scale(.97);
box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
/* Squircle iOS · sin sombra (look plano, igual que quick-actions) */
.me-mini-icon {
width: 56px;
height: 56px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent; /* sin relleno azul */
color: var(--ford-blue); /* glifo azul Ford */
font-size: 30px;
}
.me-mini-title {
font-size: 11.5px;
font-weight: 600;
color: var(--gray-900);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Subtítulo eliminado — ya no se usa en Mi Espacio. Si alguna vista legacy
aún lo renderea, lo ocultamos para mantener el look consistente. */
.me-mini-sub { display: none; }
@media (min-width: 600px) {
.me-mini-icon { width: 60px; height: 60px; font-size: 34px; }
.me-mini-title { font-size: 12px; }
}
/* Lista de FAQs */
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 8px 12px;
}
.faq-item summary {
font-size: 13px;
font-weight: 700;
color: var(--gray-900);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
}
.faq-item summary::before {
content: '+';
display: inline-block;
width: 16px;
height: 16px;
background: var(--ford-blue);
color: #fff;
border-radius: 50%;
font-size: 14px;
font-weight: 800;
line-height: 16px;
text-align: center;
flex-shrink: 0;
transition: transform .2s;
}
.faq-item[open] summary::before { content: '−'; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p {
margin: 8px 0 0;
padding-left: 24px;
font-size: 12px;
color: var(--gray-700);
line-height: 1.45;
}
/* Lista de Cuidados sugeridos */
.cuidados-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.cuidados-list li {
font-size: 13px;
color: var(--gray-800);
line-height: 1.45;
padding: 8px 12px;
background: #f0fdf4;
border-left: 3px solid #16a34a;
border-radius: 6px;
}
/* Modal Avisos & circulación */
.avisos-card {
display: flex;
align-items: flex-start;
gap: 10px;
background: #eaf2fb;
border-left: 3px solid var(--ford-blue);
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 10px;
}
.avisos-card i { color: var(--ford-blue); font-size: 18px; margin-top: 2px; }
.avisos-toggles { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.avisos-toggle {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--gray-800);
cursor: pointer;
background: #f9fafb;
border-radius: 8px;
padding: 8px 10px;
}
.avisos-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ford-blue); cursor: pointer; }
/* Mi espacio (residente) */
.mi-espacio-header {
background: transparent;
border: none;
border-radius: 0;
padding: 16px 16px 6px;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.me-header-label {
font-size: 12px; font-weight: 600; letter-spacing: .05em;
text-transform: uppercase; color: var(--gray-500);
}
.me-header-depa {
font-size: 30px; font-weight: 800; line-height: 1.05;
color: var(--ford-blue); letter-spacing: -.5px;
}
/* Botón de acceso a la vista "Croquis y espacios" (Mi espacio) */
.me-cro-entry {
display: flex; align-items: center; gap: 12px;
width: calc(100% - 28px);
margin: 4px 14px 14px;
padding: 14px 16px;
background: #fff; border: none; border-radius: 14px;
cursor: pointer; font-family: inherit; text-align: left;
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
transition: box-shadow .15s, transform .12s;
}
.me-cro-entry:active { transform: scale(.985); }
.me-cro-entry-ic {
width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--blue-light, #e6efff); color: var(--ford-blue); font-size: 18px;
}
.me-cro-entry-tx { flex: 1; font-size: 15px; font-weight: 700; color: var(--gray-900); }
.me-cro-entry-arrow { color: var(--gray-400); font-size: 14px; }
/* Accesos de Mi espacio estilo "playlist": fondo transparente, portada
cuadrada de color con el icono, título y línea divisoria fina. */
.me-lista { display: flex; flex-direction: column; gap: 0; padding: 0 12px 24px; }
.me-lista .me-cro-entry {
width: 100%; margin: 0;
padding: 8px 8px; gap: 14px;
background: transparent; box-shadow: none; border-radius: 10px;
border-bottom: 1px solid rgba(16,24,40,.08);
}
.me-lista .me-cro-entry:hover { background: rgba(16,24,40,.04); }
.me-lista .me-cro-entry:active { background: rgba(16,24,40,.07); }
.me-lista .me-cro-entry .me-cro-entry-ic {
width: 46px; height: 46px; border-radius: 9px; font-size: 19px;
color: #fff; background: linear-gradient(135deg, #3b82f6, #1e40af);
box-shadow: 0 2px 6px rgba(16,24,40,.18);
}
.me-lista .me-cro-entry:nth-child(8n+2) .me-cro-entry-ic { background: linear-gradient(135deg, #f59e0b, #c2410c); }
.me-lista .me-cro-entry:nth-child(8n+3) .me-cro-entry-ic { background: linear-gradient(135deg, #10b981, #047857); }
.me-lista .me-cro-entry:nth-child(8n+4) .me-cro-entry-ic { background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.me-lista .me-cro-entry:nth-child(8n+5) .me-cro-entry-ic { background: linear-gradient(135deg, #ec4899, #9d174d); }
.me-lista .me-cro-entry:nth-child(8n+6) .me-cro-entry-ic { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.me-lista .me-cro-entry:nth-child(8n+7) .me-cro-entry-ic { background: linear-gradient(135deg, #ef4444, #991b1b); }
.me-lista .me-cro-entry:nth-child(8n+8) .me-cro-entry-ic { background: linear-gradient(135deg, #64748b, #334155); }
.me-lista .me-cro-entry .me-cro-entry-tx { font-size: 17px; font-weight: 600; }
.me-lista .me-cro-entry .me-cro-entry-arrow { font-size: 13px; opacity: .7; }
@media (min-width: 700px) {
.me-lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding: 4px 20px 26px; }
}
@media (min-width: 1100px) {
.me-lista { grid-template-columns: 1fr 1fr 1fr; }
}
/* Encabezado de sección en la vista Croquis y espacios */
.me-cro-sech {
margin: 4px 2px 8px; font-size: 14px; font-weight: 700;
color: var(--ford-blue); display: flex; align-items: center; gap: 8px;
}
/* Selector de depa en la vista Croquis y espacios (admin/limpieza) */
.cd-depa-label {
display: block; font-size: 12px; color: var(--gray-500);
font-weight: 600; margin: 2px 2px 4px;
}
.cd-depa-select {
width: 100%; padding: 10px 12px; margin-bottom: 14px;
border: 2px solid var(--ford-blue); border-radius: 10px;
font-size: 14px; font-weight: 600; color: var(--gray-900);
background: #fff; box-sizing: border-box;
}
/* Fondo BLANCO en los menús con botones glossy (el relieve de los tiles ya da
suficiente contraste; no se usa tinte azul/gris). */
#view-admin-hub.view.active,
#view-limpieza.view.active,
#view-mantenimiento.view.active,
#view-mi-espacio.view.active {
background: var(--white);
}
/* Matriz de inventario: artículos × departamentos */
.invm-titulo { font-size:13px; font-weight:800; color:var(--ford-blue); margin:4px 2px 6px; display:flex; align-items:center; gap:6px; }
.invm-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--gray-200); border-radius:10px; margin-bottom:14px; }
.invm-table { border-collapse:collapse; font-size:12px; width:max-content; min-width:100%; background:#fff; }
.invm-table th, .invm-table td { padding:0 4px; border-bottom:1px solid var(--gray-100); text-align:center; white-space:nowrap; }
.invm-table thead th { background:#f3f4f6; color:#6b7280; font-size:11px; font-weight:700; position:sticky; top:0; z-index:1; }
.invm-table th.invm-art, .invm-table td.invm-art { text-align:left; position:sticky; left:0; background:#fff; }
.invm-table thead th.invm-art { background:#f3f4f6; z-index:2; }
/* Nombre del artículo: UNA sola línea por defecto (alto fijo, sin desperdiciar
espacio); al enfocar/tocar se expande y muestra el texto completo, editable. */
.invm-name { width:140px; max-width:200px; padding:1px 6px; border:1px solid var(--gray-200); border-radius:7px; font-size:13px; box-sizing:border-box; display:block; font-family:inherit; line-height:1.15; height:22px; white-space:nowrap; overflow:hidden; resize:none; vertical-align:middle; }
.invm-name:focus { white-space:nowrap; overflow:auto; height:22px; }
.invm-chk input { width:18px; height:18px; cursor:pointer; accent-color: var(--ford-blue); }
/* Lista desplegable de depto dentro del encabezado de la columna de checkbox */
.invm-dep-sel { width:auto; min-width:56px; max-width:92px; padding:4px 4px; border:1px solid var(--gray-300, #d1d5db); border-radius:8px; font-size:10px; font-weight:700; color:var(--ford-blue); background:#fff; }
.invm-dep-lbl { display:inline-block; padding:4px 6px; border-radius:8px; font-size:10px; font-weight:700; color:var(--ford-blue); background:#eef4ff; }
/* ===== Casa / Smart Life (IoT) — botones estilo SYNC (squircle + nombre debajo) ===== */
.iot-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:8px; }
.iot-dev { display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:none;
cursor:pointer; padding:6px 2px; width:100%; font-family:inherit; }
.iot-dev-ico { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
font-size:22px; background:#eef0f3; color:#9aa3af; box-shadow:0 1px 3px rgba(16,24,40,.12);
transition:background .15s,color .15s,box-shadow .15s,transform .1s; }
.iot-dev.on .iot-dev-ico { background:#dcfce7; color:#16a34a; box-shadow:0 2px 10px rgba(22,163,74,.32); }
.iot-dev.pending .iot-dev-ico { background:#fef3c7; color:#b45309; animation:iotPulse 1s ease-in-out infinite; }
@keyframes iotPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(180,83,9,.35);} 50%{ box-shadow:0 0 0 6px rgba(180,83,9,0);} }
.iot-dev.pending .iot-dev-estado { color:#b45309; }
.iot-dev:active .iot-dev-ico { transform:scale(.93); }
.iot-dev[disabled] { opacity:.45; cursor:not-allowed; }
.iot-dev-name { font-size:11px; font-weight:600; color:#374151; text-align:center; line-height:1.15;
max-width:84px; overflow-wrap:anywhere; }
.iot-dev-estado { font-size:9.5px; font-weight:700; letter-spacing:.3px; }
.iot-dev.on .iot-dev-estado { color:#16a34a; }
.iot-dev .iot-dev-estado { color:#9aa3af; }
.invm-precio-inp { width:58px; padding:3px 5px; border:1px solid var(--gray-200); border-radius:7px; font-size:12px; text-align:right; box-sizing:border-box; }
.invm-tipo-sel { width:auto; min-width:54px; max-width:80px; padding:1px 4px; border:1px solid var(--gray-300, #d1d5db); border-radius:7px; font-size:11px; font-weight:600; color:var(--ford-blue); background:#fff; }
/* Precio: máximo 4 dígitos (hasta $9000) → botón angosto. */
.invm-precio-btn { width:58px; padding:2px 6px; border:1px solid var(--gray-300, #d1d5db); border-radius:7px; font-size:12px; font-weight:700; text-align:right; color:#1f2937; background:#fff; cursor:pointer; font-family:inherit; }
.invm-precio-btn:active { background:#eef2f7; }
.invm-table td.invm-precio, .invm-table th.invm-precio-h { min-width:58px; }
/* Columna de eliminar: angosta (el icono no necesita tanto ancho) → deja más
espacio al artículo. */
.invm-table td.invm-del, .invm-table th.invm-del { width:32px; padding:2px 2px; }
.invm-del .btn-icon { width:28px; height:28px; }
/* Un solo depto: la matriz ocupa el ancho y el nombre del artículo se expande */
.invm-single .invm-table { width:100%; }
.invm-single td.invm-art, .invm-single th.invm-art { width:100%; }
.invm-single .invm-name { width:100%; max-width:none; }
/* Toggle Permiso/Vacaciones (vista Permisos) — segmentado iOS */
.perm-tipo-toggle { display:flex; gap:6px; background:#e3e3ea; border-radius:12px; padding:4px; margin-bottom:14px; }
.perm-tipo-btn { flex:1; padding:9px; border:0; background:transparent; border-radius:9px; font-weight:700; font-size:14px; color:var(--gray-600); cursor:pointer; }
.perm-tipo-btn.active { background:#fff; color:var(--ford-blue); box-shadow:0 1px 3px rgba(0,0,0,.12); }
/* ===== Botón DUAL SYNC ===== Toggle segmentado con el MISMO estilo que el de
permisos (pista gris + segmento activo elevado). Reutilizable: checador
(entrada/salida) y evidencia (antes/después). Cada par conserva su color en el
segmento activo. La lógica (.active / :disabled) la maneja el JS de cada vista. */
.dual-sync { display:flex; gap:6px; background:#e3e3ea; border-radius:12px; padding:4px; }
.dual-sync-seg {
flex:1; min-width:0; padding:11px 8px; border:0; background:transparent;
border-radius:9px; font-weight:700; font-size:14px; color:var(--gray-600);
cursor:pointer; font-family:inherit; display:flex; align-items:center;
justify-content:center; gap:8px; line-height:1.15; text-align:center;
transition: background .18s, color .18s, box-shadow .18s, transform .1s;
}
.dual-sync-seg i { font-size:15px; flex-shrink:0; }
.dual-sync-seg.active { background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.dual-sync-seg:active { transform: scale(.98); }
.dual-sync-seg:disabled { color:var(--gray-400); cursor:not-allowed; opacity:.7; }
/* Variantes de color del segmento activo (se mantienen los colores de cada par) */
.dual-sync-seg.ds-entrada.active { background:#d4edda; color:#1e7e34; }
.dual-sync-seg.ds-salida.active { background:#fde2e2; color:#b91c1c; }
.dual-sync-seg.ds-antes.active { background:#fef3c7; color:#92400e; }
.dual-sync-seg.ds-despues.active { background:#dcfce7; color:#166534; }
/* Icono calendario con "30" dentro (botón Permisos) */
.limpieza-app-icon.cal30 { position: relative; }
.limpieza-app-icon.cal30::after {
content: "30";
position: absolute; left: 0; right: 0; top: 58%; transform: translateY(-50%);
text-align: center; font-size: .34em; font-weight: 800; letter-spacing: -.5px;
font-family: var(--font);
color: var(--ford-blue); -webkit-text-fill-color: var(--ford-blue); -webkit-text-stroke: 0;
}
/* Animación de carga de módulo (croquis, itinerario, etc.) */
.modulo-loading {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 40px 16px; color: var(--gray-500); font-size: 13px; font-weight: 600;
}
.modulo-loading.hidden { display: none; }
.modulo-spinner {
width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
border: 3px solid rgba(0,52,120,.15); border-top-color: var(--ford-blue);
animation: modulo-spin .8s linear infinite;
}
@keyframes modulo-spin { to { transform: rotate(360deg); } }
/* Modal de vacaciones — saldo destacado */
.vac-saldo {
background: #ecfdf5;
border: 1px solid #a7f3d0;
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #065f46;
}
.vac-saldo i { color: #059669; font-size: 16px; }
/* Modal de tareas por depa — compacto, una sola línea */
.tareas-lista {
display: flex;
flex-direction: column;
gap: 4px;
}
.tareas-item {
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 6px 8px;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.tareas-item.completada {
background: #ecfdf5;
border-color: #a7f3d0;
}
.tareas-item.completada .tareas-texto {
text-decoration: line-through;
color: var(--gray-500);
}
.tareas-check-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
margin: 0;
flex: 1;
min-width: 0;
}
.tareas-check {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--ford-blue);
flex-shrink: 0;
}
.tareas-texto {
font-size: 13px;
font-weight: 600;
color: var(--gray-900);
flex: 1;
line-height: 1.2;
}
.tareas-tag-adicional {
display: inline-block;
background: #fbbf24;
color: #78350f;
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 999px;
margin-right: 4px;
vertical-align: middle;
}
.tareas-stamp {
font-size: 10px;
color: var(--gray-500);
white-space: nowrap;
}
.tareas-btn-icon {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: 2px 5px;
border-radius: 4px;
font-size: 11px;
flex-shrink: 0;
}
.tareas-btn-icon:hover { background: var(--gray-100); color: var(--gray-700); }
.tareas-btn-icon.tareas-btn-danger:hover { background: #fee2e2; color: #b91c1c; }
.tareas-detalle {
font-size: 11px;
color: var(--gray-600);
font-style: italic;
flex-basis: 100%;
padding-left: 26px;
line-height: 1.2;
margin: 2px 0 0;
}
.tareas-admin-bar {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid var(--gray-200);
display: flex;
justify-content: center;
}
/* Barra de resumen del día (progreso + comentarios + "Terminé") */
.tareas-resumen-bar {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--gray-200);
}
.tareas-progreso-txt { font-size: 12px; font-weight: 700; color: var(--gray-700); margin-bottom: 5px; }
.tareas-progreso-bar { height: 7px; border-radius: 5px; background: var(--gray-200); overflow: hidden; }
.tareas-progreso-bar > span { display: block; height: 100%; border-radius: 5px; transition: width .3s ease; }
/* Tareas de hoy embebidas en la vista Limpieza */
.limpieza-tareas-hoy { margin-top: 14px; background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.limp-tareas-hoy-head { font-size: 13px; font-weight: 800; color: var(--ford-blue); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.limp-tarea-hoy { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--gray-100); font-size: 14px; cursor: pointer; }
.limp-tarea-hoy:last-of-type { border-bottom: 0; }
.limp-tarea-hoy input { width: 20px; height: 20px; accent-color: var(--ford-blue); flex-shrink: 0; }
.limp-tareas-hoy-foot { margin: 8px 2px 0; font-size: 12px; font-weight: 600; color: var(--ford-blue); cursor: pointer; }
/* Tarjetas de acción por depa (subir evidencia, bitácora, insumos) — mismo alto que el header de Croquis/Leyenda */
.itin-cro-acciones {
display: grid;
grid-template-columns: repeat(3, 1fr); /* mismo reparto que las pilas */
gap: 6px;
}
/* El bloque de pilas (va dentro de esta grilla) ocupa el ancho completo */
.itin-cro-acciones .itin-pilas-wrap { grid-column: 1 / -1; }
.itin-cro-accion-card {
background: #fff;
border: 0; /* sin línea de contorno */
border-radius: 12px;
padding: 10px 6px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
text-align: center;
transition: box-shadow .15s, transform .12s, background .12s;
width: 100%;
font-family: inherit;
/* Sombra estilo Ford SYNC: flotante pero pegado */
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
}
.itin-cro-accion-card:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18);
}
.itin-cro-accion-card:active {
transform: translateY(0) scale(.99);
box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
.itin-cro-accion-icon {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--ford-blue); /* icono azul Ford, igual que las pilas */
font-size: 17px;
}
.itin-cro-accion-title {
font-size: 11px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: var(--gray-800);
line-height: 1.2;
}
.itin-cro-accion-arrow { display: none; } /* la flechita no aplica al estilo chip */
.itin-cro-leyenda-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
background: transparent;
border-radius: 8px;
padding: 6px 8px;
}
.itin-cro-leyenda-desc {
color: var(--gray-700);
}
.itin-cro-leyenda-empty {
font-size: 12px;
font-style: italic;
color: var(--gray-500);
padding: 4px 0;
}
/* Cuando un depto tiene actividad HOY → fondo azul Ford con texto blanco */
.itin-row-depto.toca-hoy td.itin-depto-cell { background: var(--ford-blue) !important; color: #fff !important; border-radius: 8px; background-clip: padding-box; }
.itin-row-depto.toca-hoy td.itin-depto-cell-empty,
.itin-row-depto.toca-hoy td.itin-depto-cell-secundaria { background: transparent !important; }
.itin-row-depto.toca-hoy .depto-name { color: #fff; }
.itin-row-depto.toca-hoy .itin-collapse-chev { color: rgba(255,255,255,.85); }
.itin-collapse-chev {
font-size: 11px;
color: var(--gray-500);
transition: transform .15s ease;
flex: 0 0 12px;
}
.itin-dot-hoy { display: none; } /* puntito del depto que toca hoy: ocultado (no aporta) */
.itin-row-tipo td:first-child {
font-weight: 600;
color: var(--gray-700);
font-size: 11px;
text-align: left;
padding-left: 22px;
text-transform: uppercase;
letter-spacing: .3px;
}
.itin-tipo-tag {
display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px;
vertical-align: middle;
}
.itin-tipo-tag.hab { background: #1769ff; }
.itin-tipo-tag.com { background: #16a34a; }
.itin-tipo-tag.acc { background: #7c3aed; }
.itin-row-separator td {
height: 0; background: transparent; border: none; padding: 0; /* sin salto entre deptos */
}
/* Guía visual iOS para instalar como PWA */
.ios-install-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.78);
z-index: 99999;
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: fadein .25s ease;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.ios-guide-card {
background: #fff;
border-radius: 16px;
padding: 22px 22px 18px;
max-width: 360px;
width: 100%;
text-align: center;
}
.ios-guide-card h3 {
font-size: 17px;
margin: 0 0 12px;
color: var(--ford-blue);
}
.ios-guide-card ol {
text-align: left;
margin: 0 0 16px 22px;
padding: 0;
font-size: 13.5px;
line-height: 1.7;
color: var(--gray-800);
}
.ios-guide-card ol li { margin-bottom: 4px; }
.ios-share-icon {
display: inline-flex; align-items: center;
vertical-align: middle;
background: #007AFF;
color: #fff;
padding: 3px 5px;
border-radius: 5px;
margin: 0 2px;
}
.ios-arrow-anim {
font-size: 28px;
margin: 8px 0;
animation: bounceArrow 1.4s ease-in-out infinite;
}
@keyframes bounceArrow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
.ios-guide-note {
font-size: 11px;
color: var(--gray-600);
font-style: italic;
margin: 6px 0 14px;
line-height: 1.4;
}
/* Evidencia: tipos como radio buttons */
.ev-tipo-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ev-tipo-opt {
flex: 1 1 0;
min-width: 0;
cursor: pointer;
position: relative;
}
.ev-tipo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ev-tipo-opt span {
display: block;
padding: 8px 6px;
border: 2px solid var(--gray-300);
border-radius: 8px;
text-align: center;
font-size: 11px;
font-weight: 700;
color: var(--gray-700);
background: #fff;
transition: all .15s ease;
}
.ev-tipo-opt input:checked + span {
border-color: var(--ford-blue);
background: #cfe1ff;
color: var(--ford-blue);
}
/* Geolocalización: toggle capa streets / satellite */
.geo-controls {
position: absolute;
top: 8px; right: 8px;
z-index: 1000;
display: flex;
gap: 4px;
background: rgba(255,255,255,.95);
padding: 4px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.geo-layer-btn {
padding: 5px 10px;
font-size: 11px;
font-weight: 700;
border: none;
background: transparent;
color: var(--gray-700);
cursor: pointer;
border-radius: 6px;
display: inline-flex; align-items: center; gap: 4px;
}
.geo-layer-btn.active {
background: var(--ford-blue);
color: #fff;
}
.geo-layer-btn:hover:not(.active) { background: var(--gray-100); }
.geo-view-body { position: relative; }
/* Popup del marker: batería + tipo de fuente */
.geo-pop-bat {
display: inline-flex; align-items: center; gap: 4px;
font-weight: 700;
color: #16a34a;
font-size: 11px;
}
.geo-pop-bat.mid { color: #f59e0b; }
.geo-pop-bat.low { color: #dc2626; }
.geo-pop-app {
display: inline-block;
background: rgba(23,105,255,.12);
color: var(--ford-blue);
padding: 1px 5px;
border-radius: 4px;
font-size: 10px;
margin-left: 4px;
}
.geo-pop-coords { font-family: monospace; color: var(--gray-600); font-size: 10px; }
.geo-pop-addr { color: var(--gray-700); font-size: 10.5px; line-height: 1.3; }
/* Mapa pantalla completa */
.geo-view-body.fullscreen {
position: fixed !important;
inset: 0;
z-index: 9999;
background: #fff;
padding-top: 8px;
}
.geo-view-body.fullscreen .geo-map {
height: calc(100vh - 60px) !important;
}
.geo-view-body.fullscreen .geo-residentes { display: none !important; }
/* Insumos: catálogo agrupado por categoría con check + cantidad + comentario */
.ins-catalogo {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 320px;
overflow-y: auto;
padding: 4px;
border: 1px solid var(--gray-200);
border-radius: 8px;
background: #fafafa;
}
.ins-cat {
background: #fff;
border-radius: 6px;
border: 1px solid var(--gray-200);
}
.ins-cat > summary {
cursor: pointer;
list-style: none;
padding: 7px 10px;
font-size: 12px;
font-weight: 700;
color: var(--gray-800);
background: var(--gray-50);
border-radius: 6px;
user-select: none;
display: flex;
align-items: center;
gap: 6px;
}
.ins-cat[open] > summary { border-bottom: 1px solid var(--gray-200); border-radius: 6px 6px 0 0; }
.ins-cat > summary::-webkit-details-marker { display: none; }
.ins-cat > summary::before {
content: '▸';
color: var(--gray-500);
font-size: 10px;
transition: transform .15s ease;
display: inline-block;
}
.ins-cat[open] > summary::before { transform: rotate(90deg); }
.ins-cat-count {
margin-left: auto;
font-size: 10.5px;
font-weight: 600;
color: var(--ford-blue);
}
.ins-cat-body {
display: flex;
flex-direction: column;
}
.ins-row {
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas: "chk label" "extra extra";
align-items: center;
gap: 6px 8px;
padding: 6px 10px;
border-bottom: 1px solid var(--gray-100);
cursor: pointer;
font-size: 12px;
color: var(--gray-800);
transition: background .12s;
}
.ins-row:last-child { border-bottom: none; }
.ins-row:hover { background: #f5f9ff; }
.ins-row input[type=checkbox] {
grid-area: chk;
width: 16px; height: 16px;
accent-color: var(--ford-blue);
margin: 0;
flex-shrink: 0;
}
.ins-row-label { grid-area: label; line-height: 1.3; }
.ins-row-extra {
grid-area: extra;
display: flex;
gap: 6px;
padding: 4px 0 0 24px;
}
.ins-row-extra.hidden { display: none; }
.ins-row-extra .ins-qty {
width: 56px;
padding: 4px 6px;
border: 1px solid var(--gray-300);
border-radius: 5px;
font-size: 12px;
text-align: center;
}
.ins-row-extra .ins-comentario {
flex: 1;
padding: 4px 6px;
border: 1px solid var(--gray-300);
border-radius: 5px;
font-size: 12px;
min-width: 0;
}
.ins-row input[type=checkbox]:checked ~ .ins-row-label { color: var(--ford-blue); font-weight: 600; }
/* Compat: el botón "Otro" usa el mismo formato compacto */
.modal-body > .form-group > label.ins-row {
display: flex;
border: 1px dashed var(--gray-300);
border-radius: 6px;
background: #fff;
}
/* Historial de solicitudes (insumos / permisos) */
.ins-historial, .perm-historial {
display: flex; flex-direction: column; gap: 6px;
}
.sol-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 8px 10px;
font-size: 12px;
}
.sol-card .sol-row {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 4px;
}
.sol-card .sol-fecha { font-weight: 700; color: var(--gray-800); }
.sol-card .sol-estado {
font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; letter-spacing: .3px;
}
.sol-estado.pendiente { background: #fff3cd; color: #8b6c00; }
.sol-estado.atendido, .sol-estado.aprobado { background: #cfe9d4; color: #1f5b2c; }
.sol-estado.rechazado { background: #ffe0e0; color: #b91c1c; }
.sol-card .sol-detalle { color: var(--gray-700); font-size: 11px; }
/* Grid de fotos seleccionadas (preview antes de subir) */
.ev-foto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
gap: 6px;
margin-top: 10px;
}
.ev-foto-thumb {
position: relative;
aspect-ratio: 1;
border-radius: 8px;
overflow: hidden;
background: var(--gray-100);
border: 1px solid var(--gray-200);
}
.ev-foto-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ev-foto-thumb .remove-btn {
position: absolute;
top: 2px; right: 2px;
width: 22px; height: 22px;
border-radius: 50%;
background: #dc2626;
color: #fff;
border: 1.5px solid #fff;
font-size: 11px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
z-index: 4; /* SIEMPRE encima de la palomita/estado */
box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ev-foto-thumb .remove-btn:hover { background: #dc2626; }
.ev-foto-thumb.uploading::after {
content: '';
position: absolute; inset: 0;
background: rgba(23,105,255,.4);
border: 2px solid var(--ford-blue);
border-radius: 8px;
}
.ev-foto-thumb.done::after {
content: '✓';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(22,163,74,.55);
color: #fff;
font-size: 24px;
font-weight: 800;
border-radius: 8px;
}
.ev-foto-thumb.failed::after {
content: '✕';
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(220,38,38,.6);
color: #fff;
font-size: 24px;
font-weight: 800;
border-radius: 8px;
}
/* Barra de progreso de subida en evidencia */
.ev-progress-wrap {
background: var(--gray-50);
border-radius: 10px;
padding: 10px 12px;
border: 1px solid var(--gray-200);
margin-bottom: 10px;
}
.ev-progress-label {
font-size: 12.5px;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 6px;
}
.ev-progress-track {
height: 8px;
background: var(--gray-200);
border-radius: 99px;
overflow: hidden;
}
.ev-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--ford-blue), #4a8fff);
border-radius: 99px;
transition: width .3s ease;
}
.ev-progress-step {
font-size: 11px;
color: var(--gray-600);
text-align: right;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
/* Modal de Bitácora — siempre centrado en la pantalla */
#modal-bitacora-evidencias.modal-overlay {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
#modal-bitacora-evidencias .modal-sheet {
width: 100%;
max-width: 720px;
max-height: 85vh;
margin: 0;
display: flex;
flex-direction: column;
}
#modal-bitacora-evidencias .modal-body {
overflow-y: auto;
flex: 1;
}
/* Bitácora de evidencias: grid de cards */
.bit-evidencias-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.bit-ev-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.bit-ev-card img {
width: 100%;
aspect-ratio: 1.2;
object-fit: cover;
display: block;
background: #f3f4f6;
cursor: pointer;
}
.bit-ev-info {
padding: 6px 8px;
font-size: 10px;
color: var(--gray-700);
line-height: 1.3;
}
.bit-ev-info strong { display: block; font-size: 11px; color: var(--gray-900); }
.bit-ev-tipo {
display: inline-block;
font-size: 9px;
font-weight: 800;
letter-spacing: .3px;
text-transform: uppercase;
padding: 2px 5px;
border-radius: 4px;
margin-bottom: 3px;
}
.bit-ev-tipo.t-limpieza { background: #cfe1ff; color: #003478; }
.bit-ev-tipo.t-inventario { background: #cfe9d4; color: #1f5b2c; }
.bit-ev-tipo.t-incidente { background: #ffe0e0; color: #b91c1c; }
.bit-ev-actions {
position: absolute;
top: 4px; right: 4px;
display: flex; gap: 4px;
}
.bit-ev-actions .btn-icon {
width: 26px; height: 26px;
background: rgba(0,0,0,.55);
color: #fff;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
}
/* Mapa preview en el checador (antes de marcar) */
.check-mapa-preview {
width: 100%;
height: 180px;
border-radius: 12px;
overflow: hidden;
background: #e8eef7;
border: 1px solid var(--gray-200);
margin-bottom: 4px;
position: relative;
}
.check-mapa-preview iframe {
width: 100%; height: 100%; border: none; display: block;
}
.check-mapa-loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
gap: 8px;
font-size: 12px;
color: var(--gray-600);
}
/* Modal acciones por celda */
.itin-acc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.itin-acc-btn {
display: flex; align-items: center; gap: 10px;
padding: 12px 12px;
border-radius: 12px;
background: var(--white);
border: 1px solid var(--gray-200);
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: left;
transition: transform .12s ease, box-shadow .12s ease;
}
.itin-acc-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }
.itin-acc-btn i { font-size: 16px; flex: 0 0 18px; }
.itin-mover-days {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.itin-mover-days button {
padding: 14px 8px; font-weight: 800; border-radius: 10px;
border: 1px solid var(--gray-300); background: #fff; cursor: pointer;
text-transform: uppercase; font-size: 11px; letter-spacing: .5px;
}
.itin-mover-days button.actual { background: #cfe1ff; border-color: var(--ford-blue); color: var(--ford-blue); }
.itin-mover-days button:hover:not(.actual) { background: var(--gray-100); }
/* ===== INE en Nuevo Integrante (frente + reverso) ===== */
.ni-ine-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 16px;
}
.ni-ine-col { display: flex; flex-direction: column; gap: 8px; }
.ni-ine-label { font-size: 12px; font-weight: 700; color: var(--gray-700); }
.ni-ine-stage {
position: relative;
width: 100%;
aspect-ratio: 1.6;
background: #0c1330;
border-radius: 10px;
border: 2px dashed var(--gray-300);
overflow: hidden;
}
.ni-ine-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ni-ine-stage.ok { border-color: #16a34a; border-style: solid; }
.ni-ine-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
color: rgba(255,255,255,.85);
font-size: 11px;
text-align: center;
padding: 8px;
}
.ni-ine-placeholder i { font-size: 28px; opacity: .6; }
/* Plantilla/marco de credencial — guía visual prominente para centrar la foto */
.ni-ine-frame {
position: absolute;
inset: 8%;
border: 2px dashed #ffd700;
border-radius: 10px;
pointer-events: none;
z-index: 2;
box-shadow:
0 0 0 9999px rgba(0,0,0,.35); /* área fuera del marco más oscura para guiar el ojo */
}
.ni-ine-corner {
position: absolute;
width: 22px; height: 22px;
border: 4px solid #ffd700;
pointer-events: none;
}
.ni-ine-corner.tl { top: -4px; left: -4px; border-right: none; border-bottom: none; border-top-left-radius: 8px; }
.ni-ine-corner.tr { top: -4px; right: -4px; border-left: none; border-bottom: none; border-top-right-radius: 8px; }
.ni-ine-corner.bl { bottom: -4px; left: -4px; border-right: none; border-top: none; border-bottom-left-radius: 8px; }
.ni-ine-corner.br { bottom: -4px; right: -4px; border-left: none; border-top: none; border-bottom-right-radius: 8px; }
/* Cuando ya hay foto exitosa (ok), el marco se vuelve verde y más sutil */
.ni-ine-stage.ok .ni-ine-frame {
border-color: rgba(22, 163, 74, 0.7);
box-shadow: 0 0 0 9999px rgba(22,163,74,.15);
}
.ni-ine-stage.ok .ni-ine-corner { border-color: #16a34a; }
/* Cuando es rechazada, marco rojo */
.ni-ine-stage.error .ni-ine-frame {
border-color: rgba(220, 38, 38, 0.85);
box-shadow: 0 0 0 9999px rgba(220,38,38,.18);
}
.ni-ine-stage.error .ni-ine-corner { border-color: #dc2626; }
/* Texto guía dentro del marco mientras no haya foto */
.ni-ine-stage:not(.ok):not(.error) .ni-ine-frame::after {
content: 'Centra tu credencial dentro de este marco';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255, 215, 0, 0.95);
font-size: 11px;
font-weight: 700;
text-align: center;
letter-spacing: .3px;
text-shadow: 0 1px 3px rgba(0,0,0,.7);
width: 80%;
line-height: 1.3;
pointer-events: none;
}
.ni-ine-stage img + .ni-ine-frame::after { content: none; } /* ocultar texto si ya hay foto */
.ni-ine-feedback {
font-size: 11px;
padding: 6px 8px;
border-radius: 6px;
margin-top: 4px;
line-height: 1.35;
}
.ni-ine-feedback.ok { background: #d4edda; color: #155724; border: 1px solid #b3dfbb; }
.ni-ine-feedback.error { background: #fde2e2; color: #b91c1c; border: 1px solid #f5b5b5; }
.ni-ine-feedback.loading { background: #eaf2fb; color: #003478; border: 1px solid #b6d1ef; }
/* ===== Barra de progreso al guardar Nuevo Integrante ===== */
.ni-progress-wrap {
background: var(--gray-50);
border-radius: 10px;
padding: 12px 14px;
border: 1px solid var(--gray-200);
}
.ni-progress-label {
font-size: 13px;
font-weight: 700;
color: var(--gray-800);
margin-bottom: 8px;
}
.ni-progress-track {
height: 8px;
background: var(--gray-200);
border-radius: 99px;
overflow: hidden;
}
.ni-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--ford-blue), #4a8fff);
border-radius: 99px;
transition: width .35s ease;
}
.ni-progress-step {
font-size: 11px;
color: var(--gray-600);
text-align: right;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
/* ===== Cámara INE — fullscreen landscape inmersivo =====
El modal cubre toda la pantalla, el video llena el viewport, y los
controles flotan encima: obturador circular abajo centrado, X discreta
arriba a la derecha, status de IA flotando. En portrait el JS intenta
forzar landscape vía screen.orientation.lock; si no se puede, mostramos
la pista "Voltea tu teléfono". */
.ine-cam-modal {
position: fixed;
inset: 0;
z-index: 10000;
padding: 0;
background: #000;
display: flex;
}
.ine-cam-modal.hidden { display: none; }
.ine-cam-stage {
position: relative;
width: 100%;
height: 100%;
flex: 1 1 auto;
background: #000;
overflow: hidden;
}
.ine-cam-stage video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #000;
}
.ine-cam-overlay {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
/* Marco verde proporción tarjeta de credencial (~1.585:1) centrado.
En landscape ocupamos altura; el ancho se calcula por aspect-ratio. */
.ine-cam-frame {
position: relative;
height: 70%;
aspect-ratio: 1.585 / 1;
max-width: 80%;
border: 3px solid #22c55e;
border-radius: 14px;
background: transparent;
box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
}
.ine-cam-corner {
position: absolute;
width: 30px; height: 30px;
border: 5px solid #22c55e;
}
.ine-cam-corner.tl { top: -5px; left: -5px; border-right: none; border-bottom: none; border-top-left-radius: 12px; }
.ine-cam-corner.tr { top: -5px; right: -5px; border-left: none; border-bottom: none; border-top-right-radius: 12px; }
.ine-cam-corner.bl { bottom: -5px; left: -5px; border-right: none; border-top: none; border-bottom-left-radius: 12px; }
.ine-cam-corner.br { bottom: -5px; right: -5px; border-left: none; border-top: none; border-bottom-right-radius: 12px; }
.ine-cam-overlay.ok .ine-cam-frame {
border-color: #4ade80;
box-shadow: 0 0 0 9999px rgba(34,197,94,.18), 0 0 30px rgba(34,197,94,.4) inset;
animation: ine-cam-pulse 1.2s ease-in-out infinite;
}
.ine-cam-overlay.ok .ine-cam-corner { border-color: #4ade80; }
@keyframes ine-cam-pulse {
0%, 100% { border-width: 3px; }
50% { border-width: 5px; }
}
/* Topbar flotante con título pill (izquierda) + X (derecha) */
.ine-cam-topbar {
position: absolute;
top: env(safe-area-inset-top, 12px);
left: 0; right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
pointer-events: none;
z-index: 5;
}
.ine-cam-title-pill {
display: inline-block;
padding: 5px 12px;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 12px;
font-weight: 600;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
pointer-events: none;
}
.ine-cam-close {
pointer-events: auto;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(0,0,0,.55);
color: #fff;
border: none;
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background .15s ease;
}
.ine-cam-close:hover, .ine-cam-close:active { background: rgba(0,0,0,.8); }
/* Status flotante encima del video, sobre la zona oscura del marco */
.ine-cam-status {
position: absolute;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
transform: translateX(-50%);
margin: 0;
max-width: 80%;
padding: 6px 12px;
font-size: 12px;
text-align: center;
color: #fff;
background: rgba(0,0,0,.55);
border-radius: 999px;
min-height: 0;
pointer-events: none;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ine-cam-status:empty { display: none; }
.ine-cam-status.ok { color: #bbf7d0; font-weight: 700; }
.ine-cam-status.warn { color: #fde68a; font-weight: 600; }
/* Obturador circular: 76px, blanco con anillo. Pegado a la DERECHA verticalmente
centrado — en landscape (modo forzado para captar la credencial) cae justo
bajo el pulgar de la mano derecha del usuario al sostener el celular. */
.ine-cam-shoot-circle {
position: absolute;
right: calc(env(safe-area-inset-right, 0px) + 20px);
top: 50%;
transform: translateY(-50%);
width: 76px; height: 76px;
border-radius: 50%;
border: 4px solid rgba(255,255,255,.9);
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
z-index: 6;
box-shadow: 0 4px 18px rgba(0,0,0,.45);
transition: transform .1s ease;
}
.ine-cam-shoot-circle:active { transform: translateY(-50%) scale(0.93); }
.ine-cam-shoot-inner {
display: block;
width: 60px; height: 60px;
border-radius: 50%;
background: #fff;
}
/* Mensaje de error (sin permiso de cámara, etc.) — abajo, encima del video */
.ine-cam-err {
position: absolute;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
transform: translateX(-50%);
max-width: 88%;
color: #fee2e2;
background: rgba(127,29,29,.85);
font-size: 12px;
margin: 0;
text-align: center;
display: none;
padding: 8px 14px;
border-radius: 8px;
z-index: 5;
}
.ine-cam-err.visible { display: block; }
/* Pista "Voltea tu teléfono" — cubre el video en portrait sin landscape lock */
.ine-cam-rotate-hint {
position: absolute;
inset: 0;
z-index: 8;
background: rgba(12, 19, 48, .95);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 24px;
text-align: center;
}
.ine-cam-rotate-hint.hidden { display: none; }
.ine-cam-rotate-ico {
font-size: 56px;
color: #4ade80;
animation: ine-cam-rotate-spin 2.4s ease-in-out infinite;
}
@keyframes ine-cam-rotate-spin {
0%, 100% { transform: rotate(-15deg); }
50% { transform: rotate(75deg); }
}
.ine-cam-rotate-title {
margin: 0;
font-size: 18px;
font-weight: 700;
}
.ine-cam-rotate-sub {
margin: 0;
font-size: 13px;
color: #cbd5e1;
max-width: 320px;
line-height: 1.4;
}
/* ===== Selfie obligatoria en Nuevo Integrante (overlay tipo banco) ===== */
.ni-selfie-wrap { margin: 8px 0 16px; }
.ni-selfie-stage {
position: relative;
width: 100%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 200 / 260;
background: #0c1330;
border-radius: 14px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--gray-300);
}
.ni-selfie-stage video,
.ni-selfie-stage img,
.ni-selfie-stage canvas {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Espejo para la cámara frontal — se siente más natural */
.ni-selfie-stage video { transform: scaleX(-1); }
.ni-selfie-overlay {
position: absolute; inset: 0;
pointer-events: none;
transition: filter .25s ease;
}
.ni-selfie-overlay svg {
width: 100%; height: 100%;
}
/* Cuando el rostro está bien centrado (FaceDetector ok), el óvalo se pinta verde
con pulse para indicar al usuario que la foto se está por tomar. */
.ni-selfie-overlay.ok ellipse {
stroke: #16a34a !important;
stroke-width: 3 !important;
stroke-dasharray: none !important;
animation: selfie-pulse 1.2s ease-in-out infinite;
}
.ni-selfie-overlay.ok rect[mask] { fill: rgba(22,163,74,.25) !important; }
.ni-selfie-overlay.ok text { fill: #16a34a !important; }
@keyframes selfie-pulse {
0%, 100% { stroke-width: 3; }
50% { stroke-width: 5; }
}
.ni-selfie-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
color: rgba(255,255,255,.85);
font-size: 12px;
text-align: center;
padding: 20px;
}
.ni-selfie-placeholder i { font-size: 40px; opacity: .55; }
.ni-selfie-actions {
display: flex; gap: 8px; justify-content: center;
margin-top: 10px;
flex-wrap: wrap;
}
/* ===== Modal Descargar app — multiplataforma ===== */
.dapp-card {
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px 14px 12px;
margin-bottom: 12px;
background: var(--white);
}
.dapp-card-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
margin-bottom: 6px;
}
.dapp-card-head i { font-size: 22px; }
.dapp-desc {
font-size: 12.5px;
color: var(--gray-700);
margin: 4px 0 10px;
line-height: 1.4;
}
.dapp-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.dapp-actions .btn {
flex: 1 1 calc(50% - 3px);
min-width: 0;
font-size: 12px;
padding: 8px 10px;
}
.dapp-actions .btn i { font-size: 12px; }
.dapp-hint {
font-size: 11.5px;
color: var(--gray-600);
font-style: italic;
border-top: 1px dashed var(--gray-200);
padding-top: 8px;
margin-bottom: 8px;
line-height: 1.4;
}
.dapp-steps {
font-size: 12.5px;
margin: 6px 0 10px 18px;
color: var(--gray-700);
line-height: 1.6;
}
.dapp-steps li { margin-bottom: 2px; }
/* ===== Banner descarga APK Android ===== */
.apk-banner {
display: flex;
align-items: center;
gap: 12px;
margin: 0 16px 12px;
padding: 12px 14px;
border-radius: 12px;
background: linear-gradient(120deg, #0d3b1f, #0f7a3c 60%, #1cd05a);
color: #fff;
box-shadow: 0 4px 14px rgba(15,122,60,.25);
}
.apk-banner-icon {
width: 40px; height: 40px; flex: 0 0 40px;
border-radius: 10px;
background: rgba(255,255,255,.15);
display: inline-flex; align-items: center; justify-content: center;
font-size: 20px;
}
.apk-banner-body { flex: 1; min-width: 0; }
.apk-banner-title { font-size: 13.5px; font-weight: 800; }
.apk-banner-sub { font-size: 11.5px; opacity: .92; line-height: 1.3; }
.apk-banner .btn { background: #fff; color: #0d3b1f; border: none; }
.apk-banner .btn:hover { background: #e8f5e9; }
/* ===== Hub de Limpieza ===== */
.limpieza-hub {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 16px 24px;
}
/* Apps rápidas (estilo grid de iconos arriba del itinerario) */
/* Aviso de soporte/despliegue (barra fija arriba) */
.soporte-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: linear-gradient(135deg, #003478, #1769FF);
color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.soporte-banner.hidden { display: none; }
.soporte-banner i { font-size: 22px; flex-shrink: 0; }
.soporte-banner strong { display: block; font-size: 14px; }
.soporte-banner span { display: block; font-size: 12px; opacity: .92; line-height: 1.4; margin-top: 2px; }
/* Sección WiFi del perfil removida a pedido del usuario */
.perfil-wifi-card { display: none !important; }
/* Pestañas Activos/Archivados de tickets */
.mtto-tab.active { background: var(--ford-blue); color: #fff; border-color: var(--ford-blue); }
/* Selector de estado del ticket (admin) */
.mtto-estado-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mtto-estado-btn {
flex: 1 1 auto; min-width: 90px;
padding: 8px 10px; border-radius: 10px;
border: 1.5px solid var(--gray-300); background: #fff;
color: var(--gray-700); font-size: 12.5px; font-weight: 600;
cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s, color .12s;
}
.mtto-estado-btn:hover { border-color: var(--ford-blue); color: var(--ford-blue); }
.mtto-estado-btn.active { background: var(--ford-blue); border-color: var(--ford-blue); color: #fff; }
.mtto-index { padding: 6px 16px 24px; }
.mtto-index-head { font-size: 13px; font-weight: 800; color: var(--ford-blue); display: flex; align-items: center; gap: 8px; }
.mtto-index-hint { font-size: 11.5px; color: var(--gray-500); margin: 2px 0 10px; }
.mtto-index-acc { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.10); overflow: hidden; }
summary.mtto-index-head { cursor: pointer; padding: 13px 14px; list-style: none; user-select: none; -webkit-user-select: none; }
summary.mtto-index-head::-webkit-details-marker { display: none; }
summary.mtto-index-head::marker { content: ''; }
summary.mtto-index-head .mtto-index-chev { margin-left: auto; }
.mtto-index-acc[open] > summary.mtto-index-head .mtto-index-chev { transform: rotate(180deg); }
.mtto-index-body { padding: 0 14px 12px; }
.mtto-index-search-wrap { display: flex; align-items: center; gap: 8px; background: var(--gray-100, #f2f4f7); border-radius: 10px; padding: 8px 12px; margin: 4px 0 8px; }
.mtto-index-search-wrap i { color: var(--gray-400); font-size: 13px; }
.mtto-index-search { flex: 1; border: none; background: transparent; outline: none; font-size: 14px; color: var(--gray-800); }
.mtto-index-empty { font-size: 12.5px; color: var(--gray-500); padding: 10px 2px; text-align: center; }
.mtto-index-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-500); margin: 14px 0 6px; }
/* Árbol de decisión colapsable (hipervínculos) */
.mtto-index-nodo { margin-bottom: 4px; }
.mtto-index-nodo.n2 { margin-left: 8px; }
.mtto-index-sum {
list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 4px; font-size: 13px; font-weight: 800; color: var(--ford-blue);
}
.mtto-index-sum.sub { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-600); }
.mtto-index-sum::-webkit-details-marker { display: none; }
.mtto-index-sum::marker { content: ''; }
.mtto-index-chev { font-size: 12px; color: var(--gray-400); transition: transform .2s ease; }
.mtto-index-nodo[open] > .mtto-index-sum .mtto-index-chev { transform: rotate(180deg); }
.mtto-index-items { display: flex; flex-direction: column; }
/* Índice como listado de hipervínculos (alfabético) */
.mtto-index-links { display: flex; flex-direction: column; }
.mtto-index-link {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 6px 4px; border-bottom: 1px solid var(--gray-100);
cursor: pointer; text-decoration: none;
}
.mtto-index-link:last-child { border-bottom: none; }
.mtto-index-link .mtto-index-nombre {
font-size: 13.5px; font-weight: 600; color: var(--ford-blue); text-decoration: underline;
}
.mtto-index-link:active { opacity: .6; }
.mtto-index-item {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%; background: #fff; border: none; border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px; cursor: pointer; font-family: inherit; text-align: left;
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
transition: box-shadow .15s, transform .12s;
}
.mtto-index-item:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18); }
.mtto-index-item:active { transform: translateY(0) scale(.99); }
.mtto-index-nombre { font-size: 13.5px; font-weight: 600; color: var(--gray-800); }
.mtto-index-costo { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mtto-index-costo.con { background: #fde8e8; color: #c0392b; }
.mtto-index-costo.sin { background: #e7f6ec; color: #16a34a; }
.mtto-index-costo.limp { background: #e6f0ff; color: var(--ford-blue); }
/* ===== Instrucciones de Tickets: tarjeta limpia estilo app ===== */
.mtto-intro {
display: flex; flex-direction: column; gap: 14px;
margin: 10px 12px 4px; padding: 16px 16px 18px; color: var(--gray-700);
background: linear-gradient(170deg, #ffffff 0%, #f5f8ff 100%);
border: 1px solid var(--gray-200); border-radius: 18px;
box-shadow: 0 1px 3px rgba(16,24,40,.05), 0 8px 20px rgba(16,24,40,.05);
}
.mtto-intro > p:first-child {
font-size: 13px; line-height: 1.55; margin: 0;
padding-left: 12px; border-left: 3px solid var(--ford-blue);
color: var(--gray-600);
}
.mtto-intro p { font-size: 12.5px; line-height: 1.5; margin: 0; }
.mtto-steps-title {
font-size: 11px; font-weight: 800; color: var(--ford-blue);
display: flex; align-items: center; gap: 8px;
text-transform: uppercase; letter-spacing: .6px;
}
.mtto-steps-title i { font-size: 12px; }
.mtto-steps { display: flex; flex-direction: column; margin: 0; }
.mtto-step { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.mtto-step:last-child { padding-bottom: 0; }
.mtto-step::before {
content: ''; position: absolute; left: 14px; top: 30px; bottom: -2px;
width: 2px; background: linear-gradient(#cdddf2, #e8f0fb);
}
.mtto-step:last-child::before { display: none; }
.mtto-step-num {
width: 29px; height: 29px; border-radius: 50%;
background: linear-gradient(160deg, #1769FF 0%, var(--ford-blue) 100%); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; flex-shrink: 0; z-index: 1;
box-shadow: 0 3px 8px rgba(0,52,120,.32), inset 0 1px 2px rgba(255,255,255,.4);
}
.mtto-step-txt { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.mtto-step-txt strong { font-size: 13.5px; color: var(--gray-900); font-weight: 700; }
.mtto-step-txt span { font-size: 12px; color: var(--gray-500); line-height: 1.45; }
.mtto-horario {
display: flex; align-items: center; gap: 13px;
background: linear-gradient(135deg, #eaf2fb 0%, #dfeafb 100%);
border-left: 4px solid var(--ford-blue);
border-radius: 12px; padding: 12px 15px;
}
.mtto-horario i { color: var(--ford-blue); font-size: 22px; flex-shrink: 0; }
.mtto-horario span { font-size: 13px; line-height: 1.35; color: var(--gray-800); }
.mtto-horario strong { color: var(--ford-blue); font-size: 13.5px; }
.limpieza-apps {
display: grid;
grid-template-columns: repeat(4, 1fr); /* filas de 4 íconos (mejor en móvil) */
gap: 8px;
padding: 6px 6px 8px;
margin-bottom: 6px;
}
/* Flujo flexible: los íconos se empaquetan SIN celdas vacías. La última fila
estira sus tiles para llenar el ancho (no quedan huecos). */
.limpieza-apps-flow {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.limpieza-apps-flow .limpieza-app {
flex: 1 1 80px;
min-width: 80px;
}
/* Botones estilo Ford SYNC: tarjeta elevada, sin contorno, sombra flotante.
Conserva sus iconos (squircle de color) y su forma. */
.limpieza-app {
background: #fff;
border: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
padding: 10px 6px;
border-radius: 12px;
flex: 1 1 0;
min-width: 0;
font-family: inherit;
transition: box-shadow .15s, transform .12s, background .12s;
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
}
.limpieza-app:hover {
background: #fff;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18);
}
.limpieza-app:active {
transform: translateY(0) scale(.98);
box-shadow: 0 1px 3px rgba(16,24,40,.14);
}
/* Igualado al estilo de `.action-card i` del dashboard: squircle 64×64. */
/* Igualado al estilo de Mi Espacio (.me-mini-icon): squircle 56→60px, glifo
azul Ford. Mismo tamaño y alineación de icono+texto en admin, limpieza y tickets. */
.limpieza-app-icon {
width: 56px;
height: 56px;
border-radius: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent; /* sin relleno azul */
color: var(--ford-blue); /* glifo azul Ford (igual que Mi espacio) */
font-size: 30px;
}
@media (min-width: 600px) { .limpieza-app-icon { width: 60px; height: 60px; font-size: 34px; } }
@media (min-width: 900px) { .limpieza-app-icon { width: 60px; height: 60px; font-size: 34px; } }
.limpieza-app-name {
font-size: 11.5px;
font-weight: 600;
color: var(--gray-800);
text-align: center;
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
max-width: 100%;
}
@media (min-width: 600px) { .limpieza-app-name { font-size: 12px; } }
/* Botones grandes estilo Ford SYNC (modal evidencia: Momento, Tomar foto/Galería) */
.ev-sync-row { display: flex; gap: 10px; margin-top: 4px; }
.ev-sync-btn {
flex: 1 1 0; min-width: 0; background: #fff; border: 2px solid #e5e7eb;
border-radius: 14px; padding: 14px 8px; display: flex; flex-direction: column;
align-items: center; gap: 8px; cursor: pointer; font-family: inherit;
transition: border-color .15s, background .15s, transform .12s;
box-shadow: 0 1px 3px rgba(16,24,40,.08), 0 4px 10px rgba(16,24,40,.10);
}
.ev-sync-btn:active { transform: scale(.97); }
.ev-sync-btn.active { border-color: var(--ford-blue-light, #1769FF); background: #eff6ff; }
/* Botones de Momento (antes/después): UN SOLO renglón + color (amarillo/verde) */
.ev-mom { flex-direction: row !important; padding: 9px 12px !important; gap: 8px !important; align-items: center; }
.ev-mom .ev-sync-ico { width: 30px !important; height: 30px !important; font-size: 16px !important; background: transparent !important; border-radius: 8px; flex-shrink: 0; }
.ev-mom .ev-sync-lbl { font-size: 13px; font-weight: 700; }
#ev-mom-antes { border-color: #f59e0b; color: #b45309; }
#ev-mom-antes .ev-sync-ico { color: #b45309; }
#ev-mom-antes.active { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
#ev-mom-despues { border-color: #16a34a; color: #15803d; }
#ev-mom-despues .ev-sync-ico { color: #15803d; }
#ev-mom-despues.active { background: #dcfce7; border-color: #16a34a; color: #166534; }
.ev-sync-ico {
width: 54px; height: 54px; border-radius: 14px; display: inline-flex;
align-items: center; justify-content: center; font-size: 25px;
color: var(--ford-blue-light, #1769FF); background: #eff6ff;
}
.ev-sync-btn.active .ev-sync-ico { background: #1769FF; color: #fff; }
.ev-sync-lbl { font-size: 13px; font-weight: 700; color: #1f2937; text-align: center; line-height: 1.15; }
.limpieza-hub-card {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
text-align: left;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 14px 14px;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.limpieza-hub-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.08);
border-color: var(--gray-300);
}
.limpieza-hub-card:active { transform: translateY(0); }
.limpieza-hub-card .lh-icon {
width: 44px; height: 44px; flex: 0 0 44px;
border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
color: #fff;
font-size: 18px;
box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.limpieza-hub-card .lh-body { flex: 1; min-width: 0; }
.limpieza-hub-card .lh-title {
font-size: 14.5px;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 2px;
}
.limpieza-hub-card .lh-sub {
font-size: 12px;
color: var(--gray-600);
line-height: 1.35;
}
.limpieza-hub-card .lh-arrow {
color: var(--gray-400);
font-size: 13px;
flex: 0 0 auto;
}
@media (min-width: 720px) {
.limpieza-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* Badge rojo sobre iconos de bottom nav */
.nav-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav-badge {
position: absolute;
top: -6px; right: -10px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--red, #e53935);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
line-height: 1;
border: 1.5px solid var(--white);
}
.nav-badge.hidden { display: none; }
/* AI orb (icono tipo Siri/Cortana en escala de grises, igual que los demás iconos de nav) */
.ai-orb {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center; justify-content: center;
background: conic-gradient(from 0deg, #9ca3af, #6b7280, #d1d5db, #4b5563, #9ca3af);
position: relative;
animation: aiOrbSpin 8s linear infinite;
}
.ai-orb-inner {
width: 70%; height: 70%;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f3f4f6 0%, #d1d5db 50%, #6b7280 100%);
animation: aiOrbPulse 2.6s ease-in-out infinite;
}
.nav-item.active .ai-orb {
background: conic-gradient(from 0deg, var(--ford-blue), #4b5563, var(--ford-blue));
}
.nav-item.active .ai-orb-inner {
background: radial-gradient(circle at 35% 30%, #fff 0%, #c5d3ee 50%, var(--ford-blue) 100%);
}
.ai-orb-lg { width: 64px; height: 64px; }
.ai-orb-lg .ai-orb-inner { background: radial-gradient(circle at 35% 30%, #fff 0%, #d1d5db 50%, #6b7280 100%); }
/* IA deshabilitado: residentes no tienen acceso al chat IA, así que el botón
del header se muestra apagado (sin animación, escala de grises) y no
reacciona al click. Se aplica añadiendo .disabled-ai al botón. */
.header-ai-btn.disabled-ai {
pointer-events: none;
opacity: .45;
cursor: not-allowed;
}
.header-ai-btn.disabled-ai .ai-orb {
background: conic-gradient(from 0deg, #cbd5e1, #94a3b8, #cbd5e1, #94a3b8);
animation: none;
filter: grayscale(.7);
}
.header-ai-btn.disabled-ai .ai-orb-inner {
background: radial-gradient(circle at 35% 30%, #e5e7eb 0%, #cbd5e1 50%, #94a3b8 100%);
animation: none;
}
/* ===== FAB (Floating Action Button) — estilo Google Drive ===== */
.fab-wrap {
position: fixed;
right: 20px;
/* Subido para no chocar con el bottom-nav (44px alto + safe-area + un poco). */
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
z-index: 250;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
pointer-events: none;
transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
/* Cuando el bottom-nav se oculta por scroll, el FAB también desaparece
completamente (translate hacia abajo fuera del viewport) — mismo
comportamiento que el nav inferior y el topbar. */
#app-screen.topbar-hidden .fab-wrap {
transform: translateY(calc(100% + var(--nav-h) + env(safe-area-inset-bottom, 0px) + 40px));
opacity: 0;
pointer-events: none;
}
.fab-wrap.hidden { display: none; }
.fab-wrap > * { pointer-events: auto; }
/* FAB principal: semi-cuadrado tipo Google Drive (border-radius ~16px sobre
56px, no círculo). Para que la rotación del "+" → "×" al abrir no convierta
el cuadrado en diamante, rotamos SOLO el icono interior, no el botón. */
.fab-btn {
width: 56px; height: 56px;
border-radius: 16px;
/* Fondo = color de fondo de la app (gris), icono azul Ford. */
background: var(--ios-bg);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 24px;
border: 1px solid rgba(0,52,120,.18);
box-shadow: 0 6px 16px rgba(0,52,120,.20);
cursor: pointer;
transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.fab-btn > i { transition: transform .2s ease; display: inline-block; }
.fab-btn:active { transform: scale(.95); }
.fab-btn:hover { background: rgba(0,52,120,.04); }
.fab-wrap.open .fab-btn {
background: rgba(0,52,120,.08);
box-shadow: 0 4px 12px rgba(0,52,120,.25);
}
.fab-wrap.open .fab-btn > i { transform: rotate(45deg); }
.fab-menu {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
transition: opacity .18s ease, transform .18s ease;
transform-origin: bottom right;
}
.fab-menu.hidden {
opacity: 0;
transform: scale(.85) translateY(8px);
pointer-events: none;
}
.fab-action {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
border: none;
cursor: pointer;
}
.fab-action-label {
background: var(--white);
color: var(--gray-900);
padding: 8px 14px;
border-radius: 20px;
font-size: 14px; font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
white-space: nowrap;
}
.fab-action-icon {
width: 44px; height: 44px;
border-radius: 13px;
background: var(--white);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
/* IA en el header — estilo Siri (orb con gradientes vibrantes y animación) */
.header-ai-btn {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
padding: 6px;
position: relative;
}
.header-ai-btn .ai-orb {
width: 28px; height: 28px;
background: conic-gradient(
from 0deg,
#ff6ec7 0%,
#ffa600 20%,
#00d4ff 40%,
#4af3a8 55%,
#b266ff 75%,
#ff6ec7 100%
);
animation: aiOrbSpin 4s linear infinite;
filter: saturate(1.15);
box-shadow: 0 0 8px rgba(255,255,255,.35), 0 0 14px rgba(178,102,255,.28);
}
.header-ai-btn .ai-orb-inner {
background: radial-gradient(circle at 32% 28%,
rgba(255,255,255,.98) 0%,
rgba(255,210,250,.85) 30%,
rgba(150, 90, 255, .55) 70%,
rgba(60, 30, 180, .25) 100%
);
animation: aiOrbPulse 2.6s ease-in-out infinite;
}
/* Halo sutil alrededor del orb */
.header-ai-btn::before {
content: '';
position: absolute;
inset: 4px;
border-radius: 50%;
background: conic-gradient(from 90deg, #ff6ec7, #00d4ff, #b266ff, #ff6ec7);
filter: blur(6px);
opacity: .35;
z-index: -1;
animation: aiOrbSpin 6s linear infinite reverse;
}
@keyframes aiOrbSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes aiOrbPulse {
0%, 100% { transform: scale(.88); opacity: .95; }
50% { transform: scale(1.04); opacity: 1; }
}
/* Usuario en el header (avatar + nombre, junto a notificaciones) */
.header-user {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: 100px;
background: rgba(255,255,255,.10);
cursor: pointer;
transition: background .15s;
max-width: 180px;
}
.header-user:hover { background: rgba(255,255,255,.18); }
.header-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: rgba(255,255,255,.20);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
font-weight: 700;
border: 1.5px solid rgba(255,255,255,.35);
overflow: hidden;
flex-shrink: 0;
}
.header-avatar img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.header-username {
color: #fff;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
@media (max-width: 480px) {
.header-username { display: none; }
.header-user { padding: 2px; background: transparent; }
}
.header-right { display: flex; align-items: center; gap: 4px; }
/* Botón Mensajes en header (a la derecha del AI orb) */
.header-msg-btn {
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: none; cursor: pointer;
padding: 6px;
position: relative;
color: #fff;
width: 40px; height: 40px;
border-radius: 50%;
transition: background .15s;
}
.header-msg-btn:hover { background: rgba(255,255,255,.12); }
.header-msg-btn i { font-size: 18px; }
/* Avatar dentro del header (reemplaza el botón de Mensajes). Sin contorno
blanco — más nítido y se ve mejor cuando es pequeño. La imagen ocupa toda
la circunferencia (object-fit cover). */
.header-avatar-btn {
width: 40px; height: 40px;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: none;
cursor: pointer;
}
.header-avatar {
display: inline-flex;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.18);
color: #fff;
align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
border: none; /* sin contorno blanco */
overflow: hidden;
flex-shrink: 0;
}
.header-avatar img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
}
.header-avatar-btn:hover .header-avatar {
background: rgba(255,255,255,.28);
}
.header-avatar-btn:active { transform: scale(.94); }
.header-msg-badge {
position: absolute;
top: 2px; right: 2px;
background: #ef4444;
color: #fff;
font-size: 9px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border: 1.5px solid var(--ford-blue);
}
.header-msg-badge.hidden { display: none; }
/* Indicador de conexión GPS — solo un puntito sólido verde (online) o rojo (sin gps) */
/* El estado de ubicación (verde/rojo) ahora vive en el CONTORNO del avatar
(#header-avatar.geo-on/.geo-off). El geo-pill queda solo como toggle (admin):
un ícono de ubicación neutro, sin punto de color de alarma. */
.geo-pill {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: transparent;
border: none;
border-radius: 50%;
padding: 0;
margin: 0 2px;
box-shadow: none;
animation: none;
flex-shrink: 0;
cursor: pointer;
color: #fff;
}
.geo-pill i { display: inline; font-size: 14px; }
.geo-pill #geo-label { display: none; }
.geo-pill.error, .geo-pill.off { background: transparent; box-shadow: none; animation: none; }
/* Contorno del avatar = indicador de ubicación (sustituye al punto rojo). */
#header-avatar { border: 2px solid rgba(255,255,255,.55); box-sizing: border-box; }
#header-avatar.geo-on { border-color: #43a047; } /* ubicación activa → verde */
#header-avatar.geo-off { border-color: #dc2626; } /* apagada/sin señal → rojo */
@keyframes geo-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .6; }
}
/* ===== BTN-ICON ===== */
.btn-icon {
width: 40px; height: 40px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,.85);
transition: background var(--transition);
}
.btn-icon:hover { background: rgba(255,255,255,.12); }
/* ===== CONTENT ===== */
.app-content {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding-top: calc(var(--header-h) + var(--nav-h));
padding-bottom: 16px;
}
/* ===== Layout responsivo: en escritorio centrado y 2 columnas tipo YouTube ===== */
@media (min-width: 900px) {
/* Centra el contenido y limita su ancho — más cómodo en pantallas grandes */
.app-content > .view {
max-width: 1280px;
margin: 0 auto;
}
/* Las barras superiores cubren TODO el ancho de la página con su color de fondo,
pero su CONTENIDO se centra usando padding lateral. */
.app-header,
.top-nav {
max-width: none;
width: auto;
padding-left: max(12px, calc((100% - 1280px) / 2));
padding-right: max(12px, calc((100% - 1280px) / 2));
}
/* El bottom-nav SÍ se reparte a TODO el ancho (no centrado a 1280): sus ítems
(flex:1) abarcan la pantalla completa, distribuidos uniformemente. */
.top-nav {
padding-left: 0;
padding-right: 0;
justify-content: space-between;
}
/* La barra de vista (slot) cubre TODO el ancho de la página con su fondo y su
línea inferior (como .app-header); su CONTENIDO se centra con padding lateral
alineado a la columna de 1280px (mismo cálculo que el header). */
.view-toolbar-slot {
max-width: none;
width: auto;
margin: 0;
padding-left: max(12px, calc((100% - 1280px) / 2));
padding-right: max(12px, calc((100% - 1280px) / 2));
}
/* Dashboard (SOLO #view-dashboard): banner + quick-actions full width arriba,
y luego un layout de 2 columnas con auto-flow denso (los huecos se llenan).
Admin → col 1: anuncios · col 2: bitácora.
Residente → col 1: anuncios · col 2: residente-dashboard.
Limpieza/Mantto → ven full width porque su dashboard ocupa col 1/-1. */
#view-dashboard .view-body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
gap: 14px 24px;
align-items: start;
}
/* Filas full width (siempre arriba). Banner SIEMPRE en row 1 — por encima
de cualquier panel (mvv-card, anuncios). admin-quick row 2 (típicamente
vacío desde v454). */
#view-dashboard .jm-banner {
grid-column: 1 / -1;
grid-row: 1;
min-width: 0;
z-index: 4; /* sobre el contenido de abajo para que la sombra inferior se vea */
}
#admin-quick {
grid-column: 1 / -1;
grid-row: 2;
min-width: 0;
}
/* MVV ahora es modular: ocupa col 1 al lado de anuncios.
Antes ocupaba full width, ahora se ve como un panel más.
Row 3 explícito → siempre DEBAJO del banner. */
#mvv-home { grid-column: 1; grid-row: 3; min-width: 0; z-index: 1; }
#anuncios-home-block { grid-column: 2; grid-row: 3; min-width: 0; }
/* Sidebars de admin/residente quedan abajo full width
(admin-stats: bitácora; residente-dashboard: info de su habitación) */
#admin-stats { grid-column: 1 / -1; min-width: 0; }
#residente-dashboard { grid-column: 1 / -1; min-width: 0; }
/* Dashboards de limpieza/mantto: full width */
#limpieza-dashboard,
#mantenimiento-dashboard { grid-column: 1 / -1; min-width: 0; }
.dashboard-col { min-width: 0; }
/* Vista de notas (solo cuadrícula): más columnas en escritorio */
.notas-list.notas-vista-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Vistas con listas (pagos, strikes, bitácora, visitas): 2 columnas.
El DIRECTORIO (residentes) queda en UNA sola columna (lista de contactos). */
#view-pagos #pagos-list,
#view-strikes #strikes-list,
#view-bitacora #bitacora-list,
#view-visitas #visitas-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
padding: 0 16px;
}
/* Directorio: lista única a TODO lo ancho en PC (el nombre largo se trunca
con "…" y los iconos de contacto nunca se quitan — ver .dir-name/.dir-actions). */
#view-residentes #residentes-list {
display: block; max-width: none; margin: 0;
}
}
@media (min-width: 1180px) {
/* En pantallas anchas, 3 columnas para listas grandes */
#view-pagos #pagos-list { grid-template-columns: 1fr 1fr 1fr; }
}
/* ===== Layout YouTube-grid: contenedores genéricos que se vuelven 2 cols
en desktop. Aplica a Mi Espacio, contabilidad, centro notif, reposiciones. */
@media (min-width: 900px) {
/* Mi Espacio: cuando hay residente-dashboard + me-mini-dashboard, hacemos
que ambos vivan en un grid de 2 columnas. */
#view-mi-espacio .view-body { max-width: 1280px; margin: 0 auto; }
/* Centro de notificaciones — ya tiene grid 1fr 1fr en >700px */
/* Anuncios (vista residentes) — 2 cols en desktop */
#view-anuncios .anuncios-pin-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
/* Tutoriales: ya usa auto-fill minmax 220px (4-5 cols en desktop) */
/* Pagos / Reposiciones: el card central queda 560px max, pero permitimos
que la lista de conceptos use 2 cols en desktop */
#view-reposicion-tag .rt-conceptos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
/* Contabilidad: KPIs ya son 3 cols. La tabla cronograma se mantiene full
width con scroll horizontal — está bien así. */
}
@media (min-width: 1180px) {
/* En pantallas muy anchas, 3 cols para listas de cards */
#view-anuncios .anuncios-pin-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
}
/* ===== VIEWS ===== */
.view { display: none; }
.view.active { display: block; }
/* Gap superior mínimo (24px) entre la toolbar y el contenido en TODAS las vistas
(igual al que tenía el menú admin: 16px body + 8px), para evitar empalmes. */
.view-body { padding: 24px 16px 16px; }
.view-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.view-toolbar-slot { background: var(--white) !important; }
.toolbar-title { font-size: 16px; font-weight: 700; }
/* ===== TOP NAV (estilo Facebook: tabs justo debajo del header azul) =====
Sombra SOLO en la parte inferior para dar la impresión que el nav flota
sobre el contenido (estilo material design, App Bar elevation). */
/* `.top-nav` se renombró conceptualmente a "bottom nav". Ahora está fijo
abajo del viewport (con safe-area para iPhone), mantiene el mismo
comportamiento de auto-hide al hacer scroll (clase topbar-hidden
activa una traslación hacia abajo para que desaparezca limpiamente). */
.top-nav {
height: var(--nav-h);
/* Mismo degradado glossy claro que la barra superior → enmarca la app arriba/abajo. */
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%);
border-top: 1px solid var(--gray-200);
border-bottom: none;
display: flex;
box-shadow: 0 -2px 12px rgba(0,0,0,.10);
position: fixed;
left: 0; right: 0;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
z-index: 90;
transition: transform .25s cubic-bezier(.2,.8,.2,1);
will-change: transform;
}
#app-screen.topbar-hidden .top-nav {
transform: translateY(100%);
}
/* El contenido principal necesita padding-bottom para no quedar tapado por
el bottom nav. El padding-top sigue manejado por refreshAppContentPadding. */
.app-content {
padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 8px);
}
/* ===== BOTTOM NAV (legado, ya no se usa pero se conserva por compatibilidad) ===== */
.bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
height: var(--nav-h);
background: var(--white);
border-top: 1px solid var(--gray-200);
display: flex;
z-index: 200;
box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
color: var(--gray-400);
font-size: 10px;
font-weight: 500;
padding: 6px 4px;
transition: color var(--transition);
border: none;
background: none;
cursor: pointer;
position: relative;
}
.nav-item i {
font-size: 21px;
color: var(--gray-400);
transition: transform var(--transition), color var(--transition);
}
/* Nombre pequeño debajo de cada ícono del bottom nav */
.nav-label {
font-size: 9.5px;
line-height: 1.05;
margin-top: 2px;
color: var(--gray-500);
font-weight: 600;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-item.active .nav-label { color: var(--ford-blue); }
.nav-item.active { color: var(--ford-blue); }
.nav-item.active i {
color: var(--ford-blue);
transform: translateY(-1px);
}
/* Iconos del nav inferior — INACTIVO: outline puro (sólo contorno gris).
`-webkit-text-stroke` pinta el contorno y `-webkit-text-fill-color`
transparente vacía el centro del glifo FontAwesome. */
.nav-item i.fas,
.nav-item i.fab,
.nav-item i.far {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1.2px currentColor;
}
/* Iconos del nav inferior — ACTIVO (v468): el glifo se RELLENA sólido en
azul Ford. Se quita el text-stroke + text-fill-color transparente para
que el icono se vea como silueta sólida (de su contorno hacia adentro). */
.nav-item.active i.fas,
.nav-item.active i.fab,
.nav-item.active i.far {
-webkit-text-fill-color: var(--ford-blue);
-webkit-text-stroke: 0;
}
/* Icono de Notas en el nav: SVG outline inline en lugar de FontAwesome.
currentColor en el `stroke` del SVG hace que el contorno tome el mismo
color que los iconos FA (.nav-item i): gris-400 inactivo y Ford Blue al
estar activo. */
.nav-svg-icon {
width: 22px;
height: 22px;
display: block;
color: var(--gray-400);
transition: color var(--transition), transform var(--transition);
}
.nav-item.active .nav-svg-icon {
color: var(--ford-blue);
transform: translateY(-1px);
}
/* SVG activo: rellenar el path con azul Ford (NO solo el stroke). */
.nav-item.active .nav-svg-icon,
.nav-item.active .nav-svg-icon path {
fill: var(--ford-blue) !important;
}
.nav-item .nav-icon-wrap { position: relative; }
/* Avatar de perfil dentro del top-nav (último item, extremo derecho) */
.nav-avatar {
display: inline-flex;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--blue-light);
color: var(--ford-blue);
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
border: 1.5px solid #fff; /* blanco para contrastar con fondo gris del nav */
overflow: hidden;
}
.nav-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Badge de la campanita cuando vive dentro del top-nav */
.nav-item .notif-badge {
top: -2px;
right: -6px;
}
.nav-item.nav-item-profile { flex: 0 0 auto; padding: 6px 12px; }
.nav-item.nav-item-profile.active .nav-avatar { border-color: var(--ford-blue); }
/* No aplicar el efecto contorno a la avatar pill */
.nav-item.nav-item-profile i.fas {
-webkit-text-stroke: 0;
color: inherit;
font-size: 13px;
}
/* ===== PRIVACIDAD BANNER ===== */
.privacidad-banner {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 16px;
padding: 14px;
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
border-left: 4px solid #ff8c00;
border-radius: 10px;
}
.privacidad-banner > i { font-size: 24px; color: #ef6c00; }
.privacidad-banner > div { flex: 1; color: #5d3500; font-size: 13px; }
/* ===== DOC LEAF (archivos en árbol Documentos) ===== */
.docleaf {
list-style: none;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
margin: 6px 0;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow .15s, transform .1s;
}
.docleaf:hover { box-shadow: var(--shadow-md); }
.docleaf:active { transform: scale(0.99); }
.docleaf-main {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
cursor: pointer;
}
.docleaf-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: linear-gradient(135deg, #ffebee, #ffcdd2);
color: #d32f2f;
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.docleaf-body { flex: 1; min-width: 0; }
.docleaf-name {
font-weight: 600;
font-size: 14px;
color: var(--gray-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.docleaf-chips {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 4px;
}
.docleaf-chip {
font-size: 10px;
padding: 2px 7px;
border-radius: 10px;
background: var(--gray-100);
color: var(--gray-700);
white-space: nowrap;
}
.docleaf-chip.green { background: #e8f5e9; color: #2e7d32; font-weight: 700; }
.docleaf-chip.gray { background: #fff3e0; color: #ef6c00; font-style: italic; }
.docleaf-arrow { color: var(--gray-400); font-size: 12px; flex-shrink: 0; }
.docleaf-actions {
display: flex;
gap: 6px;
padding: 8px 12px;
background: var(--gray-50);
border-top: 1px solid var(--gray-100);
flex-wrap: wrap;
}
.docleaf-btn {
flex: 1;
min-width: 80px;
padding: 6px 10px;
border: 1px solid var(--gray-300);
border-radius: 6px;
background: var(--white);
color: var(--gray-700);
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: all .12s;
}
.docleaf-btn:hover { background: var(--ford-blue); color: var(--white); border-color: var(--ford-blue); }
.docleaf-btn.danger { color: var(--red); border-color: rgba(220,53,69,.3); }
.docleaf-btn.danger:hover { background: var(--red); color: var(--white); border-color: var(--red); }
/* ===== DETALLE DE DOCUMENTO (modal-doc-detalle) ===== */
.dd-hero {
display: flex;
gap: 14px;
padding: 16px;
margin-bottom: 14px;
background: linear-gradient(135deg, #003478 0%, #1e5dc1 100%);
color: var(--white);
border-radius: 12px;
}
.dd-hero-icon {
width: 56px; height: 56px;
border-radius: 10px;
background: rgba(255,255,255,.2);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
.dd-hero-body { flex: 1; min-width: 0; }
.dd-hero-tipo {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
opacity: .85;
margin-bottom: 2px;
}
.dd-hero-monto {
font-size: 26px;
font-weight: 800;
line-height: 1.1;
}
.dd-hero-monto-sub {
font-size: 12px;
font-weight: 400;
opacity: .8;
margin-left: 4px;
}
.dd-hero-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 8px;
}
.dd-chip {
background: rgba(255,255,255,.18);
padding: 3px 9px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
}
.dd-section {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.dd-section-head {
background: var(--gray-50);
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
color: var(--ford-blue);
text-transform: uppercase;
letter-spacing: .4px;
border-bottom: 1px solid var(--gray-200);
}
.dd-section-head i { margin-right: 6px; }
.dd-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 14px;
border-bottom: 1px solid var(--gray-100);
font-size: 13px;
}
.dd-row:last-child { border-bottom: none; }
.dd-label {
color: var(--gray-600);
font-weight: 500;
flex-shrink: 0;
font-size: 12px;
}
.dd-value {
color: var(--gray-900);
font-weight: 600;
text-align: right;
word-break: break-word;
}
/* ===== DRIVE TREE ===== */
.tree-toolbar {
display: flex;
gap: 6px;
margin-bottom: 10px;
flex-wrap: wrap;
}
/* ===== Documentos · navegador estilo Google Drive ===== */
/* Toolbar superior (buscador + botones de acción) — UNA sola fila, transparente. */
.docsnav-toolbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px; /* +2px para que los iconos respiren */
padding: 8px 12px;
background: transparent;
position: sticky;
top: 0;
z-index: 5;
min-width: 0;
}
/* Botón "Opciones" del docsnav: mismo look que el tb-opciones del slot. */
.docsnav-toolbar .tb-opciones {
margin-left: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 4px;
background: transparent; border: 0; box-shadow: none;
color: var(--ford-blue); font-weight: 700; font-size: 13.5px;
cursor: pointer; padding: 8px 10px; white-space: nowrap;
}
.docsnav-toolbar .tb-opciones:active { opacity: .55; }
/* Buscador colapsable: por default solo se ve el icono lupa. Al hacer click el
input se expande horizontalmente con transición suave. Mientras escribes se
queda expandido. Al perder foco y vaciarse, se colapsa. */
.docsnav-search-wrap {
display: flex;
align-items: center;
position: relative;
/* Reservamos el ancho del botón aunque el input esté con width:0 + margin-left:-34px.
Sin esto, el wrap mide 0px en el cálculo de flex (porque el negative margin del
input cancela el botón) y el botón se "desborda" sobre el siguiente elemento. */
flex: 0 0 34px;
min-width: 34px;
height: 34px;
}
/* Cuando se expande, el wrap crece para que quepa el input visible. */
.docsnav-search-wrap.expanded {
flex: 0 0 auto;
min-width: 220px;
}
@media (max-width: 540px) {
.docsnav-search-wrap.expanded { min-width: 160px; }
}
.docsnav-search-wrap .docsnav-search-btn {
/* hereda los estilos circulares de .docsnav-toolbar .btn.btn-secondary.btn-sm */
position: relative;
z-index: 2;
}
.docsnav-search-wrap .docsnav-search {
width: 0;
min-width: 0;
max-width: 0;
padding: 7px 0;
margin-left: -34px; /* el botón queda encima del input vacío */
border: 1.5px solid transparent;
border-radius: 999px;
font-size: 13px;
background: transparent;
color: var(--gray-800);
opacity: 0;
pointer-events: none;
transition: max-width .25s ease, width .25s ease, padding .25s ease,
border-color .15s ease, opacity .2s ease, background .15s ease;
}
.docsnav-search-wrap.expanded .docsnav-search {
width: 220px;
min-width: 220px;
max-width: 220px;
padding: 7px 14px 7px 40px; /* espacio a la izquierda para el icono */
margin-left: -34px;
border-color: var(--ford-blue);
opacity: 1;
pointer-events: auto;
}
.docsnav-search-wrap.expanded .docsnav-search-btn {
background: transparent !important;
border-color: transparent !important;
pointer-events: none; /* deja al input recibir clicks */
}
.docsnav-search-wrap .docsnav-search::placeholder { color: var(--gray-500); }
.docsnav-search-wrap .docsnav-search:focus {
outline: none;
background: rgba(255,255,255,.85);
}
@media (max-width: 540px) {
.docsnav-search-wrap.expanded .docsnav-search {
width: 160px;
min-width: 160px;
max-width: 160px;
}
}
/* Botones de acción del toolbar (refresh, broom): círculos transparentes con
contorno e icono Ford Blue — igual al patrón de los iconos circulares de Limpieza. */
.docsnav-toolbar .btn.btn-secondary.btn-sm {
width: 34px;
height: 34px;
padding: 0;
border-radius: 50%;
background: transparent !important;
border: 1.5px solid var(--ford-blue);
color: var(--ford-blue);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background .12s, transform .08s;
}
.docsnav-toolbar .btn.btn-secondary.btn-sm i { font-size: 13px; margin: 0; }
.docsnav-toolbar .btn.btn-secondary.btn-sm:hover {
background: rgba(0,52,120,.08) !important;
}
.docsnav-toolbar .btn.btn-secondary.btn-sm:active { transform: scale(.96); }
/* ===== Breadcrumb en su PROPIA fila, entre el toolbar y la grid de archivos ===== */
.docsnav-breadcrumb {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
padding: 4px 14px 8px;
background: transparent;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
color: var(--gray-600);
}
.docsnav-breadcrumb::-webkit-scrollbar { height: 4px; }
.docsnav-crumb {
background: none;
border: none;
color: var(--gray-700);
font-weight: 500;
padding: 2px 4px;
cursor: pointer;
font-size: 12px;
white-space: nowrap;
text-decoration: none;
}
.docsnav-crumb:hover {
color: var(--ford-blue);
text-decoration: underline;
}
.docsnav-crumb.current {
color: var(--gray-900);
font-weight: 600;
cursor: default;
}
.docsnav-crumb.current:hover { text-decoration: none; }
.docsnav-sep {
font-size: 9px;
color: var(--gray-400);
margin: 0 1px;
}
.docsnav-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding: 12px;
}
@media (min-width: 720px) {
.docsnav-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (min-width: 1100px) {
.docsnav-grid { grid-template-columns: repeat(3, 1fr); }
}
.docsnav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 10px;
cursor: pointer;
transition: background .12s, border-color .12s, transform .08s;
min-width: 0;
}
.docsnav-item:hover {
background: #f5f9ff;
border-color: var(--ford-blue);
}
.docsnav-item:active { transform: scale(.99); }
.docsnav-thumb {
width: 44px; height: 44px;
border-radius: 8px;
background: var(--thumb-bg, var(--gray-100));
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
overflow: hidden;
font-size: 20px;
}
.docsnav-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.docsnav-thumb.folder {
background: transparent;
border: 1.5px solid var(--ford-blue);
color: var(--ford-blue);
}
.docsnav-info { flex: 1; min-width: 0; }
.docsnav-name {
font-weight: 600;
font-size: 13px;
color: var(--gray-900);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.docsnav-meta {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
}
.docsnav-actions {
display: flex;
gap: 2px;
flex-shrink: 0;
}
.docsnav-act-btn {
width: 28px; height: 28px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--gray-600);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
transition: background .12s, color .12s;
}
.docsnav-act-btn:hover { background: var(--blue-light, #eaf2fb); color: var(--ford-blue); }
.docsnav-act-btn.danger:hover { background: #fde2e2; color: #b91c1c; }
/* En móvil, esconder algunos botones de acción menos críticos para no saturar */
@media (max-width: 540px) {
.docsnav-item.file .docsnav-actions .docsnav-act-btn:nth-child(2) { display: none; }
.docsnav-search { width: 120px; }
}
.tree-root, .tree-children {
list-style: none;
margin: 0;
padding: 0;
}
.tree-root { font-size: 14px; }
/* Cascada: cada nivel se indenta a la derecha con una guía vertical sutil,
creando una jerarquía visual estilo Finder/Drive. */
.tree-children {
padding-left: 18px;
border-left: 2px solid var(--gray-100);
margin-left: 14px;
margin-top: 2px;
}
.tree-folder details[open] > .tree-children {
border-left-color: rgba(0,52,120,.18);
}
.tree-folder details > summary {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
border-radius: 6px;
cursor: pointer;
user-select: none;
list-style: none;
transition: background .12s;
border-bottom: 1px solid var(--gray-100);
}
.tree-folder details > summary::-webkit-details-marker { display: none; }
.tree-folder details > summary:hover { background: var(--gray-100); }
.tree-folder details[open] > summary { background: rgba(0,52,120,.06); }
.tree-chev { color: var(--gray-500); transition: transform .15s; font-size: 11px; width: 12px; text-align: center; }
.tree-folder details[open] > summary .tree-chev { transform: rotate(90deg); color: var(--ford-blue); }
.tree-foldericon { color: var(--ford-blue); width: 18px; text-align: center; }
.tree-fileicon { color: var(--gray-500); width: 18px; text-align: center; }
.tree-leaf {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
color: var(--gray-800);
transition: background .12s;
}
.tree-leaf:hover { background: var(--gray-100); }
.tree-label { flex: 1; word-break: break-word; }
.tree-meta {
font-size: 11px;
color: var(--gray-600);
background: var(--gray-100);
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
}
.tree-actions {
display: flex;
gap: 4px;
opacity: 0;
transition: opacity .12s;
}
.tree-folder details > summary:hover .tree-actions,
.tree-leaf:hover .tree-actions { opacity: 1; }
.tree-btn {
background: none;
border: 1px solid var(--gray-300);
border-radius: 4px;
padding: 4px 7px;
font-size: 11px;
color: var(--gray-700);
cursor: pointer;
transition: all .12s;
}
.tree-btn:hover { background: var(--gray-200); }
.tree-btn.danger { color: var(--red); border-color: rgba(220,53,69,.3); }
.tree-btn.danger:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.tree-empty {
padding: 8px 12px;
font-size: 12px;
color: var(--gray-500);
font-style: italic;
}
/* ===== OCR PROGRESS ===== */
.ocr-progress-bar {
height: 4px;
background: var(--gray-200);
border-radius: 2px;
overflow: hidden;
margin: 14px 0 10px;
}
.ocr-progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--ford-blue), #1e5dc1);
transition: width .4s ease;
}
.ocr-phases {
list-style: none;
padding: 0;
margin: 0;
font-size: 13px;
}
.ocr-phases li {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 4px;
color: var(--gray-500);
}
.ocr-phases li i { width: 16px; text-align: center; }
.ocr-phases li.active { color: var(--ford-blue); font-weight: 600; }
.ocr-phases li.active i { color: var(--ford-blue); }
.ocr-phases li.done { color: var(--green); }
.ocr-phases li.done i { color: var(--green); }
/* Ventana desplegable de logs en vivo */
.ocr-log-details {
margin-top: 10px;
border: 1px solid var(--gray-200);
border-radius: 8px;
background: var(--gray-50);
overflow: hidden;
}
.ocr-log-details summary {
cursor: pointer;
padding: 8px 12px;
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
background: var(--gray-100);
user-select: none;
list-style: none;
}
.ocr-log-details summary::-webkit-details-marker { display: none; }
.ocr-log-details summary::before {
content: '▶';
margin-right: 6px;
font-size: 9px;
display: inline-block;
transition: transform .15s;
}
.ocr-log-details[open] summary::before { transform: rotate(90deg); }
.ocr-log-details summary i {
margin-right: 6px;
color: var(--ford-blue);
}
.ocr-log {
font-family: 'Consolas', 'Courier New', monospace;
font-size: 11px;
line-height: 1.45;
background: #0f172a;
color: #c5d3ee;
padding: 10px 12px;
max-height: 260px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-word;
}
.ocr-log-line {
padding: 2px 0;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.ocr-log-line:last-child { border-bottom: none; }
.ocr-log-line .ocr-log-time {
color: #64748b;
margin-right: 8px;
font-size: 10px;
}
/* ===== WIZARD STEPS ===== */
.wizard-steps {
display: flex;
gap: 6px;
margin: 4px 0 14px;
justify-content: space-between;
}
.wizard-step {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border-radius: 6px;
background: var(--gray-100);
color: var(--gray-600);
font-size: 11px;
font-weight: 600;
}
.wizard-step span {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--gray-300); color: var(--white); font-size: 11px;
}
.wizard-step.active { background: rgba(0,52,120,.12); color: var(--ford-blue); }
.wizard-step.active span { background: var(--ford-blue); }
.wizard-step.done { background: rgba(34,139,34,.12); color: var(--green); }
.wizard-step.done span { background: var(--green); }
/* ===== AGENDA ===== */
.agenda-row {
display: grid;
grid-template-columns: 50px 32px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
margin: 6px 16px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--ford-blue);
}
.agenda-row.warning { border-left-color: #ff8c00; }
.agenda-row.late { border-left-color: var(--red); background: #fff5f5; }
.agenda-date { text-align: center; }
.agenda-day { font-size: 22px; font-weight: 800; color: var(--ford-blue); line-height: 1; }
.agenda-month{ font-size: 11px; text-transform: uppercase; color: var(--gray-600); letter-spacing: .5px; margin-top: 2px; }
.agenda-row.warning .agenda-day { color: #ff8c00; }
.agenda-row.late .agenda-day { color: var(--red); }
.agenda-icon { color: var(--gray-500); font-size: 18px; }
.agenda-title{ font-weight: 600; font-size: 14px; color: var(--gray-900); }
.agenda-sub { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.agenda-due { font-size: 11px; color: var(--gray-500); margin-top: 2px; }
.agenda-row.warning .agenda-due { color: #ff8c00; font-weight: 600; }
.agenda-row.late .agenda-due { color: var(--red); font-weight: 700; }
/* ===== SERVICIOS ===== */
.servicios-depto {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 10px;
margin: 8px 16px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.servicios-depto-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
cursor: pointer;
user-select: none;
background: var(--white);
}
.servicios-depto-header:hover { background: var(--gray-50); }
.servicios-depto-header .depto-title { font-size: 16px; font-weight: 700; color: var(--ford-blue); }
.servicios-depto-header .depto-meta { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.servicios-depto-header .chev { transition: transform .2s; color: var(--gray-500); }
.servicios-depto.open .chev { transform: rotate(180deg); }
.servicios-depto-body { display: none; border-top: 1px solid var(--gray-100); padding: 8px 12px 12px; }
.servicios-depto.open .servicios-depto-body { display: block; }
.servicio-row {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 8px;
border-bottom: 1px solid var(--gray-100);
}
.servicio-row:last-child { border-bottom: none; }
.servicio-icon {
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: var(--white);
}
.servicio-icon.agua { background: #2196f3; }
.servicio-icon.luz { background: #ffc107; color: #333; }
.servicio-icon.internet { background: #6a1b9a; }
.servicio-icon.gas { background: #ff7043; }
.servicio-icon.renta { background: #00897b; }
.servicio-icon.mantenimiento { background: #607d8b; }
.servicio-info-name { font-weight: 600; font-size: 14px; text-transform: capitalize; color: var(--gray-900); }
.servicio-info-sub { font-size: 11px; color: var(--gray-600); margin-top: 2px; }
.servicio-amount { font-weight: 700; color: var(--gray-900); font-size: 14px; text-align: right; }
.servicio-due { font-size: 11px; color: var(--gray-600); }
.servicio-due.warning { color: #ff8c00; font-weight: 600; }
.servicio-due.late { color: var(--red); font-weight: 700; }
.servicio-empty { font-size: 12px; color: var(--gray-500); padding: 6px 8px; font-style: italic; }
.servicios-alert {
margin: 8px 16px;
padding: 10px 12px;
border-radius: 8px;
background: #fff3e0;
color: #e65100;
font-size: 13px;
border-left: 4px solid #ff8c00;
}
.servicios-alert.late { background: #ffebee; color: #c62828; border-left-color: #c62828; }
/* ===== JM HOME BANNER (welcome + clima + Any, estilo Mercadolibre) =====
El banner aprovecha TODO el ancho de la pantalla y queda pegado al borde
inferior del topbar — usamos márgenes negativos para "escapar" del
padding del .view-body (16px). En desktop (≥900px) recupera radio + margen
natural porque ahí el .view está centrado con max-width 1280px. */
/* Botones de navegación del banner (v462) — pills PEQUEÑAS al FONDO del
banner, no en las orillas verticales (el usuario reportó que se sobreponían
al contenido del slide). Centrados horizontalmente debajo de los slides. */
.jm-banner-nav {
position: absolute;
bottom: 8px;
top: auto;
width: 28px;
height: 24px;
z-index: 5;
background: rgba(0,0,0,.30);
border: none;
border-radius: 999px;
color: rgba(255,255,255,.85);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background .18s ease, color .18s ease, transform .12s ease;
backdrop-filter: blur(2px);
}
/* Prev y Next juntos en el centro horizontal del banner, abajo. */
.jm-banner-nav-prev { left: 50%; margin-left: -34px; }
.jm-banner-nav-next { left: 50%; margin-left: 6px; }
@media (max-width: 600px) {
/* En móvil el área de slides es más estrecha — los desplazamos un poco
hacia la izquierda para que no caigan sobre el cinturón. */
.jm-banner-nav-prev { left: auto; right: calc(50% + 14px); margin-left: 0; }
.jm-banner-nav-next { left: auto; right: calc(50% - 14px); margin-left: 0; }
}
.jm-banner-nav:hover { background: rgba(0,0,0,.50); color: #fff; }
.jm-banner-nav:active { transform: scale(.90); }
.jm-banner-nav:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }
.jm-banner {
position: relative;
/* Full-bleed en móvil: pegado a las orillas izquierda/derecha y arriba (contra
el topbar), sin espacios muertos. Los margenes negativos cancelan el padding
del .view-body (24px arriba, 16px a los lados). El borde redondeado queda solo
abajo para que arriba y los lados queden a ras. */
margin: -24px -16px 14px;
border-radius: 0;
overflow: hidden;
background: linear-gradient(120deg, #003478 0%, #1769FF 60%, #4b8bff 100%);
color: var(--white);
box-shadow: none; /* sin sombreado */
min-height: 200px;
display: flex;
align-items: stretch;
isolation: isolate;
z-index: 4;
transition: background .8s ease;
}
@media (min-width: 900px) {
/* Desktop: el .view ya está centrado a 1280px con margen natural alrededor.
Aquí sí lucen mejor las esquinas redondeadas y el margen visible. */
.jm-banner {
margin: 12px 0 16px;
border-radius: 0;
}
}
/* Variantes de fondo según el clima */
.jm-banner.w-clear { background: linear-gradient(120deg, #003478 0%, #1769FF 55%, #6aa9ff 100%); }
.jm-banner.w-clear-night { background: linear-gradient(120deg, #06091f 0%, #121845 50%, #2a3470 100%); }
.jm-banner.w-cloudy { background: linear-gradient(120deg, #4d6080 0%, #7c8ba6 55%, #a3b1c8 100%); }
.jm-banner.w-cloudy-night { background: linear-gradient(120deg, #1a1f33 0%, #2a3149 55%, #3a445e 100%); }
.jm-banner.w-fog { background: linear-gradient(120deg, #6a7684 0%, #9aa5b3 55%, #c5cdd6 100%); }
.jm-banner.w-fog-night { background: linear-gradient(120deg, #1d242f 0%, #313844 55%, #4a525e 100%); }
.jm-banner.w-rain { background: linear-gradient(120deg, #1e3956 0%, #355676 55%, #5d7a98 100%); }
.jm-banner.w-rain-night { background: linear-gradient(120deg, #06101e 0%, #122236 55%, #1f3a55 100%); }
.jm-banner.w-storm { background: linear-gradient(120deg, #0c1126 0%, #1f2851 55%, #3a4078 100%); }
.jm-banner.w-snow { background: linear-gradient(120deg, #5b7daa 0%, #92aecf 55%, #d3e0ee 100%); }
.jm-banner.w-snow-night { background: linear-gradient(120deg, #1c2a3c 0%, #344559 55%, #5a6e85 100%); }
/* Rayos del sol para día despejado: ondas sutiles que se mueven */
/* Sol eliminado por preferencia del usuario — el banner queda solo con el gradiente */
/* Nubes flotantes para día nublado */
.jm-banner.w-cloudy::before,
.jm-banner.w-cloudy-night::before,
.jm-banner.w-fog::before,
.jm-banner.w-fog-night::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 120px 40px at 18% 35%, rgba(255,255,255,.30) 0%, transparent 70%),
radial-gradient(ellipse 160px 50px at 60% 28%, rgba(255,255,255,.22) 0%, transparent 70%),
radial-gradient(ellipse 100px 36px at 85% 65%, rgba(255,255,255,.25) 0%, transparent 70%);
background-size: 220% 100%;
animation: cloudDrift 28s linear infinite;
z-index: 0;
}
.jm-banner.w-cloudy-night::before,
.jm-banner.w-fog-night::before { opacity: .35; }
@keyframes cloudDrift {
from { background-position: 0% 0%, 0% 0%, 0% 0%; }
to { background-position: -220% 0%, -220% 0%, -220% 0%; }
}
/* Estrellas titilando para noche despejada */
.jm-banner.w-clear-night::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 12% 22%, rgba(255,255,255,.95) 1px, transparent 2px),
radial-gradient(circle at 32% 48%, rgba(255,255,255,.85) 1px, transparent 1.6px),
radial-gradient(circle at 52% 18%, rgba(255,255,255,1) 1.4px, transparent 2px),
radial-gradient(circle at 72% 38%, rgba(255,255,255,.8) 1px, transparent 1.5px),
radial-gradient(circle at 88% 62%, rgba(255,255,255,.9) 1.2px, transparent 1.7px),
radial-gradient(circle at 25% 75%, rgba(255,255,255,.75) 1px, transparent 1.4px),
radial-gradient(circle at 18% 60%, rgba(255,255,255,.6) 1px, transparent 1.4px),
radial-gradient(circle at 65% 80%, rgba(255,255,255,.7) 1px, transparent 1.5px),
radial-gradient(circle at 78% 12%, rgba(255,255,255,.8) 1px, transparent 1.4px),
radial-gradient(ellipse 72px 72px at 82% 28%, rgba(245,245,255,.95) 0%, rgba(245,245,255,.5) 38%, transparent 70%);
background-size: 100% 100%;
background-repeat: no-repeat;
animation: nightStars 3.5s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes nightStars {
0% { opacity: .4; }
100% { opacity: 1; }
}
/* Variantes por SLIDE (sobrescriben weather cuando estamos en otros slides) */
.jm-banner.s-circula { background: linear-gradient(120deg, #6b3000 0%, #c0560a 50%, #e8881f 100%); }
.jm-banner.s-pago { background: linear-gradient(120deg, #003a1f 0%, #1f6b3d 50%, #3aa463 100%); }
.jm-banner.s-salida { background: linear-gradient(120deg, #4a148c 0%, #8e24aa 50%, #ec407a 100%); }
.jm-banner.s-circula::before, .jm-banner.s-pago::before, .jm-banner.s-salida::before,
.jm-banner.s-circula::after, .jm-banner.s-pago::after, .jm-banner.s-salida::after {
/* desactivar lluvia/nieve/relámpago cuando NO es slide del clima */
display: none;
}
/* Lluvia animada (líneas diagonales que caen) */
.jm-banner.w-rain::before,
.jm-banner.w-rain-night::before,
.jm-banner.w-storm::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
100deg,
rgba(255,255,255,0) 0px,
rgba(255,255,255,0) 18px,
rgba(255,255,255,.18) 18px,
rgba(255,255,255,.18) 19px
);
background-size: 40px 40px;
animation: rainFall .7s linear infinite;
z-index: 0;
opacity: .7;
}
.jm-banner.w-storm::before { opacity: .85; }
.jm-banner.w-rain-night::before { opacity: .55; }
@keyframes rainFall {
to { background-position: -10px 40px; }
}
/* Relámpago aleatorio en tormenta */
.jm-banner.w-storm::after {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 70% 30%, rgba(255,255,200,.55) 0%, transparent 60%);
animation: lightning 6s ease infinite;
opacity: 0;
z-index: 0;
}
@keyframes lightning {
0%, 89%, 92%, 100% { opacity: 0; }
90%, 91% { opacity: 1; }
}
/* Nieve cayendo */
.jm-banner.w-snow::before,
.jm-banner.w-snow-night::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 20%, #fff 0, #fff 1.5px, transparent 2px),
radial-gradient(circle at 60% 50%, #fff 0, #fff 1.5px, transparent 2px),
radial-gradient(circle at 80% 80%, #fff 0, #fff 1.5px, transparent 2px),
radial-gradient(circle at 35% 70%, #fff 0, #fff 1.5px, transparent 2px);
background-size: 50px 50px;
animation: snowFall 5s linear infinite;
z-index: 0;
opacity: .85;
}
@keyframes snowFall {
to { background-position: 0 50px, 0 50px, 0 50px, 0 50px; }
}
/* Asegurar que el contenido del banner queda por encima de los efectos de clima */
.jm-banner-bg, .jm-banner-left, .jm-banner-right, .jm-banner-quick, .jm-bubble { position: relative; z-index: 1; }
.jm-banner-bg { z-index: 0; }
.jm-banner-bg {
position: absolute; inset: 0;
z-index: 0; pointer-events: none;
overflow: hidden;
}
.jm-banner-shape {
position: absolute;
border-radius: 50%;
background: rgba(255,255,255,.08);
}
.jm-banner-shape.s1 { width: 260px; height: 260px; right: -60px; top: -90px; background: rgba(255,255,255,.10); }
.jm-banner-shape.s2 { width: 140px; height: 140px; right: 80px; bottom: -60px; background: rgba(255,255,255,.06); }
.jm-banner-shape.s3 { display: none; }
.jm-banner-left {
position: relative; z-index: 1;
flex: 1 1 60%;
padding: 16px 14px 16px 18px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-height: 175px;
}
/* Slider de 3 slides en el banner — clima, hoy no circula, estado de pago */
.jm-banner-slides {
position: relative;
flex: 1;
min-height: 130px;
}
.jm-banner-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
opacity: 0;
transform: translateX(20px);
transition: opacity .45s ease, transform .45s ease;
pointer-events: none;
overflow: hidden;
}
/* Icono grande de fondo, watermark alusivo al slide */
.slide-bg-icon {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 72px;
opacity: .14;
color: #ffffff;
pointer-events: none;
z-index: 0;
text-shadow: 0 4px 10px rgba(0,0,0,.15);
max-width: 80px;
}
/* El contenido del slide queda por encima del watermark */
.jm-banner-slide > .slide-header,
.jm-banner-slide > .slide-status,
.jm-banner-slide > .slide-text,
.jm-banner-slide > .slide-btn,
.jm-banner-slide > .jm-banner-temp-block,
.jm-banner-slide > .jm-banner-date,
.jm-banner-slide > .jm-weather-loc,
.jm-banner-slide > .jm-weather-tip {
position: relative;
z-index: 1;
}
.jm-banner-slide.active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
/* ===== Banner en PC/tablet (≥720px): MOSAICO ─ todos los avisos a la vez =====
En vez del carrusel (un slide a la vez), mostramos los 4 avisos como tarjetas
pequeñas en una cuadrícula 2×2. Aprovecha el ancho del escritorio. */
@media (min-width: 720px) {
.jm-banner-slides {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
min-height: auto;
}
.jm-banner-slide {
position: static;
inset: auto;
opacity: 1;
transform: none;
pointer-events: auto;
transition: none;
gap: 2px;
min-height: 72px;
padding: 9px 11px;
border-radius: 12px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 1px 3px rgba(0,0,0,.10) inset;
justify-content: center;
}
/* En mosaico no hay flechas de navegación */
.jm-banner-nav { display: none; }
/* Watermark más pequeño dentro de cada tarjeta */
.jm-banner-slide .slide-bg-icon { font-size: 46px; right: 8px; max-width: 50px; }
/* Tipos un poco más compactos para que quepan en la tarjeta */
.jm-banner-slide .slide-status { font-size: 18px; }
.jm-banner-slide .slide-text { font-size: 11.5px; }
.jm-banner-slide .slide-btn { margin-top: 4px; padding: 5px 9px; font-size: 11px; }
/* El bloque de clima compacto dentro de su tarjeta */
.jm-banner-slide .jm-banner-temp { font-size: 30px; }
.jm-banner-slide .jm-weather-tip { font-size: 11px; }
}
.slide-header {
font-size: 11px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
opacity: .85;
display: inline-flex;
align-items: center;
gap: 6px;
}
.slide-header i { font-size: 13px; }
.slide-status {
font-size: 22px;
font-weight: 800;
line-height: 1.15;
margin: 4px 0 2px;
letter-spacing: -.3px;
}
.slide-status.status-no { color: #ffd166; }
.slide-status.status-yes { color: #b6ffce; }
.slide-status.status-amb { color: #ffd166; }
.slide-text {
font-size: 12px;
font-weight: 600;
opacity: .95;
margin: 0;
line-height: 1.35;
}
/* Chips con placa + engomado en el slide de Hoy No Circula */
.hnc-chips {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 6px;
}
.hnc-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.35);
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
text-transform: uppercase;
}
.hnc-chip i { font-size: 10px; opacity: .9; }
.hnc-chip.eng-amarillo { background: #f5c518; color: #2a1d00; border-color: #f5c518; }
.hnc-chip.eng-rosa { background: #ec407a; color: #fff; border-color: #ec407a; }
.hnc-chip.eng-rojo { background: #e63946; color: #fff; border-color: #e63946; }
.hnc-chip.eng-verde { background: #4caf50; color: #0a230f; border-color: #4caf50; }
.hnc-chip.eng-azul { background: #1976d2; color: #fff; border-color: #1976d2; }
.hnc-chip.cont-pre { background: #e67e22; color: #fff; border-color: #e67e22; animation: contPulse 2s ease-in-out infinite; }
.hnc-chip.cont-fase1 { background: #c0392b; color: #fff; border-color: #c0392b; animation: contPulse 1.6s ease-in-out infinite; }
.hnc-chip.cont-fase2 { background: #7a0000; color: #fff; border-color: #7a0000; animation: contPulse 1.2s ease-in-out infinite; }
/* Chip de contingencia ambiental: a la mitad del tamaño normal para que no se amontone */
.hnc-chip.cont {
font-size: 8px;
padding: 2px 6px;
letter-spacing: .15px;
gap: 3px;
border-width: 1px;
}
.hnc-chip.cont i { font-size: 7px; }
@keyframes contPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
50% { box-shadow: 0 0 0 4px rgba(255,255,255,0); }
}
/* Banner reacciona si hay contingencia ambiental: tono naranja/rojo persistente */
/* Contingencia: ya NO sustituye el fondo del clima — sólo agrega un borde-stripe arriba para alertar.
Importante: NO usar `color` aquí porque se hereda al texto del banner; usar valores literales en box-shadow.
La fase "pre" usa Ford Blue para no romper la paleta de la página (las fases 1 y 2
sí mantienen rojos porque son emergencias reales que requieren alerta visual). */
/* El acento superior de contingencia se combina con la sombra inferior del
banner (si no, el inset reemplazaba la sombra de abajo y no se veía). */
.jm-banner.contingencia-pre { box-shadow: inset 0 4px 0 0 #003478, 0 14px 24px -4px rgba(0,0,0,.40); }
.jm-banner.contingencia-fase1 { box-shadow: inset 0 4px 0 0 #c0392b, 0 14px 24px -4px rgba(0,0,0,.40); }
.jm-banner.contingencia-fase2 { box-shadow: inset 0 4px 0 0 #7a0000, 0 14px 24px -4px rgba(0,0,0,.40); }
.slide-btn {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,.92);
color: var(--ford-blue);
font-size: 12px;
font-weight: 800;
border: none;
cursor: pointer;
align-self: flex-start;
box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.slide-btn:hover { transform: translateY(-1px); }
.slide-btn.hidden { display: none; }
/* Indicador de slide actual */
.banner-dots {
display: flex; gap: 5px; margin-top: 6px;
}
.banner-dots .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.4);
transition: width .25s ease, background .25s ease;
}
.banner-dots .dot.active {
width: 18px;
background: #fff;
border-radius: 3px;
}
.jm-banner-title {
font-size: 22px;
font-weight: 800;
margin: 6px 0 0;
line-height: 1.15;
letter-spacing: -.3px;
text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.jm-banner-date {
font-size: 11px;
margin: 4px 0 0;
opacity: .85;
font-weight: 600;
text-transform: capitalize;
}
.jm-banner-temp-block {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
}
.jm-banner-temp {
font-size: 42px;
font-weight: 800;
letter-spacing: -1.5px;
line-height: .95;
text-shadow: 0 2px 8px rgba(0,0,0,.22);
}
.jm-banner-temp-side {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.1;
}
.jm-banner-temp-icon {
font-size: 38px;
margin-bottom: 4px;
transition: color .35s ease, filter .35s ease;
}
/* Iconos del clima — color y animación específica por condición */
.jm-banner.w-clear .jm-banner-temp-icon {
color: #ffd166;
filter: drop-shadow(0 0 10px rgba(255,209,102,.65));
animation: sunPulse 3.4s ease-in-out infinite;
}
.jm-banner.w-clear-night .jm-banner-temp-icon {
color: #d8e2fb;
filter: drop-shadow(0 0 8px rgba(180,200,240,.55));
animation: moonGlow 5s ease-in-out infinite;
}
.jm-banner.w-cloudy .jm-banner-temp-icon {
color: #e3eaf2;
animation: cloudFloat 4s ease-in-out infinite;
}
.jm-banner.w-fog .jm-banner-temp-icon {
color: #d6dee6;
animation: fogFade 3s ease-in-out infinite alternate;
}
.jm-banner.w-rain .jm-banner-temp-icon {
color: #b6d4ff;
filter: drop-shadow(0 2px 6px rgba(0,40,90,.4));
animation: rainBob 1.4s ease-in-out infinite;
}
.jm-banner.w-storm .jm-banner-temp-icon {
color: #ffe066;
filter: drop-shadow(0 0 14px rgba(255,224,102,.85));
animation: stormBolt 0.9s ease-in-out infinite;
}
.jm-banner.w-snow .jm-banner-temp-icon {
color: #ffffff;
filter: drop-shadow(0 0 8px rgba(255,255,255,.65));
animation: snowSpin 6s linear infinite;
}
@keyframes sunPulse {
0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255,209,102,.55)); }
50% { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 18px rgba(255,209,102,.95)); }
}
@keyframes moonGlow {
0%, 100% { opacity: .85; transform: scale(1); }
50% { opacity: 1; transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(200,220,255,.85)); }
}
@keyframes cloudFloat {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(4px); }
}
@keyframes fogFade {
0% { opacity: .55; }
100% { opacity: 1; }
}
@keyframes rainBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(2px); }
}
@keyframes stormBolt {
0%, 30%, 60%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 10px rgba(255,224,102,.6)); }
35%, 65% { transform: scale(1.18) rotate(-4deg); filter: drop-shadow(0 0 22px rgba(255,224,102,1)); }
}
@keyframes snowSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.jm-banner-temp-desc {
font-size: 11px;
font-weight: 700;
text-transform: capitalize;
opacity: .95;
}
.jm-weather-loc {
display: inline-block;
font-size: 11px;
opacity: .85;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.jm-weather-tip {
font-size: 12px;
font-weight: 600;
margin: 8px 0 0;
opacity: .98;
background: rgba(0,0,0,.18);
border-radius: 10px;
padding: 6px 10px;
display: inline-block;
align-self: flex-start;
max-width: 100%;
}
/* ===== Any (mascota EVA-style) ===== */
.jm-banner-right {
position: relative; z-index: 1;
flex: 0 0 130px;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 2px 0 42px 8px; /* padding-top minimal: cabeza de Any casi pegada al borde superior del banner */
order: -1; /* Mover la mascota al lado IZQUIERDO del banner */
}
/* ============================================================================
4to CUADRANTE del banner — cinturón vertical de quick-actions (v458).
- La columna respeta el alto del banner (no lo empuja).
- DOBLE separación del borde derecho del banner.
- Primer icono más separado del borde superior.
- Iconos un poco más grandes en móvil.
============================================================================ */
.jm-banner-quick {
flex: 0 0 86px; /* +8px para acomodar la doble separación derecha */
align-self: stretch;
min-height: 0;
max-height: 100%;
overflow: hidden;
padding: 0;
margin: 0;
order: 2;
position: relative;
/* Fade mask top/bottom para que los iconos se desvanezcan en los bordes */
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 16px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 16px), transparent 100%);
}
.jm-banner-quick:empty { display: none; }
/* #quick-actions DENTRO del banner: absoluto + scroll vertical.
padding-right DUPLICADO de 16px → 32px (v459) — los iconos quedan al doble
de distancia del borde derecho del banner, y NO se solapan con
`.jm-banner-nav-next` que ahora vive a la izquierda del cinturón. */
.jm-banner-quick > .quick-actions,
.jm-banner-quick .quick-actions {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
overflow-y: auto;
overflow-x: hidden;
padding: 22px 32px 14px 8px; /* top:22 · right:32 (DOBLE) · bottom:14 · left:8 */
gap: 10px;
scroll-snap-type: y proximity;
-webkit-overflow-scrolling: touch;
}
.jm-banner-quick .action-card {
width: 56px;
flex: 0 0 auto;
scroll-snap-align: start;
align-self: center;
}
.jm-banner-quick .action-card i {
width: 52px; height: 52px;
font-size: 22px;
border-radius: 13px;
background: rgba(255,255,255,.94);
border-color: rgba(0,52,120,.10);
}
.jm-banner-quick .action-card:active i {
background: rgba(255,255,255,.75);
color: var(--ford-blue);
transform: scale(.92);
}
/* Mobile: iconos un poco más grandes (50x50 con font 20px). padding-right
DUPLICADO de 14px → 28px (v459) para alejarlos del borde derecho. */
@media (max-width: 600px) {
.jm-banner-quick { flex: 0 0 84px; } /* +12px para acomodar el padding-right doble */
.jm-banner-quick > .quick-actions,
.jm-banner-quick .quick-actions {
padding: 20px 28px 14px 8px; /* top:20 · right:28 (DOBLE) · bottom:14 · left:8 */
gap: 9px;
}
.jm-banner-quick .action-card { width: 52px; }
.jm-banner-quick .action-card i {
width: 50px; height: 50px;
font-size: 20px;
border-radius: 12px;
}
}
.jm-any {
position: relative;
width: 112px; height: 162px;
filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.jm-any-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Cabeza tilt origin estable */
.jm-any-head { transform-box: fill-box; transform-origin: 50% 100%; }
/* Hommie v2 (2026-10-31): los accesorios los decide el controlador JS en data-acc (fecha > clima > noche, máx. 2). */
.jm-acc { display: none; }
.jm-any[data-acc~="scarf"] .jm-acc-scarf, .jm-any[data-acc~="beanie"] .jm-acc-beanie,
.jm-any[data-acc~="sunglasses"] .jm-acc-sunglasses, .jm-any[data-acc~="soda"] .jm-acc-soda,
.jm-any[data-acc~="umbrella"] .jm-acc-umbrella, .jm-any[data-acc~="shop"] .jm-acc-shop,
.jm-any[data-acc~="witch"] .jm-acc-witch, .jm-any[data-acc~="calabaza"] .jm-acc-calabaza,
.jm-any[data-acc~="catrin"] .jm-acc-catrin, .jm-any[data-acc~="santa"] .jm-acc-santa,
.jm-any[data-acc~="esfera"] .jm-acc-esfera, .jm-any[data-acc~="anionuevo"] .jm-acc-anionuevo,
.jm-any[data-acc~="patrias"] .jm-acc-patrias, .jm-any[data-acc~="flag"] .jm-acc-flag,
.jm-any[data-acc~="nightcap"] .jm-acc-nightcap { display: block; }
/* Catrín de Día de Muertos: la cara va pintada, sin chapitas. */
.jm-any[data-acc~="catrin"] .hm-cheek, .jm-any[data-acc~="catrin"] .hm-brillo { display: none; }
/* El banner recorta lo que se sale y el sombrero es alto: con el traje se ve un poco más chico, apoyado abajo. */
/* Sus piezas se giran con el atributo transform: en coordenadas del dibujo, no de su propia caja. */
.jm-any-svg .jm-acc-catrin, .jm-any-svg .jm-acc-catrin * { transform-box: view-box; }
/* Con paraguas, la mano derecha vive dentro del accesorio. */
.jm-any[data-acc~="umbrella"] .hm-hand-right { display: none; }
/* Globo de saludo — sin caja, sólo texto blanco sobre el banner.
Fondo transparente para integrarse con el gradiente del banner; sombra de
texto sutil para mantener legibilidad sobre cualquier variante de clima. */
.jm-bubble {
position: absolute;
top: 8px;
left: 110px; /* deja espacio para Any a la izquierda */
background: transparent;
color: #fff;
padding: 9px 4px;
border-radius: 0;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
max-width: calc(100% - 130px);
min-width: 110px;
width: max-content;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
box-shadow: none;
text-shadow: 0 1px 3px rgba(0,0,0,.45);
animation: bubblePop .35s cubic-bezier(.2,1.6,.4,1) both;
z-index: 3;
}
.jm-bubble-text {
display: block;
line-height: 1.3;
/* Permite hasta 3 líneas para frases largas */
max-height: 3.9em;
overflow: hidden;
}
.jm-bubble.hidden { display: none; }
.jm-bubble-tail { display: none; }
@keyframes bubblePop {
0% { transform: scale(.6) translateY(8px); opacity: 0; }
60% { transform: scale(1.06) translateY(-2px); opacity: 1; }
100% { transform: scale(1) translateY(0); opacity: 1; }
}
.jm-bubble.fading {
animation: bubbleOut .35s ease forwards;
}
@keyframes bubbleOut {
to { opacity: 0; transform: scale(.85) translateY(4px); }
}
@media (max-width: 380px) {
.jm-banner-right { flex: 0 0 110px; }
.jm-any { width: 96px; height: 140px; }
.jm-bubble {
top: -2px;
left: 78px;
right: auto;
font-size: 11px;
padding: 7px 10px;
max-width: 175px;
min-width: 80px;
}
.jm-banner-title { font-size: 19px; }
}
/* ===== ANUNCIOS BANNER (tira horizontal, ya no se usa en home) ===== */
.anuncios-strip {
display: flex;
gap: 10px;
padding: 10px 16px 14px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
}
.anuncios-strip::-webkit-scrollbar { height: 4px; }
.anuncios-strip::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 2px; }
.anuncio-thumb {
flex: 0 0 auto;
width: 96px;
height: 150px; /* más alto: aspect ~3:5 tipo stories */
border-radius: 12px;
background: var(--gray-100);
cursor: zoom-in;
border: 2px solid transparent;
transition: transform .15s, border-color .15s, box-shadow .15s;
scroll-snap-align: start;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.anuncio-thumb:hover {
transform: translateY(-2px);
border-color: var(--ford-blue);
box-shadow: var(--shadow-md);
}
.anuncio-thumb-title {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,.7));
color: var(--white);
font-size: 9px;
padding: 14px 6px 4px;
text-align: center;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.anuncio-row {
display: flex; align-items: center; gap: 10px;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 8px;
margin: 6px 16px;
box-shadow: var(--shadow-sm);
}
.anuncio-row-thumb {
width: 64px; height: 96px; /* vertical, muestra la imagen completa */
border-radius: 8px;
background: var(--gray-100);
flex-shrink: 0;
cursor: zoom-in;
position: relative;
overflow: hidden;
}
.anuncio-row-thumb img,
.anuncio-thumb img {
width: 100%; height: 100%;
object-fit: contain; /* imagen COMPLETA sin recortar */
display: block;
background: var(--gray-100);
}
.anuncio-img-error {
position: absolute; inset: 0;
align-items: center; justify-content: center;
background: var(--gray-200);
color: var(--gray-500);
font-size: 22px;
}
.anuncio-row-info { flex: 1; min-width: 0; }
.anuncio-row-title { font-weight: 600; font-size: 13px; }
.anuncio-row-meta { font-size: 11px; color: var(--gray-600); margin-top: 2px; }
.anuncio-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
/* ===== CHAT PERSONAL =====
El bottom-nav PERSISTE incluso con la conversación abierta (v450). La
`msg-input-bar` queda justo encima del nav. La ventana ocupa el alto
disponible descontando header + nav. */
#mensajes-window {
display: flex;
flex-direction: column;
height: calc(100vh - var(--header-h) - var(--nav-h));
min-height: 0;
}
#mensajes-window.hidden { display: none; }
.conv-search-bar { padding: 10px 12px; margin-top: 10px; background: #ffffff; }
.conv-search-bar .search-input { width: 100%; box-sizing: border-box; border-radius: 100px; }
/* Buscador del directorio: justo encima de la lista, ancho completo (pill). */
.dir-search-bar { padding: 8px 12px 4px; background: #ffffff; }
.dir-search-bar .search-input { width: 100%; box-sizing: border-box; border-radius: 100px; }
.msg-window-header {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: var(--white); color: var(--ford-blue);
font-weight: 600;
flex-shrink: 0;
border-top: 3px solid var(--ford-blue);
border-bottom: 1px solid var(--gray-200);
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.msg-window-header .btn-icon { color: var(--ford-blue); }
/* Botón llamada estilo WhatsApp — invertido */
.msg-call-btn {
margin-left: auto;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--blue-light, #e6efff);
color: var(--ford-blue);
border: none;
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
transition: background .15s ease, transform .1s ease;
}
.msg-call-btn:hover { background: #d4e4ff; }
.msg-call-btn:active { transform: scale(.92); }
/* Nombre + status en COLUMNA (compacto, cabe bien en móvil) */
.msg-window-header-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
align-items: flex-start; gap: 1px;
line-height: 1.2;
}
.msg-window-header-name {
font-weight: 700; font-size: 15px;
color: var(--ford-blue);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.msg-window-header-status {
font-size: 11px;
color: var(--gray-600);
display: flex; align-items: center; gap: 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.msg-list {
flex: 1;
display: flex; flex-direction: column; gap: 0;
padding: 10px 10px 12px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--gray-50);
}
/* Indicador de presencia online/offline */
.presence-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: var(--gray-400);
border: 2px solid var(--white);
display: inline-block;
flex-shrink: 0;
}
.presence-dot.online { background: #22c55e; }
.presence-dot.offline { background: #9ca3af; }
.presence-dot.sm { width: 8px; height: 8px; border-width: 1px; }
.conv-avatar { position: relative; }
.conv-avatar .presence-dot {
position: absolute;
bottom: -1px; right: -1px;
}
.msg-bubble {
max-width: 100%;
width: fit-content;
padding: 6px 10px;
border-radius: 14px;
font-size: 14px;
line-height: 1.35;
word-wrap: break-word;
word-break: break-word;
overflow-wrap: anywhere;
/* Sin pre-wrap: los saltos de línea reales del texto ya se convierten a
en _renderMsgContent. Así evitamos que el whitespace del template HTML
genere espacios extra entre lineas. */
}
.msg-bubble.mine {
align-self: flex-end;
background: var(--ford-blue);
color: var(--white);
border-bottom-right-radius: 4px;
}
.msg-bubble.other {
align-self: flex-start;
background: var(--white);
color: var(--gray-900);
border: 1px solid var(--gray-200);
border-bottom-left-radius: 4px;
}
.msg-author { font-size: 11px; color: var(--gray-600); margin-bottom: 2px; padding: 0 4px; }
/* Avatar al lado de las burbujas (estilo WhatsApp) */
.msg-row {
display: flex;
align-items: flex-end;
gap: 4px;
margin-bottom: 6px; /* separación normal entre conversadores */
}
/* Mensajes consecutivos del mismo emisor — pegaditos como WhatsApp */
.msg-row.cont-prev { margin-top: 0; }
.msg-row.cont-next { margin-bottom: 1px; }
.msg-row.cont-prev.cont-next { margin: 1px 0; }
/* Burbujas de ráfaga: ángulo redondeado solo en la primera y última */
.msg-row.cont-prev .msg-bubble.mine { border-top-right-radius: 6px; }
.msg-row.cont-next .msg-bubble.mine { border-bottom-right-radius: 6px; }
.msg-row.cont-prev .msg-bubble.other { border-top-left-radius: 6px; }
.msg-row.cont-next .msg-bubble.other { border-bottom-left-radius: 6px; }
/* Placeholder del avatar cuando es continuación (mantiene alineación de la burbuja) */
.msg-side-avatar.avatar-hidden {
background: transparent;
box-shadow: none;
}
.msg-row.mine { justify-content: flex-end; }
.msg-row.other { justify-content: flex-start; }
.msg-side-avatar {
width: 30px; height: 30px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--gray-100);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
color: var(--ford-blue);
box-shadow: 0 0 0 1px rgba(0,0,0,.05);
}
.msg-side-avatar-fallback {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: var(--gray-100);
color: var(--ford-blue);
font-weight: 700;
}
.msg-col {
min-width: 0;
max-width: 85%; /* ancho disponible para la burbuja, similar a WhatsApp */
display: flex;
flex-direction: column;
align-items: flex-start;
}
.msg-row.mine .msg-col { align-items: flex-end; max-width: 90%; }
/* Sin avatar (mensajes propios), pueden usar más ancho */
.msg-row.mine { padding-left: 12%; }
.msg-row.other { padding-right: 4%; }
.msg-time {
font-size: 10px; opacity: .65;
margin-top: 1px;
text-align: right;
line-height: 1;
display: flex; justify-content: flex-end; align-items: center; gap: 3px;
}
.msg-input-bar {
display: flex; gap: 6px;
align-items: center;
padding: 10px;
border-top: 1px solid var(--gray-200);
background: var(--white);
flex-shrink: 0;
margin-top: auto;
}
/* Iconos del input bar de chat — azul Ford visible sobre fondo blanco */
.msg-input-bar .btn-icon {
color: var(--ford-blue);
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
background: transparent;
flex-shrink: 0;
}
.msg-input-bar .btn-icon:hover { background: rgba(0,52,120,.08); }
.msg-input-bar .btn-icon.recording { color: #e63946; animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.msg-input-bar input {
flex: 1; padding: 10px 12px;
border: 1px solid var(--gray-300); border-radius: 22px;
font-size: 14px;
}
.conv-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
cursor: pointer;
border-bottom: 1px solid var(--gray-100);
transition: background .12s;
}
.conv-item:hover { background: var(--gray-50); }
.conv-item .conv-avatar {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--ford-blue);
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 16px;
flex-shrink: 0;
}
.conv-item .conv-avatar.grupo { background: linear-gradient(135deg, #00897b, #26a69a); }
.conv-body { flex: 1; min-width: 0; }
.conv-name { font-weight: 600; font-size: 14px; color: var(--gray-900); }
.conv-last { font-size: 12px; color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.conv-meta { text-align: right; font-size: 11px; color: var(--gray-500); }
.conv-badge {
background: var(--red); color: var(--white);
padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 700;
display: inline-block; margin-top: 2px;
}
.user-search-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid var(--gray-100);
}
.user-search-row:hover { background: var(--gray-50); }
.user-search-row .user-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--gray-300); color: var(--white);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
/* ===== LIGHTBOX ===== */
.lightbox {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,.92);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
padding: 20px;
cursor: zoom-out;
}
.lightbox.hidden { display: none; }
.lightbox img {
max-width: 100%; max-height: 85vh;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.lightbox-caption {
color: var(--white);
font-size: 13px;
margin-top: 12px;
text-align: center;
max-width: 80%;
word-break: break-word;
}
.lightbox-close {
position: absolute;
top: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(255,255,255,.15);
color: var(--white);
border: none;
font-size: 18px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
/* ===== CAMPANITA / NOTIFICACIONES ===== */
.notif-wrap { position: relative; }
.notif-badge {
position: absolute;
top: 4px; right: 4px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--red, #e53935);
color: #fff;
font-size: 10px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
line-height: 1;
border: 1.5px solid var(--gray-400); /* combina con el fondo gris del nav */
}
.notif-badge.hidden { display: none; }
/* Drawer lateral estilo Facebook */
.notif-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 9998;
opacity: 0;
transition: opacity .22s ease;
}
.notif-overlay:not(.hidden) { opacity: 1; }
.notif-overlay.hidden { display: none; }
.notif-drawer {
position: fixed;
top: 0; bottom: 0; right: 0;
width: min(380px, 92vw);
background: var(--white);
z-index: 9999;
display: flex; flex-direction: column;
box-shadow: -6px 0 28px rgba(0,0,0,.22);
transform: translateX(100%);
transition: transform .26s cubic-bezier(.2,.8,.2,1);
overscroll-behavior: contain;
}
.notif-drawer.hidden { display: none; }
.notif-drawer.open { transform: translateX(0); }
.notif-drawer-header {
display: flex; align-items: center; justify-content: space-between;
gap: 10px;
height: var(--header-h);
padding: 0 12px;
background: var(--ford-blue);
color: var(--white);
flex-shrink: 0;
}
.notif-drawer-title {
display: flex; align-items: center; gap: 10px;
font-weight: 700; font-size: 18px;
}
.notif-drawer-title i { font-size: 16px; opacity: .9; }
.notif-drawer-header .btn-icon { color: var(--white); }
.notif-drawer-tabs {
display: flex; gap: 6px;
padding: 10px 12px;
background: var(--white);
border-bottom: 1px solid var(--gray-100);
flex-shrink: 0;
}
.notif-tab {
padding: 7px 14px;
border-radius: 100px;
background: var(--gray-100);
border: none;
color: var(--gray-700);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s;
}
.notif-tab.active {
background: var(--blue-light, #e3f2fd);
color: var(--ford-blue);
}
.notif-tab:hover:not(.active) { background: var(--gray-200); }
.notif-drawer-body {
overflow-y: auto;
flex: 1;
-webkit-overflow-scrolling: touch;
padding: 4px 0 24px;
}
.notif-item {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid var(--gray-100);
cursor: pointer;
transition: background .12s;
position: relative;
}
.notif-item:hover { background: var(--gray-50); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: rgba(33, 80, 160, .04); }
.notif-item.unread::before {
content: '';
position: absolute;
left: 6px; top: 50%;
transform: translateY(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: var(--ford-blue);
}
.notif-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--blue-light, #e3f2fd);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
}
.notif-icon.r-mensaje { background: linear-gradient(135deg,#bbdefb,#1976d2); color: #fff; }
.notif-icon.r-reglamento { background: linear-gradient(135deg,#ffe0b2,#ef6c00); color: #fff; }
.notif-icon.r-anuncio { background: linear-gradient(135deg,#e1bee7,#8e24aa); color: #fff; }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
font-weight: 600;
font-size: 14px;
color: var(--gray-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-desc {
font-size: 13px;
color: var(--gray-700);
margin-top: 3px;
line-height: 1.4;
overflow: hidden;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-time {
font-size: 11px;
color: var(--gray-500);
margin-top: 4px;
display: flex; align-items: center; gap: 4px;
}
.notif-time i { font-size: 9px; }
.notif-badge-pill {
margin-left: 8px;
background: var(--red, #e53935);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 10px;
align-self: flex-start;
}
.notif-empty {
padding: 60px 24px;
text-align: center;
color: var(--gray-500);
font-size: 14px;
}
.notif-empty i {
font-size: 48px;
margin-bottom: 12px;
display: block;
opacity: .4;
}
/* ===== ANUNCIOS — Mosaico tipo Pinterest (masonry con CSS columns) =====
Cada imagen conserva su aspect ratio natural — NO se recorta. */
.anuncios-pin-grid {
column-count: 2;
column-gap: 8px;
padding: 12px;
}
@media (min-width: 540px) { .anuncios-pin-grid { column-count: 3; } }
@media (min-width: 820px) { .anuncios-pin-grid { column-count: 4; } }
@media (min-width: 1100px) { .anuncios-pin-grid { column-count: 5; } }
/* HOME en PC: la cuadrícula de anuncios va al MISMO ancho que el banner
(full width) y con tiles al DOBLE de grandes → menos columnas. El selector
#anuncios-album-home.anuncios-pin-grid (id+clase) le gana al .anuncios-pin-grid. */
#anuncios-album-home.anuncios-pin-grid { column-count: 2; column-gap: 14px; padding: 0; }
@media (min-width: 900px) { #anuncios-album-home.anuncios-pin-grid { column-count: 3; } }
@media (min-width: 1100px) { #anuncios-album-home.anuncios-pin-grid { column-count: 4; } }
/* En el grid del dashboard de PC, el bloque ocupa TODO el ancho (como el banner),
no media columna. MVV ya está vacío → se oculta para liberar la fila. */
@media (min-width: 900px) {
#anuncios-home-block { grid-column: 1 / -1; grid-row: 3; }
#mvv-home { display: none; }
}
.anuncio-pin {
position: relative;
display: block;
width: 100%;
margin: 0 0 8px 0;
border-radius: 14px;
overflow: hidden;
background: var(--gray-100);
box-shadow: var(--shadow-sm);
cursor: pointer;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
transition: transform .15s ease, box-shadow .15s ease;
}
.anuncio-pin:active { transform: scale(.98); }
.anuncio-pin:hover { box-shadow: var(--shadow-md); }
.anuncio-pin img {
width: 100%;
height: auto; /* clave: respeta proporciones, no recorta */
display: block;
}
.anuncio-pin .anuncio-img-error {
height: 140px;
display: flex; align-items: center; justify-content: center;
color: var(--gray-400); font-size: 32px;
background: var(--gray-100);
}
.anuncio-pin-cap {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 18px 10px 8px;
font-size: 12px; font-weight: 600;
color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hero: el más reciente abarca TODAS las columnas, mostrando la imagen completa */
.anuncio-pin.pin-hero {
column-span: all;
-webkit-column-span: all;
margin-bottom: 12px;
}
.anuncio-pin.pin-hero .anuncio-pin-cap {
font-size: 16px;
padding: 28px 16px 14px;
}
/* Visor full-screen — AJUSTA la imagen sin recortar (object-fit: contain) */
.anuncio-fit {
position: fixed; inset: 0; z-index: 100000;
background: rgba(0,0,0,.96);
display: flex; align-items: center; justify-content: center;
}
.anuncio-fit.hidden { display: none; }
.anuncio-fit img {
max-width: 100vw;
max-height: 100vh;
width: auto; height: auto;
object-fit: contain; /* clave: no recortar */
display: block;
}
.anuncio-fit-close {
position: absolute; top: 12px; right: 12px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.55);
color: #fff; font-size: 18px;
border: 1px solid rgba(255,255,255,.2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.anuncio-fit-counter {
position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
color: #fff; font-size: 13px; font-weight: 600;
background: rgba(0,0,0,.45);
padding: 5px 12px; border-radius: 12px;
z-index: 2;
}
.anuncio-fit-nav {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(0,0,0,.5);
color: #fff; font-size: 18px;
border: 1px solid rgba(255,255,255,.18);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.anuncio-fit-prev { left: 12px; }
.anuncio-fit-next { right: 12px; }
.anuncio-fit-caption {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 24px 16px 18px;
background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
color: #fff; font-size: 15px; font-weight: 500;
text-align: center;
pointer-events: none;
}
/* ===== STORIES VIEWER (vertical, swipe, cíclico) ===== */
.stories {
position: fixed; inset: 0; z-index: 100000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overscroll-behavior: contain;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.stories.hidden { display: none; }
.stories-stage {
position: relative;
width: 100%;
height: 100%;
max-width: 480px; /* rectangular vertical, tipo stories */
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: #000;
overflow: hidden;
}
.stories-stage img {
width: 100%;
height: 100%;
object-fit: cover; /* rellena el rectángulo vertical */
transition: transform .25s ease, opacity .25s ease;
pointer-events: none;
}
.stories-stage.swipe-left img { transform: translateX(-30%); opacity: 0; }
.stories-stage.swipe-right img { transform: translateX(30%); opacity: 0; }
.stories-stage.dragging img { transition: none; }
.stories-bars {
position: absolute;
top: 8px; left: 12px; right: 12px;
display: flex; gap: 4px;
z-index: 3;
}
.stories-bar {
flex: 1;
height: 3px;
background: rgba(255,255,255,.30);
border-radius: 2px;
overflow: hidden;
}
.stories-bar.active { background: rgba(255,255,255,.95); }
.stories-bar.viewed { background: rgba(255,255,255,.65); }
.stories-close {
position: absolute;
top: 22px; right: 14px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(0,0,0,.45);
color: #fff;
border: none;
font-size: 18px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 4;
-webkit-tap-highlight-color: transparent;
}
.stories-close:hover { background: rgba(0,0,0,.7); }
.stories-caption {
position: absolute;
bottom: 24px; left: 16px; right: 16px;
color: #fff;
font-size: 14px;
font-weight: 500;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,.7);
background: linear-gradient(transparent, rgba(0,0,0,.45));
padding: 30px 12px 8px;
border-radius: 8px;
z-index: 3;
pointer-events: none;
}
.stories-caption:empty { display: none; }
/* Zonas táctiles invisibles para tap-to-navigate (cubren mitades) */
.stories-zone {
position: absolute;
top: 40px; bottom: 40px;
width: 35%;
z-index: 2;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.stories-zone-left { left: 0; }
.stories-zone-right { right: 0; }
.cred-thumb {
width: 140px; height: 100px;
background: var(--gray-100) center/cover no-repeat;
border-radius: 8px;
border: 2px solid var(--gray-300);
cursor: zoom-in;
position: relative;
display: flex; align-items: center; justify-content: center;
color: var(--gray-500);
transition: border-color .15s, transform .1s;
}
.cred-thumb:hover { border-color: var(--ford-blue); transform: scale(1.02); }
.cred-thumb-label {
position: absolute; bottom: -22px; left: 0; right: 0;
text-align: center; font-size: 11px; color: var(--gray-700);
}
/* ===== INTAKE ===== */
.intake-bg {
min-height: 100vh;
background: linear-gradient(135deg, #003478 0%, #0056b3 100%);
display: flex;
align-items: flex-start;
justify-content: center;
padding: 24px 12px;
overflow-y: auto;
}
.intake-card {
background: var(--white);
border-radius: 16px;
padding: 24px 20px;
max-width: 560px;
width: 100%;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.intake-header { text-align: center; margin-bottom: 16px; }
.intake-logo-img {
width: 100px;
height: auto;
display: block;
margin: 0 auto 8px;
}
.intake-header .logo-mark {
width: 56px; height: 56px; line-height: 56px;
background: var(--ford-blue); color: var(--white);
border-radius: 14px; font-weight: 800; font-size: 22px;
margin: 0 auto 10px;
}
.intake-progress {
display: flex;
gap: 8px;
justify-content: space-between;
margin: 18px 0;
}
.step-dot {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
padding: 8px 10px;
border-radius: 8px;
background: var(--gray-100);
color: var(--gray-600);
font-size: 12px;
font-weight: 600;
}
.step-dot span {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--gray-300); color: var(--white);
}
.step-dot.active { background: rgba(0, 52, 120, .12); color: var(--ford-blue); }
.step-dot.active span { background: var(--ford-blue); }
.step-dot.done { background: rgba(34, 139, 34, .12); color: var(--green); }
.step-dot.done span { background: var(--green); }
.intake-step { display: block; }
.intake-step.hidden { display: none !important; }
.signature-wrap {
border: 2px dashed var(--gray-400);
border-radius: 10px;
background: var(--gray-50);
margin: 12px 0 8px;
touch-action: none;
}
#signature-canvas,
#reglamento-signature-canvas {
display: block;
width: 100%;
height: 220px;
background: var(--white);
border-radius: 10px;
touch-action: none; /* el touch no debe scrollear mientras firmas */
cursor: crosshair;
}
/* ===== PAYMENT CARD ===== */
.payment-card {
margin: 12px 16px;
padding: 14px 16px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #003478 0%, #1e5dc1 100%);
color: var(--white);
box-shadow: var(--shadow-md);
}
.payment-card.warning { background: linear-gradient(135deg, #ff8c00 0%, #ffa940 100%); }
.payment-card.late { background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%); }
.payment-card.pagado { background: linear-gradient(135deg, #1b8a3a 0%, #2fb35a 100%); }
.payment-card-header {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .5px;
opacity: .9;
margin-bottom: 6px;
}
.payment-date { font-size: 22px; font-weight: 800; line-height: 1.1; }
.payment-countdown { font-size: 13px; opacity: .9; margin: 4px 0 8px; }
.payment-deadline {
font-size: 12px;
background: rgba(255,255,255,.15);
padding: 6px 10px;
border-radius: 8px;
display: inline-block;
}
.payment-deadline i { margin-right: 4px; }
/* ===== INFO SUMMARY ===== */
.info-summary {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 8px 0;
margin: 0 16px 16px;
box-shadow: var(--shadow-sm);
}
.info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--gray-100);
}
.info-row:last-child { border-bottom: none; }
.info-row-label { font-size: 12px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0; }
.info-row-value { font-size: 14px; color: var(--gray-900); font-weight: 600; text-align: right; word-break: break-word; }
.info-row-value.muted { color: var(--gray-500); font-weight: 400; font-style: italic; }
/* ===== CHECKLIST ===== */
.checklist {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 260px;
overflow-y: auto;
border: 1px solid var(--gray-200);
border-radius: var(--radius);
padding: 8px;
background: var(--gray-50);
}
.checklist-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
user-select: none;
background: var(--white);
}
.checklist-item:hover { background: var(--gray-100); }
.checklist-item input[type=checkbox] { width: 18px; height: 18px; }
.checklist-empty { color: var(--gray-600); font-size: 13px; padding: 12px; text-align: center; }
.reglamento-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.reglamento-lang-btn { min-width: 36px; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.reglamento-lang-btn.active { background: var(--ford-blue, #003478) !important; color: #fff !important; border-color: var(--ford-blue, #003478) !important; }
/* ===== WELCOME ===== */
.welcome-section { padding: 20px 16px 8px; }
.welcome-text { font-size: 18px; font-weight: 700; color: var(--gray-900); }
.welcome-text strong { color: var(--ford-blue); }
/* User header (avatar grande + nombre completo) */
.user-header {
display: flex; align-items: center; gap: 14px;
padding: 18px 16px 10px;
}
.user-avatar-wrap {
position: relative;
width: 76px; height: 76px;
cursor: pointer;
flex-shrink: 0;
}
.user-avatar-big {
width: 76px; height: 76px;
border-radius: 50%;
background: linear-gradient(135deg, #d6e4ff, var(--ford-blue));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 30px;
font-weight: 800;
border: 3px solid var(--white);
box-shadow: 0 4px 14px rgba(0,52,120,.25);
overflow: hidden;
}
.user-avatar-big img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.user-avatar-edit {
position: absolute;
bottom: 0; right: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--ford-blue);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 11px;
border: 2px solid var(--white);
box-shadow: var(--shadow-sm);
}
.user-avatar-wrap:hover .user-avatar-edit { background: #2150a0; }
.user-header-info { flex: 1; min-width: 0; }
.user-fullname {
font-size: 19px;
font-weight: 800;
color: var(--gray-900);
margin: 0 0 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-header-info .welcome-date {
font-size: 12px;
color: var(--gray-600);
margin: 0;
text-transform: capitalize;
}
.welcome-date { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
/* ===== STATS GRID ===== */
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px 16px;
}
.stat-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 16px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--ford-blue);
}
.stat-card.green { border-left-color: var(--green); }
.stat-card.yellow { border-left-color: var(--yellow); }
.stat-card.red { border-left-color: var(--red); }
.stat-card.silver { border-left-color: var(--silver); }
.stat-value { font-size: 28px; font-weight: 800; color: var(--gray-900); line-height: 1; }
.stat-label { font-size: 11px; color: var(--gray-600); margin-top: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.stat-icon { font-size: 20px; margin-bottom: 8px; opacity: .6; }
/* ===== QUICK ACTIONS ===== */
.section-header {
padding: 16px 16px 8px;
display: flex; align-items: center; justify-content: space-between;
}
.section-header h3 { font-size: 14px; font-weight: 700; color: var(--gray-600); text-transform: uppercase; letter-spacing: .5px; margin: 0; }
.btn-link {
background: none; border: none; cursor: pointer;
color: var(--ford-blue); font-size: 12px; font-weight: 700;
display: inline-flex; align-items: center; gap: 4px;
}
.btn-link:hover { text-decoration: underline; }
.btn-link i { font-size: 10px; }
/* ===== Anuncios Home — álbum (preview grande + lista) ===== */
.anuncios-album-home {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
/* MISMO ancho que el banner (inset, sin full-bleed). Antes era 0 -16px y se
veía más ancho que el banner en móvil. */
margin: 4px 0 14px;
align-items: stretch;
}
/* Mobile: stack preview + tarjeta MVV en columna única para que el texto
completo de Misión/Visión/Valores quepa sin verse cortado. */
@media (max-width: 600px) {
.anuncios-album-home {
grid-template-columns: 1fr;
gap: 0; /* sin separación: ambos bloques tocan los bordes */
}
.mvv-text {
-webkit-line-clamp: unset;
display: block;
overflow: visible;
}
/* Mobile: mismo layout de 3 columnas, sólo ajustamos tamaños para que las
3 columnas quepan cómodamente en ~360px. El #mvv-home vive con el padding
normal del view, no es edge-to-edge. */
.mvv-card {
padding: 4px 0 10px;
gap: 4px;
}
.mvv-row {
padding: 6px 4px;
gap: 4px;
}
.mvv-icon { font-size: 20px; }
.mvv-title {
font-size: 12px;
letter-spacing: .5px;
margin-bottom: 4px;
}
.mvv-text {
font-size: 11px;
line-height: 1.45;
}
}
/* Desktop: el .view ya está centrado a 1280px con padding propio; aquí no
necesitamos romper márgenes laterales. */
@media (min-width: 900px) {
.anuncios-album-home {
margin: 0 0 12px;
}
}
.anuncios-album-preview {
position: relative;
border-radius: 16px; /* esquinas redondeadas también en mobile */
overflow: hidden;
background: transparent; /* deja pasar el fondo de la página */
cursor: pointer;
display: flex; align-items: center; justify-content: center;
/* v472: ASPECT-RATIO FIJO 4:5 para homologar TODOS los anuncios al mismo
tamaño visual. La imagen se ESTIRA/CONTRAE (object-fit: fill) para
llenar el box COMPLETO sin recortar — el usuario explícitamente NO
quiere que se recorten los anuncios. */
aspect-ratio: 4 / 5;
width: 100%;
}
.anuncios-album-preview img {
width: 100%; height: 100%;
object-fit: fill; /* v472: ESTIRAR/CONTRAER sin recortar */
object-position: center;
display: block;
transition: opacity .35s ease, transform .35s ease;
background: transparent;
cursor: pointer;
}
@media (min-width: 900px) {
/* Desktop: el album ya está dentro del card centrado — volvemos a esquinas
redondeadas y sombra. */
.anuncios-album-preview {
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
}
.anuncios-album-preview { cursor: pointer; position: relative; }
/* Círculo-lupa removido: el usuario lo pidió limpio, sin "sombreado". */
/* Asegurar que el clic siempre llegue al contenedor padre */
.anuncios-album-preview img { pointer-events: none; }
.anuncios-album-preview img.fading { opacity: 0; transform: scale(1.03); }
.anuncios-album-cap {
position: absolute;
left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
color: #fff;
padding: 18px 10px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.anuncios-album-dots {
position: absolute;
bottom: 8px; top: auto; left: 0; right: 0; /* abajo y centrados, como el banner */
display: flex; justify-content: center; gap: 5px;
z-index: 1;
}
/* Botones de navegación del album de anuncios — transparentes, en las orillas,
permiten adelantar/retroceder sin esperar al timer de 8s. Pegados al borde,
con gradiente sutil que aparece al hover para confirmar el target. */
.anuncios-album-nav {
position: absolute;
top: 0; bottom: 0;
width: 44px;
z-index: 3;
border: none;
color: rgba(255,255,255,.85);
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
transition: background .18s ease, color .18s ease, transform .12s ease;
}
/* v467: gradiente PERMANENTE (más opaco que antes) en ambas flechas, no solo
al hover. La izquierda tiene gradiente desde la izquierda; la derecha
desde la derecha. */
.anuncios-album-nav-prev { left: 0; background: transparent; }
.anuncios-album-nav-next { right: 0; background: transparent; }
.anuncios-album-nav-prev:hover,
.anuncios-album-nav-next:hover { color: #fff; }
.anuncios-album-nav:active { transform: scale(.92); }
.anuncios-album-nav:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: -4px; }
.anuncios-album-dots .dot {
width: 5px; height: 5px;
border-radius: 50%;
background: rgba(255,255,255,.55);
transition: width .25s ease, background .25s ease;
}
.anuncios-album-dots .dot.active {
width: 16px;
background: #fff;
border-radius: 3px;
}
.anuncios-album-list {
display: flex;
flex-direction: column;
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* Misión · Visión · Valores — extensión visual del banner. SIN bordes ni
sombras (v462) — el usuario reportó que se veían como una línea blanca
bajo el banner. Gradiente sutil que continúa el banner sin "cortes". */
/* #mvv-home está VACÍO desde v466 (el MVV solo vive en el modal del menú).
No reservamos espacio para que el album de anuncios suba directo. */
#mvv-home { display: none; }
#mvv-home:not(:empty) { display: block; } /* por si algo lo rellena en otro contexto */
/* MVV v464: párrafo único clickeable con labels en azul Ford bold */
.mvv-paragraph {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--gray-700);
cursor: pointer;
text-align: left;
transition: background .15s ease, opacity .15s ease;
padding: 4px 6px;
border-radius: 6px;
}
.mvv-paragraph strong {
color: var(--ford-blue);
font-weight: 800;
letter-spacing: .2px;
}
.mvv-paragraph:hover { background: rgba(0,52,120,.04); }
.mvv-paragraph:active { opacity: .7; }
/* En desktop el banner ya tiene esquinas redondas y margen lateral —
el mvv mantiene esas mismas esquinas/margen para que se vea bien. */
@media (min-width: 900px) {
#mvv-home {
margin: 0 !important;
background: #ffffff !important;
border: 1px solid var(--gray-200) !important;
border-radius: 14px !important;
box-shadow: 0 2px 8px rgba(0,52,120,.04) !important;
padding: 16px 18px !important;
}
}
/* En desktop, MVV se vuelve un panel con tarjeta propia (al lado de Anuncios) */
@media (min-width: 900px) {
#mvv-home {
margin: 0;
padding: 16px 18px;
background: #ffffff !important;
border: 1px solid var(--gray-200);
border-radius: 14px;
box-shadow: 0 2px 8px rgba(0,52,120,.04);
}
/* Apilar las 3 rows verticalmente para que respiren mejor en el panel */
#mvv-home .mvv-card {
flex-direction: column !important;
gap: 12px;
}
#mvv-home .mvv-row {
flex-direction: row !important;
align-items: flex-start;
text-align: left;
border-right: none !important;
border-bottom: 1px solid rgba(0, 52, 120, .08);
padding: 6px 4px 10px;
gap: 12px;
}
#mvv-home .mvv-row:last-child { border-bottom: none; padding-bottom: 0; }
#mvv-home .mvv-icon { font-size: 22px; flex-shrink: 0; padding-top: 2px; }
}
/* Modal "Misión · Visión · Valores" expandido — abre desde el menú
hamburguesa para mostrar los 3 textos completos sin carousel. */
.mvv-full { display: flex; flex-direction: column; gap: 14px; }
.mvv-full-row {
display: flex;
gap: 14px;
padding: 14px 16px;
background: rgba(0,52,120,.04);
border-radius: 14px;
border-left: 4px solid var(--ford-blue);
}
.mvv-full-icon {
width: 44px; height: 44px;
background: var(--ford-blue);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.mvv-full-title {
font-size: 14px;
font-weight: 800;
color: var(--ford-blue);
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 6px;
}
.mvv-full-text {
font-size: 13px;
color: var(--gray-700);
line-height: 1.55;
margin: 0;
}
/* MVV en modo CAROUSEL (móvil v462) — icono AL LADO del título (no en
columna), aún más compacto. El JS rota cada 3s. */
.mvv-card {
display: block !important;
position: relative;
background: transparent !important;
border-radius: 0 !important;
padding: 0;
box-shadow: none !important;
min-height: 40px; /* aún más compacto (antes 44) */
}
.mvv-row {
display: block;
padding: 2px 0;
text-align: left;
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(4px);
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
.mvv-row.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Icono ahora INLINE con el título (v462) — al lado de la palabra
"Misión"/"Visión"/"Valores", no en columna separada. */
.mvv-icon {
font-size: 14px;
color: var(--ford-blue);
}
.mvv-body { width: 100%; }
.mvv-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 800;
color: var(--ford-blue);
letter-spacing: .4px;
line-height: 1.1;
text-transform: uppercase;
margin-bottom: 1px;
}
.mvv-title > span { line-height: 1.1; }
.mvv-text {
font-size: 12px;
color: var(--gray-700);
line-height: 1.3;
margin-top: 0;
/* Max 2 líneas con ellipsis para mantener compactez */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Desktop (≥900px): mvv vuelve a layout normal (3 rows apilados visibles)
— sin carousel, sin absoluto. Texto SIN line-clamp para mostrar todo. */
@media (min-width: 900px) {
#mvv-home .mvv-card { min-height: 0; }
#mvv-home .mvv-row {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
padding: 6px 4px 10px;
border-bottom: 1px solid rgba(0, 52, 120, .08);
}
#mvv-home .mvv-row:last-child { border-bottom: none; padding-bottom: 0; }
#mvv-home .mvv-text {
-webkit-line-clamp: unset;
overflow: visible;
display: block;
}
}
.anuncios-album-item {
display: flex;
align-items: center;
padding: 0 12px;
background: none;
border: none;
border-bottom: 1px solid var(--gray-100);
text-align: left;
cursor: pointer;
flex: 1; /* cada item se reparte el alto del album */
min-height: 0;
transition: background .15s ease;
}
.anuncios-album-item:hover { background: var(--gray-50); }
.anuncios-album-item.active {
background: var(--blue-light);
box-shadow: inset 3px 0 0 var(--ford-blue);
}
.anuncios-album-item-body { flex: 1; min-width: 0; }
.anuncios-album-item-title {
font-size: 12px;
font-weight: 700;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.anuncios-album-item-desc {
font-size: 10.5px;
color: var(--gray-600);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.anuncios-album-more {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px;
background: var(--blue-light);
color: var(--ford-blue);
border: none;
cursor: pointer;
font-weight: 700;
font-size: 11px;
}
/* Tabs de la vista de notificaciones — sticky bajo el topbar azul */
.notif-view-tabs {
display: flex;
gap: 8px;
padding: 10px 16px;
background: var(--white);
border-bottom: 1px solid var(--gray-100);
position: sticky;
top: 0;
z-index: 5;
}
/* === VIEW NOTIFICACIONES — view-body como collage de cards =====
En lugar de la lista vertical apretada, se acomodan tarjetas con grid
auto-fill para aprovechar el ancho en PC y respirar mejor en móvil. */
#view-notificaciones .view-body {
padding: 14px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 12px;
align-content: start;
}
#view-notificaciones .view-body .notif-item {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 14px;
padding: 14px;
box-shadow: 0 1px 3px rgba(0,52,120,.05);
border-bottom: 1px solid var(--gray-100);
transition: box-shadow .18s ease, transform .18s ease;
}
#view-notificaciones .view-body .notif-item:hover {
box-shadow: 0 6px 18px rgba(0,52,120,.10);
transform: translateY(-1px);
}
#view-notificaciones .view-body .notif-item.unread {
background: linear-gradient(180deg, #eef4ff 0%, var(--white) 70%);
border-color: rgba(23,105,255,.25);
}
#view-notificaciones .view-body .notif-empty { grid-column: 1 / -1; }
@media (max-width: 600px) {
#view-notificaciones .view-body {
grid-template-columns: 1fr;
padding: 12px;
gap: 10px;
}
}
.notif-view-tabs .notif-tab {
padding: 6px 14px;
border-radius: 999px;
background: var(--gray-100);
color: var(--gray-700);
font-size: 12px;
font-weight: 700;
border: none;
cursor: pointer;
}
.notif-view-tabs .notif-tab.active {
background: var(--ford-blue);
color: #fff;
}
/* Selector de país en login/registro con bandera (sin label) */
.form-group-pais { margin-bottom: 14px; }
.country-select {
width: 100%;
font-size: 16px;
font-weight: 600;
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 10px 12px;
color: var(--gray-900);
cursor: pointer;
outline: none;
transition: border-color .15s ease, background .15s ease;
}
.country-select:hover { background: var(--white); border-color: var(--ford-blue); }
.country-select:focus { background: var(--white); border-color: var(--ford-blue); box-shadow: 0 0 0 3px rgba(0,52,120,.12); }
.country-select option { font-size: 15px; padding: 6px; }
/* Picker custom de país con banderas reales (PNG via flagcdn) */
.country-picker { position: relative; }
.country-picker-btn {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 10px 14px;
border: 1px solid var(--gray-300);
border-radius: 10px; background: #fff;
font-size: 15px; font-weight: 600; color: var(--gray-900);
cursor: pointer; text-align: left;
transition: border-color .15s, box-shadow .15s;
}
.country-picker-btn:hover { border-color: var(--ford-blue); }
.country-picker-btn:focus { outline: none; border-color: var(--ford-blue); box-shadow: 0 0 0 3px rgba(23,105,255,.18); }
.country-picker-name { flex: 1; }
.country-picker-caret { color: var(--gray-500); font-size: 13px; }
.country-picker-list {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: #fff;
border: 1px solid var(--gray-300);
border-radius: 10px;
max-height: 280px; overflow-y: auto;
box-shadow: 0 10px 28px rgba(0,0,0,.16);
z-index: 50;
padding: 4px 0;
}
.country-picker-list.hidden { display: none; }
.country-picker-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 14px;
cursor: pointer;
font-size: 14px; color: var(--gray-800);
}
.country-picker-item:hover { background: var(--gray-50); }
.country-picker-item.active { background: #e8f0ff; color: var(--ford-blue); font-weight: 600; }
.country-flag {
width: 26px; height: 18px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0,0,0,.05);
flex-shrink: 0;
}
/* Country picker integrado al estilo translúcido del login-card */
.login-card .country-picker-btn {
background: rgba(255,255,255,.85);
border-color: rgba(255,255,255,.7);
border-radius: var(--radius-md, 8px);
font-weight: 500;
font-size: 14px;
}
.login-card .country-picker-btn:hover {
background: #fff;
border-color: var(--ford-blue);
}
.login-card .country-picker-btn:focus {
background: #fff;
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(0,52,120,.18);
}
/* Aviso de privacidad — toggle desplegable con look translúcido */
.reg-privacidad-toggle {
width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.55);
border-radius: 8px;
color: var(--gray-900);
font-size: 13.5px; font-weight: 600;
cursor: pointer;
text-align: left;
transition: background .15s, border-color .15s, box-shadow .15s;
}
.reg-privacidad-toggle:hover {
background: rgba(255,255,255,.72);
border-color: var(--ford-blue);
}
.reg-privacidad-toggle .toggle-arrow {
margin-left: auto;
font-size: 12px;
transition: transform .22s ease;
color: var(--gray-600);
}
.reg-privacidad-toggle.open .toggle-arrow { transform: rotate(180deg); }
.reg-privacidad-toggle .fa-shield-alt { color: var(--ford-blue); }
.reg-privacidad-box {
margin-top: 6px;
max-height: 220px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 14px;
background: rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.55);
border-radius: 8px;
font-size: 12.5px;
line-height: 1.55;
color: var(--gray-900);
white-space: pre-wrap;
word-break: break-word;
}
.reg-privacidad-box.hidden { display: none; }
.reg-acepto-wrap {
background: rgba(255,255,255,.45) !important;
border: 1px solid rgba(255,255,255,.55) !important;
padding: 10px 12px;
border-radius: 8px;
margin-top: 8px;
}
.reg-acepto-label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: var(--gray-900);
cursor: pointer;
margin: 0;
line-height: 1.45;
}
.reg-acepto-label input[type="checkbox"] {
margin-top: 2px;
width: 18px; height: 18px;
flex-shrink: 0;
accent-color: var(--ford-blue);
}
/* Botón "?" de ayuda al lado de los checks del registro */
.reg-help-btn {
background: none;
border: none;
padding: 0 0 0 4px;
cursor: pointer;
color: var(--ford-blue);
font-size: 13px;
vertical-align: middle;
line-height: 1;
}
.reg-help-btn:hover { color: #002b5c; }
.reg-help-box {
margin-top: 8px;
padding: 10px 12px;
background: rgba(255,255,255,.5);
border-left: 3px solid var(--ford-blue);
border-radius: 6px;
font-size: 12px;
line-height: 1.45;
color: var(--gray-800);
}
.reg-help-box.hidden { display: none; }
/* Input de fecha igual al resto de inputs translúcidos */
.login-card .form-group input[type="date"] {
font-family: inherit;
color: var(--gray-900);
-webkit-appearance: none;
appearance: none;
}
.login-card .form-group input[type="date"]::-webkit-calendar-picker-indicator {
filter: opacity(.65);
cursor: pointer;
}
/* Wizard de registro estilo iCloud — un paso a la vez */
.reg-wizard-progress {
display: flex; align-items: center; gap: 10px;
margin-bottom: 18px;
}
.reg-wizard-bar {
flex: 1;
height: 6px;
background: rgba(255,255,255,.45);
border-radius: 3px;
overflow: hidden;
}
.reg-wizard-fill {
height: 100%;
background: linear-gradient(90deg, var(--ford-blue) 0%, #4d8cf5 100%);
border-radius: 3px;
transition: width .35s ease;
}
.reg-wizard-step-label {
font-size: 11.5px; font-weight: 700;
color: var(--gray-900);
white-space: nowrap;
text-shadow: 0 1px 2px rgba(255,255,255,.5);
}
.reg-step {
animation: regStepIn .25s ease;
}
.reg-step.hidden { display: none; }
.reg-step-title {
font-size: 19px; font-weight: 800;
color: var(--ford-blue);
margin: 0 0 4px;
text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
.reg-step-sub {
font-size: 12.5px; color: var(--gray-700);
margin: 0 0 16px;
line-height: 1.45;
text-shadow: 0 1px 2px rgba(255,255,255,.4);
}
/* === Indicador de fuerza de contraseña (paso 5 del wizard de registro) === */
.pwd-strength-bar {
height: 6px;
background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
margin-top: 2px;
}
.pwd-strength-fill {
height: 100%;
width: 0%;
border-radius: 999px;
background: var(--gray-300);
transition: width .25s ease, background .25s ease;
}
.pwd-strength-fill.weak { width: 33%; background: #b91c1c; }
.pwd-strength-fill.medium { width: 66%; background: #f59e0b; }
.pwd-strength-fill.strong { width: 100%; background: #16a34a; }
.pwd-strength-label {
font-size: 11.5px;
font-weight: 700;
color: var(--gray-600);
margin-top: 6px;
letter-spacing: .3px;
text-transform: uppercase;
}
.pwd-strength-label.weak { color: #b91c1c; }
.pwd-strength-label.medium { color: #b45309; }
.pwd-strength-label.strong { color: #16a34a; }
.pwd-checklist {
list-style: none;
padding: 0;
margin: 8px 0 0;
font-size: 11.5px;
line-height: 1.55;
}
.pwd-checklist li {
display: flex;
align-items: center;
gap: 8px;
color: var(--gray-600);
padding: 1px 0;
}
.pwd-checklist li i {
font-size: 8px;
color: var(--gray-400);
flex-shrink: 0;
}
.pwd-checklist li.ok {
color: #16a34a;
}
.pwd-checklist li.ok i {
color: #16a34a;
}
.reg-step-label {
font-size: 12px; color: var(--gray-700);
margin-bottom: 4px; display: block;
font-weight: 600;
}
.reg-step-actions {
display: flex; gap: 8px;
margin-top: 14px;
}
.reg-step-actions .btn-back {
flex: 0 0 auto;
min-width: 88px;
}
@keyframes regStepIn {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: translateX(0); }
}
/* Bloque de verificación por código en el paso 6 */
.reg-verif-wrap {
background: rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.55);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 12px;
}
.reg-verif-wrap label {
display: flex; align-items: center; gap: 6px;
color: #002b5c;
font-weight: 700;
margin-bottom: 6px;
}
/* Autocomplete custom (búsqueda por coincidencia, no abre lista completa) */
.autocomplete-wrap { position: relative; }
.ac-suggestions {
position: absolute;
top: calc(100% + 2px);
left: 0; right: 0;
background: #fff;
border: 1px solid var(--gray-300);
border-radius: 8px;
max-height: 200px;
overflow-y: auto;
z-index: 100;
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.ac-suggestions.hidden { display: none; }
.ac-item {
padding: 9px 12px;
font-size: 14px;
color: var(--gray-900);
cursor: pointer;
}
.ac-item:hover, .ac-item.active {
background: #e8f0ff;
color: var(--ford-blue);
}
.ac-item + .ac-item { border-top: 1px solid var(--gray-100); }
/* Encabezado de categoría dentro del autocomplete (profesión) */
.ac-group-head {
padding: 6px 12px 3px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--ford-blue);
background: var(--gray-50);
border-top: 1px solid var(--gray-200);
}
.ac-group-head:first-child { border-top: none; }
/* Mensaje cuando no hay coincidencias — el user puede escribir libremente */
.ac-empty {
padding: 10px 12px;
font-size: 12.5px;
color: var(--gray-700);
background: #fffbea;
border-left: 3px solid #f59e0b;
line-height: 1.4;
}
/* Selectores de fecha (día / mes / año) */
.reg-fecha-row {
display: grid;
grid-template-columns: 0.9fr 1.4fr 1fr;
gap: 6px;
}
.reg-fecha-sel {
width: 100%;
padding: 10px 8px;
border-radius: 8px;
font-size: 14px;
font-family: inherit;
background: rgba(255,255,255,.55);
border: 1px solid rgba(255,255,255,.55);
color: var(--gray-900);
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 9px center;
padding-right: 24px;
}
.reg-fecha-sel:focus {
background-color: #fff;
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(0,52,120,.18);
outline: none;
}
/* Banner flotante "Modo usuario activo" (admin previsualiza como residente) */
.modo-usuario-banner {
position: fixed;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 250;
background: linear-gradient(135deg, #8e24aa, #ec407a);
color: #fff;
padding: 8px 14px 8px 16px;
border-radius: 999px;
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
box-shadow: 0 6px 18px rgba(142,36,170,.45);
animation: modoUsuarioPulse 2s ease-in-out infinite;
}
.modo-usuario-banner.hidden { display: none; }
.modo-usuario-banner i { font-size: 14px; }
.modo-usuario-banner button {
background: rgba(255,255,255,.22);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.modo-usuario-banner button:hover { background: rgba(255,255,255,.32); }
@keyframes modoUsuarioPulse {
0%, 100% { box-shadow: 0 6px 18px rgba(142,36,170,.45); }
50% { box-shadow: 0 6px 24px rgba(142,36,170,.65); }
}
body.modo-usuario-activo .app-header { box-shadow: inset 0 -2px 0 #ec407a, 0 2px 8px rgba(0,0,0,.2); }
/* Items deshabilitados — siguen visibles pero opacos y no clickables */
.nav-item.disabled,
.menu-item.disabled,
.action-card.disabled {
opacity: .42;
cursor: not-allowed;
filter: grayscale(.65);
}
.nav-item.disabled .nav-avatar,
.nav-item.disabled i {
color: var(--gray-400) !important;
}
/* ===== Comprobantes de pago ===== */
.comprobantes-list {
display: flex; flex-direction: column;
gap: 12px;
padding: 0 16px 24px;
}
.comp-card {
background: var(--white);
border-radius: 14px;
padding: 14px 16px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.comp-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
gap: 8px;
}
.comp-badge {
font-size: 11px;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
letter-spacing: .3px;
}
.comp-badge.badge-pendiente { background: #fff3e0; color: #ef6c00; }
.comp-badge.badge-ok { background: var(--green-light); color: #00824a; }
.comp-badge.badge-fail { background: #ffe5e5; color: #c0392b; }
.comp-fecha { font-size: 11px; color: var(--gray-600); }
.comp-user {
font-size: 11px; color: var(--gray-700);
margin-bottom: 6px;
display: flex; align-items: center; gap: 4px;
}
.comp-monto {
font-size: 22px; font-weight: 800;
color: var(--ford-blue);
margin-bottom: 8px;
letter-spacing: -.5px;
}
.comp-info {
font-size: 12px;
color: var(--gray-700);
display: flex; flex-direction: column; gap: 4px;
background: var(--gray-50);
padding: 8px 10px;
border-radius: 8px;
margin-bottom: 10px;
}
.comp-info strong { color: var(--gray-900); }
.comp-detalle {
margin-top: 4px;
padding-top: 6px;
border-top: 1px dashed var(--gray-200);
font-style: italic;
color: var(--gray-600);
font-size: 11px;
}
.comp-actions {
display: flex; gap: 8px; flex-wrap: wrap;
}
.comp-actions .btn { padding: 6px 12px; font-size: 12px; }
/* ===== Geolocalización (mapa Leaflet) ===== */
.geo-view-body {
padding: 0 !important;
display: flex; flex-direction: column;
height: calc(100vh - var(--topbar-h) - 60px);
min-height: 400px;
}
.geo-map {
width: 100%;
flex: 1 1 auto;
min-height: 280px;
background: #e6eef8;
}
.geo-residentes {
flex: 0 0 auto;
max-height: 220px;
overflow-y: auto;
background: var(--white);
border-top: 1px solid var(--gray-200);
padding: 8px 0;
}
.geo-residente-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 8px 14px;
background: none;
border: none;
border-bottom: 1px solid var(--gray-100);
text-align: left;
cursor: pointer;
transition: background .12s ease;
}
.geo-residente-item:hover { background: var(--gray-50); }
.geo-residente-item.elsa { background: #fff0f6; }
.geo-residente-item.elsa:hover { background: #ffe1ee; }
.geo-residente-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--blue-light);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 13px;
flex-shrink: 0;
}
.geo-residente-item.online .geo-residente-avatar { background: var(--green-light); color: #00824a; }
.geo-residente-item.elsa .geo-residente-avatar { background: #ffd1e0; color: #ad1457; }
.geo-residente-body { flex: 1; min-width: 0; }
.geo-residente-name {
font-size: 13px; font-weight: 700; color: var(--gray-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geo-residente-meta {
font-size: 11px; color: var(--gray-600); margin-top: 1px;
display: flex; align-items: center; gap: 5px;
}
.geo-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gray-300);
}
.geo-dot.online { background: #43a047; box-shadow: 0 0 6px rgba(67,160,71,.6); }
/* Marcadores personalizados en el mapa */
.geo-marker-wrap { background: none; border: none; }
.geo-marker {
position: relative;
width: 44px; height: 56px;
}
.geo-marker-pin {
position: absolute;
top: 0; left: 0;
width: 44px; height: 44px;
border-radius: 50% 50% 50% 0;
background: var(--c, #003478);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 14px;
border: 3px solid #fff;
box-shadow: 0 4px 8px rgba(0,0,0,.28);
transform: rotate(-45deg);
}
.geo-marker-pin::before { content: ''; transform: rotate(45deg); }
.geo-marker .geo-marker-dot {
position: absolute;
top: 0; right: 0;
width: 12px; height: 12px;
border-radius: 50%;
background: #43a047;
border: 2px solid #fff;
animation: geoPulse 1.6s ease-in-out infinite;
}
@keyframes geoPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.15); opacity: .8; }
}
.geo-marker.elsa .geo-marker-pin {
background: linear-gradient(135deg, #ec407a, #f48fb1);
animation: geoBounce 1.8s ease-in-out infinite;
}
/* Rastreo desactivado: marcador rojo */
.geo-marker.rastreo-off .geo-marker-pin {
background: linear-gradient(135deg, #dc2626, #ef4444);
border-color: #b91c1c;
}
/* Ping antiguo (>24h sin actualizar): marcador gris desaturado */
.geo-marker.stale .geo-marker-pin {
background: linear-gradient(135deg, #9e9e9e, #bdbdbd);
border-color: #757575;
opacity: .82;
}
.geo-marker.stale.rastreo-off .geo-marker-pin {
background: linear-gradient(135deg, #dc2626, #ef4444);
border-color: #b91c1c;
opacity: 1;
}
.geo-residente-item.rastreo-off { background: #fef2f2; }
.geo-residente-item.rastreo-off:hover { background: #fee2e2; }
.geo-residente-item.rastreo-off .geo-residente-avatar {
background: #fecaca; color: #b91c1c;
}
@keyframes geoBounce {
0%, 100% { transform: rotate(-45deg) translateY(0); }
50% { transform: rotate(-45deg) translateY(-4px); }
}
.geo-popup { font-size: 13px; color: var(--gray-900); line-height: 1.4; }
.geo-popup strong { color: var(--ford-blue); }
.geo-popup-status.on { color: #43a047; font-weight: 700; }
.geo-popup-status.off { color: var(--gray-500); }
/* Z-index del control de Leaflet menor que header */
.leaflet-control-attribution, .leaflet-control { z-index: 100 !important; }
.leaflet-pane { z-index: 50 !important; }
/* ===== Desempeño / Convivencia ===== */
.desempeno-peers {
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.desempeno-card {
background: var(--white);
border-radius: 12px;
padding: 14px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.desempeno-header {
display: flex; align-items: center; gap: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--gray-100);
margin-bottom: 10px;
}
.desempeno-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #8e24aa, #ec407a);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 14px;
flex-shrink: 0;
}
.desempeno-name { font-size: 14px; font-weight: 800; color: var(--gray-900); }
.desempeno-depto { font-size: 11px; color: var(--gray-600); margin-top: 1px; }
.desempeno-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 0;
gap: 8px;
}
.desempeno-row-label {
font-size: 12px;
font-weight: 600;
color: var(--gray-800);
}
.desempeno-stars {
display: flex; gap: 4px;
font-size: 18px;
cursor: pointer;
}
.desempeno-stars i { color: var(--gray-300); }
.desempeno-stars i.fas { color: #f5c518; }
.desempeno-stars i:hover { transform: scale(1.15); }
.desempeno-comments {
width: 100%;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 12px;
font-family: inherit;
resize: vertical;
}
.resultados-list {
padding: 0 16px 16px;
}
/* ===== Encuesta de limpieza ===== */
.encuesta-intro {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 12px 16px 16px;
padding: 14px;
background: var(--blue-light);
border-radius: 12px;
border-left: 4px solid var(--ford-blue);
}
.encuesta-intro i {
font-size: 24px;
color: var(--ford-blue);
margin-top: 2px;
}
.encuesta-intro p {
font-size: 13px;
color: var(--gray-800);
margin: 0;
line-height: 1.45;
}
#form-encuesta { padding: 0 16px 24px; }
.encuesta-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
background: var(--white);
border-radius: 10px;
border: 1px solid var(--gray-200);
margin-bottom: 6px;
}
.encuesta-label {
font-size: 13px;
font-weight: 700;
color: var(--gray-800);
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.encuesta-label i { color: var(--ford-blue); width: 20px; text-align: center; flex-shrink: 0; }
.encuesta-stars {
display: flex;
gap: 5px;
font-size: 20px;
cursor: pointer;
flex-shrink: 0;
}
.encuesta-stars i { color: var(--gray-300); transition: transform .12s ease, color .12s ease; }
.encuesta-stars i.fas { color: #f5c518; }
.encuesta-stars i:hover { transform: scale(1.15); }
/* ===== Cumpleaños ===== */
.cumpleanos-list {
display: flex; flex-direction: column; gap: 10px;
padding: 0 16px 16px;
}
.cumple-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--white);
border-radius: 12px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.cumple-card.cumple-today {
background: linear-gradient(135deg, #fff8e1, #ffe0b2);
border: 2px solid #ff8c00;
box-shadow: 0 4px 18px rgba(255,140,0,.3);
}
.cumple-card.cumple-soon { border-left: 4px solid #ff8c00; }
.cumple-avatar {
width: 50px; height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ford-blue), #1769FF);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800;
font-size: 16px;
flex-shrink: 0;
}
.cumple-body { flex: 1; min-width: 0; }
.cumple-nombre {
font-size: 14px; font-weight: 800;
color: var(--gray-900);
margin-bottom: 2px;
}
.cumple-fecha {
font-size: 12px; color: var(--gray-600);
margin-bottom: 6px;
}
.cumple-msg-preview {
font-size: 11.5px;
color: var(--gray-700);
line-height: 1.35;
font-style: italic;
border-left: 2px solid var(--gray-200);
padding-left: 8px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cumple-card.cumple-today .cumple-msg-preview { border-left-color: #ff8c00; color: #5d3500; }
.cumple-card.cumple-aniv {
background: linear-gradient(135deg, #fff, #f1e6ff);
border-left: 4px solid #8e24aa;
}
.cumple-card.cumple-aniv .cumple-avatar {
background: linear-gradient(135deg, #8e24aa, #ec407a);
}
.cumple-tipo {
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
text-transform: uppercase;
color: var(--ford-blue);
margin-bottom: 2px;
}
.cumple-card.cumple-aniv .cumple-tipo { color: #8e24aa; }
.cumple-tcn {
font-size: 11px;
color: var(--gray-700);
margin: 4px 0;
display: flex; align-items: center; gap: 4px;
background: var(--gray-50);
padding: 3px 8px;
border-radius: 999px;
width: fit-content;
}
.cumple-tcn i { color: var(--ford-blue); font-size: 10px; }
/* Variante aniversario del popup (reusa modal-birthday) */
.birthday-sheet.aniversario-mode {
background: linear-gradient(135deg, #f1e6ff 0%, #ffe1ee 50%, #fff8e1 100%) !important;
}
.birthday-sheet.aniversario-mode .birthday-icon {
background: linear-gradient(135deg, #8e24aa, #ec407a);
box-shadow: 0 6px 18px rgba(142,36,170,.35);
}
.birthday-sheet.aniversario-mode .birthday-title,
.birthday-sheet.aniversario-mode .birthday-msg { color: #4a148c; }
/* Popup de cumpleaños */
.birthday-sheet {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 50%, #ffd5d5 100%) !important;
text-align: center;
border-radius: 18px;
padding: 0 !important;
}
.birthday-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.birthday-confetti span {
position: absolute;
font-size: 28px;
animation: confettiFall 3s ease-in infinite;
opacity: .85;
}
.birthday-confetti span:nth-child(1) { left: 10%; animation-delay: 0s; }
.birthday-confetti span:nth-child(2) { left: 30%; animation-delay: .5s; }
.birthday-confetti span:nth-child(3) { left: 55%; animation-delay: 1s; }
.birthday-confetti span:nth-child(4) { left: 75%; animation-delay: 1.5s; }
.birthday-confetti span:nth-child(5) { left: 90%; animation-delay: 2s; }
@keyframes confettiFall {
0% { top: -40px; transform: rotate(0); opacity: 0; }
20% { opacity: 1; }
100% { top: 110%; transform: rotate(360deg); opacity: 0; }
}
.birthday-body { padding: 28px 24px 24px; position: relative; z-index: 1; }
.birthday-icon {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #ff8c00, #ff6b6b);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 38px;
margin: 0 auto 14px;
box-shadow: 0 6px 18px rgba(255,140,0,.35);
animation: cakePulse 2s ease-in-out infinite;
}
@keyframes cakePulse {
0%,100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.birthday-title {
font-size: 22px;
font-weight: 900;
color: #5d3500;
margin: 0 0 10px;
line-height: 1.2;
}
.birthday-msg {
font-size: 14px;
color: #5d3500;
line-height: 1.5;
margin: 0 0 18px;
font-weight: 500;
}
/* ===== Forma de salida ===== */
.salida-despedida {
margin: 12px 16px 18px;
padding: 16px;
background: linear-gradient(135deg, #003478, #1769FF);
color: #fff;
border-radius: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
box-shadow: 0 6px 18px rgba(0,52,120,.28);
}
.salida-despedida-icon {
flex: 0 0 auto;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(255,255,255,.2);
border: 2px solid rgba(255,255,255,.45);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
}
.salida-despedida h3 {
font-size: 16px; font-weight: 800; margin: 0 0 6px;
}
.salida-despedida p {
font-size: 13px; line-height: 1.45; margin: 0; opacity: .96;
}
.salida-form { padding: 0 16px 24px; }
/* Estrellas para calificación */
.star-rating {
display: flex; gap: 6px;
font-size: 26px;
cursor: pointer;
user-select: none;
}
.star-rating i { color: #f5c518; transition: transform .12s ease; }
.star-rating i.far { color: var(--gray-300); }
.star-rating i.fas { color: #f5c518; }
.star-rating i:hover { transform: scale(1.15); }
/* ===== Notas personales (post-it style) ===== */
/* La vista de notas ocupa todo el alto disponible: así la lista llega hasta
abajo de la pantalla y no queda un hueco vacío debajo de las notas. */
#view-notas.active {
display: flex;
flex-direction: column;
min-height: calc(100dvh - var(--header-h) - var(--nav-h) - 16px);
}
#view-notas .notas-list {
flex: 1 1 auto;
}
.notas-list {
padding: 12px 16px;
gap: 12px;
}
/* Vista CUADRÍCULA (opcional, antes era el default). */
.notas-list.notas-vista-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
/* Vista LISTA APILADA (default) — acordeón estilo notas Post-it apiladas. */
.notas-list.notas-vista-lista {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Toggle de vista en la toolbar */
.notas-view-toggle {
display: inline-flex;
border: 1px solid var(--gray-300);
border-radius: 8px;
overflow: hidden;
margin-right: 4px;
}
.notas-view-btn {
background: transparent;
border: none;
padding: 6px 10px;
cursor: pointer;
color: var(--gray-600);
font-size: 13px;
transition: background .12s, color .12s;
}
.notas-view-btn.active {
background: var(--ford-blue);
color: #fff;
}
.notas-view-btn:not(.active):hover {
background: var(--gray-100);
color: var(--ford-blue);
}
/* Item del acordeón — head visible siempre, body se despliega al abrir. */
.nota-item {
border-radius: 10px;
background: #fffbe6;
box-shadow: 0 2px 6px rgba(0,0,0,.06);
overflow: hidden;
transition: box-shadow .15s;
}
.nota-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,.10); }
.nota-item-head {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: inherit;
}
.nota-item-chev {
font-size: 11px;
color: var(--gray-500);
transition: transform .18s ease;
flex: 0 0 12px;
}
.nota-item.open .nota-item-chev { transform: rotate(90deg); }
.nota-item-titulo {
flex: 1;
font-size: 14px;
font-weight: 700;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nota-item-fecha {
font-size: 11px;
color: var(--gray-600);
white-space: nowrap;
flex-shrink: 0;
}
/* Indicador de "abrir editor" a la derecha (la fila entera abre la nota). */
.nota-item-goedit {
flex-shrink: 0;
margin-left: 2px;
font-size: 12px;
color: var(--gray-400);
}
.nota-item-body {
max-height: 0;
overflow: hidden;
transition: max-height .25s ease, padding .25s ease;
padding: 0 14px;
}
.nota-item.open .nota-item-body {
max-height: 600px; /* suficiente para notas largas; scroll si excede */
overflow-y: auto;
padding: 0 14px 14px;
}
.nota-item-contenido {
margin: 0 0 10px;
font-family: inherit;
font-size: 13px;
line-height: 1.55;
color: var(--gray-800);
white-space: pre-wrap;
word-break: break-word;
background: transparent;
padding: 0;
}
.nota-item-acciones {
display: flex;
justify-content: flex-end;
gap: 6px;
}
.nota-card {
border-radius: 12px;
padding: 14px;
background: #fffbe6;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
transition: transform .12s ease, box-shadow .12s ease;
min-height: 130px;
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,.04);
}
.nota-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.nota-card-title {
font-size: 14px;
font-weight: 800;
color: var(--gray-900);
margin-bottom: 6px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nota-card-body {
font-size: 12px;
color: var(--gray-700);
line-height: 1.4;
flex: 1;
white-space: pre-wrap;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
.nota-card-footer {
margin-top: 8px;
font-size: 10px;
color: var(--gray-600);
display: flex; align-items: center; gap: 4px;
opacity: .85;
}
/* Variantes de color para post-it */
.nota-color-amarillo { background: #fffbe6; border-left: 4px solid #f5c518; }
.nota-color-rosa { background: #ffe6f0; border-left: 4px solid #e91e63; }
.nota-color-azul { background: #e6f0ff; border-left: 4px solid #1976d2; }
.nota-color-verde { background: #e7fbe7; border-left: 4px solid #43a047; }
.nota-color-morado { background: #f1e6ff; border-left: 4px solid #8e24aa; }
.nota-color-gris { background: #f0f0f0; border-left: 4px solid #757575; }
/* Picker de colores en el modal de nota */
.nota-colors {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 4px;
}
.nota-color-pick {
width: 32px; height: 32px;
border-radius: 50%;
border: 2px solid var(--gray-200);
cursor: pointer;
transition: transform .12s ease, border-color .12s ease;
}
.nota-color-pick.selected {
border-color: var(--ford-blue);
transform: scale(1.1);
box-shadow: 0 0 0 2px rgba(0,52,120,.15);
}
/* Barra de acciones inline encima del textarea de la nota (checkbox/viñeta,
recordatorio, color). Diseño compacto con popovers para color y rec. */
.nota-toolbar-inline {
position: relative;
display: flex; gap: 6px; align-items: center;
margin-bottom: 6px;
flex-wrap: wrap;
}
.nota-tool-btn {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; /* fondo transparente (se ve la barra) */
border: none;
border-radius: 10px;
color: var(--ford-blue, #003478);
font-size: 15px;
cursor: pointer;
transition: background .12s, transform .08s;
font-family: inherit;
}
.nota-tool-btn:hover { background: rgba(0,52,120,.08); }
.nota-tool-btn:active { transform: scale(.92); }
.nota-tool-btn.has-data {
background: #dbeafe; color: #1e40af;
border-color: #93c5fd;
}
/* Los 2 primeros iconos hacen de switch de modo: el del modo activo se resalta. */
.nota-modo-tool.active {
background: var(--ford-blue);
color: #fff;
border-color: var(--ford-blue);
}
/* Menú "Más opciones" (⋮) del editor de nota */
.nota-mas-menu {
position: fixed;
z-index: 1200;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,.18);
padding: 6px;
min-width: 180px;
}
.nota-mas-menu.hidden { display: none; }
.nota-mas-item {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 10px 12px;
background: transparent;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
color: var(--gray-800);
cursor: pointer;
text-align: left;
}
.nota-mas-item:hover { background: var(--gray-100); color: var(--ford-blue); }
.nota-mas-item i { width: 18px; text-align: center; color: var(--ford-blue); }
.nota-editor-more { font-size: 16px; }
/* Barra superior del editor de nota: Texto/Lista (izq) · acciones (der) */
.nota-topbar {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; margin-bottom: 8px;
}
.nota-topbar-libreta {
flex: 1 1 140px; min-width: 120px; max-width: 260px;
}
/* Fila Título + Libreta: el título crece, la libreta va fija a la derecha. */
.nota-titulo-row {
display: flex; align-items: center; gap: 8px;
}
.nota-titulo-row #nota-titulo {
flex: 1 1 auto; min-width: 0; margin: 0;
}
.nota-titulo-row .nota-topbar-libreta {
flex: 0 0 auto; min-width: 110px; max-width: 44%; margin: 0;
}
.nota-topbar-actions {
display: flex; gap: 8px; align-items: center;
margin: 0 0 0 auto; flex-wrap: wrap;
}
.nota-tool-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: auto;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 12px;
box-shadow: 0 8px 24px rgba(0,52,120,.12);
z-index: 30;
min-width: 240px;
}
.nota-tool-popover.hidden { display: none; }
.nota-rec-form {
display: flex; flex-direction: column; gap: 6px;
}
.nota-rec-form label {
font-size: 11px; font-weight: 700; color: var(--gray-600);
text-transform: uppercase; letter-spacing: .4px;
margin: 0;
}
.nota-rec-form input,
.nota-rec-form select {
padding: 8px 10px;
font-size: 13px;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: #fff;
font-family: inherit;
}
.nota-rec-acciones {
display: flex; gap: 8px; justify-content: flex-end;
margin-top: 6px;
}
.nota-rec-actual {
margin: 6px 0 0;
padding: 8px 10px;
background: #dbeafe;
border-radius: 8px;
font-size: 12px;
color: #1e40af;
}
.nota-rec-actual.hidden { display: none; }
/* ===== Anuncios Home — lista estilo playlist (legacy) ===== */
.anuncios-list-home {
margin: 0 16px 12px;
background: var(--white);
border-radius: 14px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.anuncio-list-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: none;
border: none;
border-bottom: 1px solid var(--gray-100);
width: 100%;
text-align: left;
cursor: pointer;
transition: background .12s ease;
}
.anuncio-list-item:hover { background: var(--gray-50); }
.anuncio-list-item:last-of-type { border-bottom: none; }
.anuncio-list-thumb-wrap {
position: relative;
width: 56px; height: 56px;
border-radius: 8px;
overflow: hidden;
background: var(--gray-100);
flex-shrink: 0;
}
.anuncio-list-thumb {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.anuncio-list-thumb-wrap .anuncio-img-error {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--gray-400); font-size: 18px;
}
.anuncio-list-body { flex: 1; min-width: 0; }
.anuncio-list-title {
font-size: 14px;
font-weight: 700;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.25;
}
.anuncio-list-desc {
font-size: 12px;
color: var(--gray-600);
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.anuncio-list-chev {
color: var(--gray-400);
font-size: 12px;
flex-shrink: 0;
}
.anuncio-list-more {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
padding: 12px;
background: var(--blue-light);
color: var(--ford-blue);
border: none;
cursor: pointer;
font-weight: 700;
font-size: 13px;
border-top: 1px solid var(--gray-100);
}
.anuncio-list-more:hover { background: rgba(33, 80, 160, .12); }
/* ===== Bitácora Preview (Home) ===== */
.bitacora-preview {
margin: 0 16px 16px;
background: var(--white);
border-radius: 14px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.bita-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--gray-100);
}
.bita-item:last-child { border-bottom: none; }
.bita-icon {
width: 36px; height: 36px; border-radius: 50%;
background: var(--blue-light);
color: var(--ford-blue);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.bita-body { flex: 1; min-width: 0; }
.bita-title {
font-size: 13px; font-weight: 600; color: var(--gray-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bita-meta { font-size: 11px; color: var(--gray-600); margin-top: 2px; }
.bita-time {
font-size: 11px; color: var(--gray-600);
white-space: nowrap; flex-shrink: 0;
}
.empty-state-sm {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 20px; color: var(--gray-600); font-size: 13px;
}
/* Acciones rápidas estilo "stories" — fila horizontal de iconos circulares */
.quick-actions {
display: flex;
flex-wrap: nowrap;
gap: 12px;
padding: 6px 16px 6px; /* padding-bottom menor — reduce el salto vertical entre los iconos y la siguiente sección */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.quick-actions::-webkit-scrollbar { display: none; }
/* Modo edición: el botón "Listo" flotante aparece cuando los iconos están
en jiggle mode. Pegado abajo a la derecha con safe-area para no chocar
con la barra de gestos en iPhone. */
.quick-actions-done {
position: fixed;
bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
right: 16px;
z-index: 9000;
animation: quickDoneIn .2s ease both;
}
.quick-actions-done.hidden { display: none; }
@keyframes quickDoneIn {
from { transform: translateY(20px) scale(.85); opacity: 0; }
to { transform: translateY(0) scale(1); opacity: 1; }
}
.quick-done-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
background: var(--ford-blue);
color: #fff;
border: none;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
box-shadow: 0 8px 20px rgba(0,52,120,.35);
cursor: pointer;
font-family: inherit;
}
.quick-done-btn:hover { background: #002b5c; }
.quick-done-btn:active { transform: scale(.97); }
/* Hint visual sutil cuando se está manteniendo presionado un icono — la
animación se aplica solo durante el long-press para feedback de que algo
está pasando antes de entrar al modo edición. */
.action-card.long-pressing {
animation: quickLongPress 1.5s ease forwards;
}
@keyframes quickLongPress {
0% { transform: scale(1); }
100% { transform: scale(.92); }
}
/* Modo edición: animación wiggle como apps móviles (iOS jiggle) */
@keyframes quickWiggle {
0% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
100% { transform: rotate(-1.2deg); }
}
.quick-actions.editing .action-card {
animation: quickWiggle .45s ease-in-out infinite;
cursor: grab;
pointer-events: auto;
}
.quick-actions.editing .action-card:active { cursor: grabbing; animation: none; }
.quick-actions.editing .action-card { transform-origin: center; }
/* Estilos de Sortable durante el drag */
.quick-ghost { opacity: .35; }
.quick-chosen { animation: none !important; transform: scale(1.05) !important; box-shadow: 0 6px 18px rgba(0,0,0,.18); border-radius: 12px; }
.quick-dragging { animation: none !important; opacity: .9; }
.action-card {
flex: 0 0 auto;
width: 64px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
color: var(--gray-800);
scroll-snap-align: start;
cursor: pointer;
}
.action-card i {
width: 64px; height: 64px;
/* Squircle estilo iOS — sólo el glifo de FontAwesome, sin etiqueta.
Sin sombra: look más limpio y plano (flat design). */
border-radius: 15px;
background: #fff;
color: var(--ford-blue);
border: 1px solid rgba(0, 52, 120, .14);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
transition: transform .12s ease, background .12s ease, color .12s ease;
}
.action-card:active i {
transform: scale(.92);
background: var(--ford-blue);
color: #fff;
}
/* (Sin variantes de color: todas las acciones rápidas usan el mismo tono azul JM) */
/* #admin-quick ya NO contiene los iconos (se movieron al 4to cuadrante del
banner desde v454). Queda solo como host del botón flotante "Listo" cuando
se está editando. CRITICAL (v467): usamos `display: contents` para que el
wrapper NO ocupe espacio en el layout — su único hijo (`.quick-actions-done`)
es `position: fixed` así que se renderea contra el viewport. Esto elimina
el gap fantasma de ~10-14px que estaba apareciendo entre el banner y el
album de anuncios. */
#admin-quick {
display: contents;
}
/* Quick-actions sobre el banner: ya no se aplica sombra (look plano).
El borde sutil mantiene la separación visual contra el fondo coloreado. */
/* Mobile: que la fila de iconos use TODO el ancho de la pantalla como el
banner, en vez de quedarse con el padding del view. El padding interno de
16px se mantiene para que el primer icono no quede pegado al borde.
El fade-mask del lado derecho hace que el último icono visible se
desvanezca en vez de cortarse en seco. */
@media (max-width: 899px) {
#admin-quick .quick-actions {
margin-left: -16px;
margin-right: -16px;
-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
}
/* Botón "Hacerlo más tarde" — secundario, estilo link discreto bajo el CTA
principal en los modales de onboarding obligatorio (datos residente y
firma reglamento). El usuario puede deferir pero el modal vuelve a
aparecer en la próxima apertura de la app si el paso sigue pendiente. */
.onboarding-later-btn {
display: block;
width: 100%;
background: none;
border: none;
color: var(--gray-700);
font-size: 13px;
font-weight: 600;
font-family: inherit;
padding: 12px 0 6px;
margin-top: 4px;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.onboarding-later-btn:hover { color: var(--ford-blue); }
.onboarding-later-btn:active { opacity: .7; }
/* ===== INFO CARDS ===== */
.info-card {
background: var(--white);
border-radius: var(--radius-lg);
padding: 16px;
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 16px;
box-shadow: var(--shadow-sm);
}
.info-card-icon {
width: 48px; height: 48px;
background: var(--blue-light);
border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center;
color: var(--ford-blue);
font-size: 20px;
flex-shrink: 0;
}
.info-card-label { font-size: 11px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; }
.info-card-value { font-size: 18px; font-weight: 700; margin-top: 2px; }
/* ===== LIST ITEMS ===== */
.list-container {
padding: 8px 0;
/* Contener overflow horizontal — antes los .list-item podían sobresalir
del view-residentes en PC si el contenido era ancho. */
max-width: 100%;
overflow-x: hidden;
box-sizing: border-box;
}
.list-item {
background: var(--white);
margin: 0 12px 8px;
border-radius: var(--radius-md);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 14px;
cursor: pointer;
transition: all var(--transition);
border: 1px solid transparent;
/* Cap a 100% del contenedor + box-sizing para que padding NO sume al width */
box-sizing: border-box;
max-width: calc(100% - 24px);
overflow: hidden;
}
.list-item:active { transform: scale(.99); border-color: var(--ford-blue); }
/* Tarjeta de residente PENDIENTE (cuenta creada, falta llenar "Nuevo integrante")
— mismo layout que cualquier card, solo el borde izquierdo y un tinte muy
suave la distinguen. SIN gradientes ni dashed: queda alineada con el resto. */
.list-item.list-item-pendiente {
background: #fffbeb;
border-left: 3px solid #f59e0b;
}
.list-avatar {
width: 44px; height: 44px;
background: var(--ford-blue);
color: var(--white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 700;
flex-shrink: 0;
}
.list-avatar.green { background: var(--green); }
.list-avatar.yellow { background: var(--yellow); }
.list-avatar.red { background: var(--red); }
.list-avatar.gray { background: var(--gray-400); }
.list-body { flex: 1; min-width: 0; overflow: hidden; }
.list-title {
font-size: 14px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: 6px;
}
.list-title > .badge { flex-shrink: 0; }
.list-subtitle {
font-size: 12px; color: var(--gray-600); margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; max-width: 40%; }
.list-meta > * { white-space: nowrap; }
/* Bloque de pagos en la tarjeta del directorio: renta arriba (azul Ford,
más prominente) + depósito abajo (gris, más chico). */
.list-pagos {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
line-height: 1.15;
}
.list-renta {
font-size: 13px;
font-weight: 700;
color: var(--ford-blue);
}
.list-deposito {
font-size: 10.5px;
color: var(--gray-500);
font-weight: 500;
}
/* === MANTENIMIENTO — Tickets estilo Drive (v463) ============================
Lista de tickets en cards con thumbnail de foto, título, autor, fecha,
inmueble, chip de urgencia y badge de estado. Click → modal detalle. */
.mtto-ticket-list {
padding: 8px 12px 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Muro tipo Pinterest (masonry): foto arriba, datos abajo. Enfoque en imágenes. v480 */
.mtto-wall {
column-count: 2;
column-gap: 10px;
}
@media (min-width: 640px) { .mtto-wall { column-count: 3; } }
@media (min-width: 1000px) { .mtto-wall { column-count: 4; } }
.mtto-pin {
break-inside: avoid;
-webkit-column-break-inside: avoid;
margin: 0 0 10px;
background: var(--white);
border-radius: 14px;
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-100);
cursor: pointer;
transition: box-shadow .15s ease, transform .12s ease;
}
.mtto-pin:hover { box-shadow: var(--shadow-md); }
.mtto-pin:active { transform: scale(.99); }
.mtto-pin.urgente { border-color: var(--red, #d0021b); box-shadow: 0 0 0 1px var(--red, #d0021b); }
.mtto-pin-media { position: relative; background: var(--gray-100); line-height: 0; }
.mtto-pin-media img { width: 100%; height: auto; display: block; }
.mtto-pin-media.no-foto { height: 110px; display: flex; align-items: center; justify-content: center; }
.mtto-pin-media.no-foto i { font-size: 32px; color: var(--gray-400); }
.mtto-pin-count {
position: absolute; top: 8px; right: 8px;
background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700;
padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px;
}
.mtto-pin-vid { right: auto; left: 8px; }
.mtto-pin-badge-urg {
position: absolute; bottom: 8px; left: 8px;
background: var(--red, #d0021b); color: #fff; font-size: 10px; font-weight: 800;
padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px;
}
.mtto-pin-cap { padding: 9px 10px 10px; }
.mtto-pin-desc {
font-size: 13px; font-weight: 700; color: var(--gray-900); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mtto-pin-sub {
margin-top: 5px; font-size: 11.5px; color: var(--gray-600);
display: flex; align-items: center; gap: 5px;
}
.mtto-pin-sub i { font-size: 10px; color: var(--gray-500); }
.mtto-pin-foot { margin-top: 7px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mtto-pin-date { margin-left: auto; font-size: 10.5px; color: var(--gray-500); }
.mtto-pin .mtto-share-btn {
background: var(--gray-100); border: none; color: var(--ford-blue);
width: 26px; height: 26px; border-radius: 999px; cursor: pointer; font-size: 12px;
}
/* Agrupación de tickets por departamento */
.mtto-depto-group { display: flex; flex-direction: column; gap: 10px; }
.mtto-depto-group + .mtto-depto-group { margin-top: 14px; }
.mtto-depto-head {
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 800; color: var(--ford-blue);
padding: 4px 2px 2px; border-bottom: 2px solid var(--ford-blue);
margin-bottom: 2px;
}
.mtto-depto-head i { font-size: 12px; }
.mtto-depto-count {
margin-left: auto; background: rgba(0,52,120,.10); color: var(--ford-blue);
font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px;
}
.mtto-ticket {
background: var(--white);
border-radius: 14px;
padding: 12px;
display: flex;
gap: 12px;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
border: 1px solid var(--gray-100);
}
.mtto-ticket:hover { box-shadow: var(--shadow-md); }
.mtto-ticket:active { transform: scale(.99); }
.mtto-ticket.urgente {
border-left: 4px solid var(--red, #d0021b);
background: linear-gradient(180deg, #fff5f5 0%, var(--white) 35%);
}
.mtto-ticket-thumb {
width: 72px; height: 72px;
border-radius: 10px;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.mtto-ticket-thumb i {
font-size: 26px;
color: var(--gray-400);
}
.mtto-ticket-thumb img {
width: 100%; height: 100%;
object-fit: cover;
}
.mtto-ticket-thumb.no-foto i { display: block; }
.mtto-ticket-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.mtto-ticket-title {
font-size: 14px;
font-weight: 700;
color: var(--gray-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mtto-ticket-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
font-size: 11.5px;
color: var(--gray-600);
}
.mtto-ticket-meta span { display: inline-flex; align-items: center; gap: 4px; }
.mtto-ticket-meta i { font-size: 10px; color: var(--gray-500); }
.mtto-ticket-foot {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.badge.badge-red {
background: rgba(208,2,27,.10);
color: var(--red, #d0021b);
font-weight: 700;
}
/* Botón compartir en cada ticket (admin-only) */
.mtto-share-btn {
position: absolute;
top: 8px; right: 8px;
width: 30px; height: 30px;
border-radius: 999px;
background: rgba(0,52,120,.08);
color: var(--ford-blue);
border: none;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
transition: background .15s, transform .12s;
}
.mtto-share-btn:hover { background: var(--ford-blue); color: #fff; }
.mtto-share-btn:active { transform: scale(.92); }
.mtto-ticket { position: relative; }
/* Textarea de instrucciones del admin */
.mtto-notas-admin-textarea {
width: 100%;
padding: 10px 12px;
border: 1.5px solid rgba(245,158,11,.4);
border-radius: 10px;
font-family: inherit;
font-size: 13px;
background: #fffbe6;
color: #78350f;
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
.mtto-notas-admin-textarea:focus {
outline: none;
border-color: #f59e0b;
background: #fff;
}
/* Modal detalle ticket */
.mtto-det-fotos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.mtto-det-fotos img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
}
.mtto-det-badges {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 14px;
}
.mtto-det-row {
display: flex;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--gray-100);
}
.mtto-det-row:last-child { border-bottom: none; }
.mtto-det-label {
width: 130px;
flex-shrink: 0;
font-size: 12px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .3px;
}
.mtto-det-value {
flex: 1;
font-size: 13px;
color: var(--gray-900);
line-height: 1.5;
}
@media (min-width: 900px) {
.mtto-ticket { padding: 14px; }
.mtto-ticket-thumb { width: 88px; height: 88px; }
}
@media (max-width: 600px) {
.mtto-ticket-thumb { width: 60px; height: 60px; }
.mtto-ticket-thumb i { font-size: 20px; }
.mtto-ticket-title { font-size: 13px; }
.mtto-ticket-meta { font-size: 11px; gap: 8px; }
.mtto-det-label { width: 100px; font-size: 11px; }
}
/* === PC compacto (≥900px): cards del directorio más compactas para que
quepa toda la info sin saltos. Reduce padding, font-size del título,
gap, y avatar más chico. === */
@media (min-width: 900px) {
#view-residentes .list-container { padding: 4px 0; }
#view-residentes .list-item {
margin: 0 12px 6px;
padding: 10px 14px;
gap: 12px;
}
#view-residentes .list-avatar {
width: 38px; height: 38px;
font-size: 13px;
}
#view-residentes .list-title { font-size: 13.5px; }
#view-residentes .list-subtitle { font-size: 11.5px; }
#view-residentes .list-meta { gap: 3px; max-width: 45%; }
#view-residentes .list-renta { font-size: 12.5px; }
#view-residentes .list-deposito { font-size: 10px; }
/* Section header del directorio también más compacto */
#view-residentes .list-section-header { padding: 10px 16px 4px; font-size: 10.5px; }
}
/* ===== BADGES ===== */
.badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 100px;
font-size: 11px;
font-weight: 600;
}
.badge-blue { background: var(--blue-light); color: var(--ford-blue); }
.badge-green { background: var(--green-light); color: var(--green); }
.badge-yellow { background: var(--yellow-light); color: #8B5E00; }
.badge-red { background: var(--red-light); color: var(--red); }
.badge-gray { background: var(--gray-100); color: var(--gray-600); }
/* ===== FILTER TABS ===== */
.filter-tabs {
display: flex;
gap: 8px;
padding: 12px 16px;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
overflow-x: auto;
}
.filter-tab {
padding: 6px 16px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
color: var(--gray-600);
background: var(--gray-100);
white-space: nowrap;
transition: all var(--transition);
}
.filter-tab.active { background: var(--ford-blue); color: var(--white); }
/* ===== DATE NAV ===== */
.date-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--white);
border-bottom: 1px solid var(--gray-200);
font-weight: 600;
}
.date-nav button { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); color: var(--gray-800); display: flex; align-items: center; justify-content: center; }
/* ===== CHECKLIST ITEM ===== */
.task-item {
background: var(--white);
margin: 0 12px 8px;
border-radius: var(--radius-md);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 14px;
}
.task-check {
width: 28px; height: 28px;
border-radius: 50%;
border: 2px solid var(--gray-200);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
cursor: pointer;
transition: all var(--transition);
}
.task-check.done { background: var(--green); border-color: var(--green); color: var(--white); }
.task-check.pending { border-color: var(--ford-blue); }
.task-body { flex: 1; }
.task-dept { font-size: 11px; color: var(--gray-600); margin-bottom: 2px; }
.task-name { font-size: 14px; font-weight: 600; }
.task-name.done { text-decoration: line-through; color: var(--gray-400); }
.task-responsible { font-size: 11px; color: var(--gray-600); margin-top: 2px; }
/* ===== REGLAMENTO ===== */
.reglamento-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.reglamento-header h2 { font-size: 20px; font-weight: 800; color: var(--ford-blue); }
.reglamento-edit-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
padding: 0 16px 14px;
margin-bottom: 4px;
border-bottom: 1px dashed var(--gray-200);
}
.reglamento-edit-bar.hidden { display: none !important; }
.reglamento-edit-bar .btn { min-width: 160px; }
@media (max-width: 480px) {
.reglamento-edit-bar .btn { flex: 1 1 0; min-width: 0; }
}
.reglamento-content {
background: transparent;
padding: 0 16px 16px;
font-size: 14px;
color: var(--gray-800);
}
/* Preámbulo */
.reg-preamble {
background: linear-gradient(135deg, var(--ford-blue), #2150a0);
color: var(--white);
border-radius: 16px;
padding: 18px 18px 16px;
margin-bottom: 14px;
box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18);
}
.reg-titulo {
font-size: 18px;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: .2px;
}
.reg-intro {
font-size: 13px;
line-height: 1.5;
opacity: .95;
margin: 0;
}
/* Índice navegable al inicio */
.reg-index {
background: var(--white);
border-radius: 12px;
margin: 0 0 14px;
padding: 10px 14px 6px;
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
}
.reg-index-title {
font-size: 11px; font-weight: 800; text-transform: uppercase;
letter-spacing: .5px; color: var(--gray-500); margin-bottom: 4px;
}
.reg-index-list { list-style: none; padding: 0; margin: 0; }
.reg-index-list a {
display: block; padding: 7px 2px; font-size: 13.5px; line-height: 1.35;
color: var(--ford-blue); font-weight: 600; text-decoration: none;
border-bottom: 1px solid var(--gray-100); cursor: pointer;
}
.reg-index-list li:last-child a { border-bottom: none; }
.reg-index-list a:active { background: var(--gray-50); }
/* Secciones colapsables */
.reg-section {
background: var(--white);
border-radius: 14px;
margin-bottom: 6px;
scroll-margin-top: 64px;
border: none; /* estilo SYNC: sin contorno */
box-shadow: 0 1px 3px rgba(16,24,40,.10), 0 4px 10px rgba(16,24,40,.14);
overflow: hidden;
transition: box-shadow .15s;
}
.reg-section[open] {
box-shadow: 0 4px 8px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.18);
}
.reg-summary {
list-style: none;
cursor: pointer;
padding: 10px 13px;
display: flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 14.5px;
color: var(--ford-blue);
user-select: none;
-webkit-user-select: none;
}
.reg-summary::-webkit-details-marker { display: none; }
.reg-summary::marker { content: ''; }
.reg-summary:hover { background: var(--gray-50); }
.reg-summary-text { flex: 1; }
.reg-chevron {
font-size: 12px;
color: var(--gray-500);
transition: transform .2s ease;
}
.reg-section[open] .reg-chevron { transform: rotate(180deg); }
.reg-body {
padding: 2px 14px 11px;
display: flex;
flex-direction: column;
gap: 4px;
counter-reset: regmain regsub;
}
/* Subtítulos dentro de una sección */
.reg-subhead {
font-size: 13.5px;
font-weight: 700;
color: var(--gray-900);
margin: 4px 0 1px;
padding-bottom: 2px;
border-bottom: 1px dashed var(--gray-200);
}
.reg-p {
font-size: 13.5px;
line-height: 1.4;
color: var(--gray-700);
margin: 0;
}
/* Listas: bullets propios sin guiones */
.reg-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.reg-list li {
position: relative;
padding-left: 32px;
font-size: 13.5px;
line-height: 1.4;
color: var(--gray-800);
}
.reg-list li:not(.sub) { counter-increment: regmain; }
.reg-list li:not(.sub)::before {
content: counter(regmain, upper-roman) ".";
position: absolute;
left: 2px; top: 0;
width: 24px;
text-align: right;
color: var(--ford-blue);
font-weight: 700;
font-size: 12px;
}
.reg-list li.sub {
padding-left: 46px;
color: var(--gray-700);
font-size: 13px;
counter-increment: regsub;
}
.reg-list li.sub::before {
content: counter(regsub, lower-alpha) ")";
position: absolute;
left: 18px; top: 0;
width: 22px;
text-align: right;
color: var(--gray-500);
font-weight: 700;
font-size: 11.5px;
}
/* En el intake (vista compacta dentro del modal) */
#intake-reglamento .reg-section { margin-bottom: 6px; }
/* Resaltado amarillo claro para los títulos de las secciones 16 y 17 */
.reg-section[data-section="16"] > .reg-summary,
.reg-section[data-section="17"] > .reg-summary {
background: #fff8c4; /* amarillo claro */
}
.reg-section[data-section="16"] > .reg-summary:hover,
.reg-section[data-section="17"] > .reg-summary:hover {
background: #fff1a0;
}
#intake-reglamento .reg-summary { padding: 10px 12px; font-size: 13.5px; }
#intake-reglamento .reg-body { padding: 8px 12px 10px; }
#intake-reglamento .reg-preamble { padding: 12px; }
#intake-reglamento .reg-titulo { font-size: 14px; }
#intake-reglamento .reg-intro { font-size: 12px; }
/* Edición inline por sección (admin) */
.reg-edit-toolbar {
display: flex;
justify-content: flex-end;
padding: 6px 14px 10px;
border-top: 1px dashed var(--gray-200);
margin-top: 6px;
}
.reg-edit-btn { font-size: 11.5px; }
.reg-inline-editor {
display: flex; flex-direction: column; gap: 8px;
padding: 10px 14px 12px;
}
.reg-inline-textarea {
width: 100%;
min-height: 180px;
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.55;
padding: 10px 12px;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: #fff;
color: var(--gray-900);
resize: vertical;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
}
.reg-inline-textarea:focus {
outline: none;
border-color: #1769FF;
box-shadow: 0 0 0 3px rgba(23,105,255,0.15);
}
.reg-inline-actions {
display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
/* Ocultar editor inline en intake (lector solamente) */
#intake-reglamento .reg-edit-toolbar,
#intake-reglamento .reg-inline-editor { display: none !important; }
/* ===== MENU LIST ===== */
.menu-list { display: flex; flex-direction: column; gap: 8px; }
.menu-item {
background: var(--white);
border-radius: var(--radius-md);
padding: 16px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: var(--shadow-sm);
font-size: 15px;
font-weight: 500;
color: var(--gray-900);
transition: all var(--transition);
width: 100%;
text-align: left;
}
.menu-item:active { transform: scale(.99); }
.menu-item-icon { width: 32px; color: var(--ford-blue); font-size: 18px; }
.menu-item-arrow { margin-left: auto; color: var(--gray-400); font-size: 12px; }
/* Icono ojo (visible/bloqueado) — solo visible para admins. Se pega a la
derecha justo antes de la flecha. Color gris discreto para no robar la
vista del menú; el icono ya cambia (eye / eye-slash) según el estado. */
.menu-item-eye {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: auto; /* empuja todo el bloque (ojo+flecha) a la derecha */
border-radius: 6px;
color: var(--gray-400); /* gris discreto */
font-size: 12px;
cursor: pointer;
background: transparent;
transition: color .12s, background .12s, transform .08s;
}
.menu-item-eye:hover {
color: var(--gray-600);
background: var(--gray-100);
}
.menu-item-eye:active { transform: scale(.9); }
.menu-item-eye.eye-blocked {
color: var(--gray-600); /* gris más oscuro cuando está bloqueado */
}
.menu-item-eye.eye-blocked:hover {
color: var(--gray-700);
background: var(--gray-100);
}
/* Cuando hay ojo, la flecha pierde el margin-left:auto: ya lo consumió el ojo */
.menu-item-eye + .menu-item-arrow,
.menu-drawer-body .menu-item:not(.menu-item-profile) .menu-item-eye + .menu-item-arrow {
margin-left: 4px !important;
}
/* ===== FORMS ===== */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--gray-600); text-transform: uppercase; letter-spacing: .4px; }
/* En el registro y en checkboxes con texto largo (aviso de privacidad,
código de perfil) el uppercase forzado mata la legibilidad. Restauramos
sentence case para esos casos. */
.form-group .reg-acepto-label,
.form-group .reg-acepto-label span {
text-transform: none !important;
letter-spacing: 0 !important;
font-size: inherit;
color: inherit;
font-weight: inherit;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], input[type="search"],
select, textarea {
width: 100%;
padding: 11px 14px;
border: 1.5px solid var(--gray-200);
border-radius: var(--radius-sm);
background: var(--white);
color: var(--gray-900);
transition: border-color var(--transition);
outline: none;
-webkit-appearance: none;
appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--ford-blue); }
textarea { resize: vertical; min-height: 72px; }
.search-input { flex: 1; padding: 8px 14px; border-radius: 100px; border: 1.5px solid var(--gray-200); background: var(--gray-50); }
/* ===== FILE UPLOAD ===== */
.file-upload-area {
border: 2px dashed var(--gray-200);
border-radius: var(--radius-md);
padding: 24px 16px;
text-align: center;
cursor: pointer;
color: var(--gray-600);
transition: all var(--transition);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.file-upload-area:hover { border-color: var(--ford-blue); background: var(--blue-light); }
.file-upload-area i { font-size: 28px; color: var(--ford-blue); }
/* ===== SCANNER (documentos tipo CamScanner) ===== */
.scanner-sheet {
width: min(560px, 96vw) !important;
max-height: 95vh !important;
display: flex !important;
flex-direction: column;
}
.scanner-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px !important;
overflow: hidden;
flex: 1;
}
.scanner-empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
padding: 30px 16px;
color: var(--gray-600);
text-align: center;
}
.scanner-empty i { font-size: 56px; color: var(--gray-300); }
.scanner-empty p { font-size: 14px; margin: 0; }
.scanner-empty .btn { width: 100%; max-width: 320px; }
.scanner-empty.hidden { display: none; }
.scanner-editor {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 0;
}
.scanner-editor.hidden { display: none; }
.scanner-canvas-wrap {
flex: 1;
background: #1a1a1a;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 220px;
}
.scanner-canvas-wrap canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.scanner-controls {
display: flex;
gap: 10px;
justify-content: center;
}
.btn-icon-soft {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--gray-100);
border: none;
color: var(--gray-700);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
transition: background .15s, color .15s;
}
.btn-icon-soft:hover { background: var(--ford-blue); color: #fff; }
.btn-icon-soft.active { background: var(--ford-blue); color: #fff; }
.btn-icon-soft.danger:hover { background: var(--red, #e53935); color: #fff; }
.scanner-pages-strip {
display: flex;
gap: 6px;
padding: 6px 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-shrink: 0;
min-height: 0;
}
.scanner-pages-strip:empty { display: none; }
.scanner-page-thumb {
flex: 0 0 auto;
width: 56px; height: 78px;
border-radius: 6px;
background: var(--gray-200);
border: 2px solid transparent;
cursor: pointer;
position: relative;
overflow: hidden;
}
.scanner-page-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.scanner-page-thumb.active { border-color: var(--ford-blue); }
.scanner-page-thumb-num {
position: absolute;
bottom: 2px; left: 2px;
background: rgba(0,0,0,.7);
color: #fff;
font-size: 9px;
font-weight: 700;
padding: 1px 4px;
border-radius: 3px;
}
.scanner-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.scanner-actions.hidden { display: none; }
.scanner-actions .btn { flex: 1; }
/* Cerrar sesión: estilo destacado en rojo dentro del drawer */
.menu-item.menu-item-logout {
color: var(--red, #c62828);
font-weight: 600;
}
.menu-item.menu-item-logout:hover {
background: rgba(229, 57, 53, 0.06);
}
/* Banner de actualización del Service Worker */
#sw-update-banner {
position: fixed;
bottom: 18px; left: 50%;
transform: translateX(-50%);
z-index: 99999;
background: var(--ford-blue);
color: #fff;
padding: 10px 14px;
border-radius: 100px;
display: flex; align-items: center; gap: 10px;
font-size: 13px;
box-shadow: 0 8px 24px rgba(0,52,120,.4);
animation: swBannerIn .25s ease;
max-width: calc(100vw - 32px);
}
#sw-update-banner .btn {
background: #fff;
color: var(--ford-blue);
border: none;
padding: 6px 14px;
border-radius: 100px;
font-weight: 700;
cursor: pointer;
}
#sw-update-banner .btn-close {
background: rgba(255,255,255,.2);
color: #fff;
border: none;
width: 24px; height: 24px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
}
#sw-update-banner i { color: #fff; }
@keyframes swBannerIn {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ===== ANUNCIOS WHATSAPP (paleta azul de la app) ===== */
.wapp-wrap {
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 100px;
}
.wapp-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 14px;
box-shadow: var(--shadow-sm);
border-left: 3px solid var(--ford-blue);
}
.wapp-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .4px;
margin-bottom: 6px;
}
.wapp-card textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 14px;
resize: vertical;
font-family: inherit;
}
.wapp-card textarea:focus {
outline: none;
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(33,80,160,.12);
}
.wapp-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
color: var(--gray-900);
}
.wapp-card-head strong i { color: var(--ford-blue); margin-right: 6px; }
.wapp-list {
max-height: 260px;
overflow-y: auto;
}
.wapp-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
border-bottom: 1px solid var(--gray-100);
cursor: pointer;
transition: background .12s;
}
.wapp-item:hover { background: var(--gray-50); }
.wapp-item:last-child { border-bottom: none; }
.wapp-item input[type=checkbox] {
width: 18px; height: 18px;
accent-color: var(--ford-blue);
flex-shrink: 0;
}
.wapp-item-info { flex: 1; min-width: 0; }
.wapp-item-name {
font-weight: 600;
font-size: 13px;
color: var(--gray-900);
}
.wapp-item-meta {
font-size: 11px;
color: var(--gray-600);
margin-top: 2px;
}
.wapp-otros .wapp-otro-row {
display: grid;
grid-template-columns: 1fr 1fr 36px;
gap: 6px;
margin-bottom: 6px;
}
.wapp-otros input {
padding: 7px 9px;
border: 1px solid var(--gray-200);
border-radius: 6px;
font-size: 13px;
}
.wapp-otros input:focus {
outline: none;
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(33,80,160,.12);
}
.wapp-resumen {
position: sticky;
bottom: 0;
background: var(--white);
padding: 12px 16px;
border-radius: var(--radius-md);
box-shadow: 0 -2px 12px rgba(0,0,0,.10);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
font-size: 13px;
color: var(--gray-700);
}
.wapp-resumen strong { color: var(--ford-blue); font-size: 16px; }
/* Modal WhatsApp Web (links wa.me) */
.walink-preview {
background: var(--gray-50);
border-radius: 8px;
padding: 10px 12px;
border-left: 3px solid var(--ford-blue);
}
.walink-preview-label {
font-size: 10px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .4px;
margin-bottom: 4px;
}
.walink-preview-msg {
font-size: 13px;
color: var(--gray-800);
line-height: 1.4;
word-break: break-word;
}
.walink-actions {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.walink-list {
max-height: 280px;
overflow-y: auto;
}
.walink-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 4px;
border-bottom: 1px solid var(--gray-100);
}
.walink-row:last-child { border-bottom: none; }
.walink-info { flex: 1; min-width: 0; }
.walink-name {
font-weight: 600;
font-size: 13px;
color: var(--gray-900);
}
.walink-num {
font-size: 11px;
color: var(--gray-600);
margin-top: 1px;
}
/* Chips de miembros seleccionados al crear grupo */
.grupo-chips {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 6px 0 4px;
min-height: 32px;
}
.grupo-chip {
background: var(--blue-light, #e3f2fd);
color: var(--ford-blue);
border: 1px solid var(--ford-blue);
border-radius: 100px;
padding: 4px 4px 4px 10px;
font-size: 12px;
font-weight: 600;
display: inline-flex; align-items: center; gap: 4px;
}
.grupo-chip button {
background: var(--ford-blue);
color: #fff;
border: none;
width: 18px; height: 18px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}
/* ===== DASHBOARD FINANZAS ===== */
.fin-tabs {
display: flex;
gap: 4px;
padding: 8px 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.fin-tab {
flex: 0 0 auto;
padding: 6px 14px;
border-radius: 100px;
background: var(--white);
border: 1px solid var(--gray-200);
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
cursor: pointer;
white-space: nowrap;
transition: all .12s;
}
.fin-tab.active {
background: var(--ford-blue);
color: #fff;
border-color: var(--ford-blue);
}
.fin-content { padding: 12px; }
.fin-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.fin-card {
background: var(--white);
border-radius: var(--radius-md);
padding: 12px 14px;
border-left: 4px solid var(--gray-300);
box-shadow: var(--shadow-sm);
}
.fin-card.pos { border-left-color: #2e7d32; }
.fin-card.neg { border-left-color: #e53935; }
.fin-card-label {
font-size: 11px;
font-weight: 700;
color: var(--gray-600);
text-transform: uppercase;
letter-spacing: .4px;
}
.fin-card-value {
font-size: 22px;
font-weight: 800;
color: var(--gray-900);
margin: 3px 0 2px;
}
.fin-card-sub {
font-size: 11px;
color: var(--gray-600);
}
.fin-section {
background: var(--white);
border-radius: var(--radius-md);
padding: 14px;
box-shadow: var(--shadow-sm);
margin-bottom: 12px;
}
.fin-section-title {
font-size: 13px;
font-weight: 700;
color: var(--ford-blue);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.fin-chart-wrap {
position: relative;
height: 280px;
width: 100%;
}
.fin-table-wrap { overflow-x: auto; }
.fin-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.fin-table th, .fin-table td {
padding: 7px 8px;
border-bottom: 1px solid var(--gray-100);
}
.fin-table th {
background: var(--gray-50);
font-weight: 700;
color: var(--gray-700);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .3px;
text-align: left;
}
.fin-table .t-right { text-align: right; }
.fin-table .t-center { text-align: center; }
.fin-table .pos { color: #2e7d32; }
.fin-table .neg { color: #c62828; }
.fin-rank {
display: inline-block;
background: var(--ford-blue);
color: #fff;
font-weight: 800;
padding: 2px 7px;
border-radius: 10px;
font-size: 11px;
}
.fin-chip {
background: var(--gray-100);
color: var(--gray-700);
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
}
/* ===== CALENDARIO TRIMESTRAL ===== */
.cal-legend {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px 12px;
background: var(--gray-50);
font-size: 10px;
}
.cal-chip {
color: #fff;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
letter-spacing: .2px;
}
.cal-trimestre {
display: flex;
flex-direction: column;
gap: 14px;
padding: 12px;
}
.cal-mes {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.cal-mes-titulo {
background: var(--ford-blue);
color: var(--white);
text-align: center;
font-weight: 700;
font-size: 14px;
padding: 8px 10px;
letter-spacing: .3px;
}
.cal-mes-dias-h {
display: grid;
grid-template-columns: repeat(7, 1fr);
background: var(--gray-100);
font-size: 10px;
font-weight: 700;
color: var(--gray-600);
text-align: center;
text-transform: uppercase;
padding: 4px 0;
}
.cal-mes-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background: var(--gray-200);
}
.cal-dia {
background: var(--white);
min-height: 50px;
padding: 4px 4px 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
position: relative;
transition: background .12s;
}
.cal-dia:hover { background: var(--gray-50); }
.cal-dia-vacio { background: var(--gray-50); cursor: default; }
.cal-dia-num {
font-size: 11px;
font-weight: 600;
color: var(--gray-700);
}
.cal-dia-hoy {
background: rgba(33,80,160,.08);
}
.cal-dia-hoy .cal-dia-num {
color: var(--ford-blue);
font-weight: 800;
background: var(--ford-blue);
color: #fff;
border-radius: 50%;
width: 18px; height: 18px;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
}
.cal-dia-tiene { background: rgba(255,140,0,.04); }
.cal-dia-dots {
display: flex;
gap: 2px;
align-items: center;
flex-wrap: wrap;
}
.cal-dot {
width: 6px; height: 6px;
border-radius: 50%;
display: inline-block;
}
.cal-dot-more {
font-size: 8px;
color: var(--gray-500);
font-weight: 700;
}
.cal-detalle-dia {
margin: 8px 12px 24px;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 12px 14px;
border-top: 4px solid var(--ford-blue);
}
.cal-detalle-dia.hidden { display: none; }
.cal-detalle-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
color: var(--ford-blue);
}
.cal-evento {
background: var(--gray-50);
border-left: 4px solid var(--ford-blue);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 6px;
cursor: pointer;
transition: background .12s;
}
.cal-evento:hover { background: var(--gray-100); }
.cal-evento-titulo {
font-weight: 700;
font-size: 13px;
color: var(--gray-900);
}
.cal-evento-desc {
font-size: 12px;
color: var(--gray-700);
margin-top: 2px;
}
.cal-evento-detalle {
font-size: 11px;
color: var(--gray-500);
margin-top: 2px;
font-style: italic;
}
/* Avatar circular en el header del chat (a la izquierda del nombre) */
.msg-window-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(255,255,255,.20);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
flex-shrink: 0;
border: 1.5px solid rgba(255,255,255,.35);
}
.msg-window-avatar.grupo {
background: linear-gradient(135deg, #00897b, #26a69a);
}
/* Emoji picker */
.msg-emoji-picker {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: 2px;
padding: 8px;
background: var(--white);
border-top: 1px solid var(--gray-200);
max-height: 180px;
overflow-y: auto;
}
.msg-emoji-picker.hidden { display: none; }
.msg-emoji-picker .emo {
font-size: 22px;
background: transparent;
border: none;
cursor: pointer;
padding: 6px 0;
border-radius: 6px;
transition: background .12s;
}
.msg-emoji-picker .emo:hover,
.msg-emoji-picker .emo:active { background: var(--gray-100); }
/* Sheet de adjunto (cámara/galería/archivo) */
.msg-adjunto-sheet {
position: fixed; inset: 0;
background: rgba(0,0,0,.45);
z-index: 9999;
display: flex;
align-items: flex-end;
justify-content: center;
animation: fadeIn .15s;
}
.msg-adjunto-sheet.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.msg-adjunto-card {
background: var(--white);
width: 100%;
max-width: 560px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: 16px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
animation: slideUp .22s ease;
}
.msg-adjunto-btn {
background: var(--gray-50);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px 6px;
display: flex; flex-direction: column;
align-items: center; gap: 6px;
font-size: 11px; font-weight: 600;
color: var(--gray-700);
cursor: pointer;
transition: background .15s, transform .1s;
}
.msg-adjunto-btn:active { transform: scale(.95); }
.msg-adjunto-btn:hover { background: var(--gray-100); }
.msg-adjunto-btn i { font-size: 22px; color: var(--ford-blue); }
/* Burbujas de audio e imagen: sin fondo ni borde — solo el contenido */
.msg-bubble.msg-bubble-audio,
.msg-bubble.msg-bubble-imagen {
background: transparent !important;
border: none !important;
padding: 0;
box-shadow: none;
max-width: 280px;
}
.msg-bubble.msg-bubble-audio .msg-time,
.msg-bubble.msg-bubble-imagen .msg-time {
color: var(--gray-700);
opacity: .9;
padding: 2px 6px 0;
text-shadow: 0 1px 2px rgba(255,255,255,.5);
}
/* Reproductor de audio (notas de voz) */
.msg-bubble audio {
display: block;
width: 260px;
max-width: 100%;
border-radius: 22px;
}
/* Vista previa de imagen — tamaño pequeño como WhatsApp */
.msg-media {
display: block;
width: 100%;
max-width: 240px;
max-height: 320px;
object-fit: cover;
border-radius: 12px;
cursor: pointer;
background: var(--gray-100);
}
/* Botón "Unirme a la llamada" en mensajes */
.msg-llamada-btn {
display: inline-flex;
align-items: center; gap: 8px;
padding: 10px 16px;
background: #43a047;
color: #fff;
border: none;
border-radius: 22px;
font-size: 14px; font-weight: 700;
cursor: pointer;
transition: background .15s;
}
.msg-llamada-btn:hover { background: #2e7d32; }
.msg-llamada-btn i { font-size: 16px; }
/* Burbuja de archivo */
.msg-file {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.25);
padding: 8px 12px;
border-radius: 8px;
text-decoration: none;
color: inherit;
max-width: 240px;
}
.msg-bubble.other .msg-file {
background: var(--gray-50);
border-color: var(--gray-200);
color: var(--gray-900);
}
.msg-file i { font-size: 22px; flex-shrink: 0; }
.msg-file span { font-size: 13px; word-break: break-word; }
/* Tabla de histórico de consumo (CFE) */
.hist-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: var(--white);
}
.hist-table th, .hist-table td {
padding: 4px 6px;
border-bottom: 1px solid var(--gray-200);
text-align: left;
}
.hist-table th {
background: var(--gray-50);
font-weight: 700;
color: var(--gray-700);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .3px;
}
.hist-table input {
width: 100%;
padding: 5px 7px;
border: 1px solid var(--gray-200);
border-radius: 5px;
font-size: 12px;
background: var(--white);
}
.hist-table input:focus {
outline: none;
border-color: var(--ford-blue);
background: rgba(33,80,160,.04);
}
.hist-table td:last-child { width: 30px; text-align: center; }
/* Botones de cámara/galería juntos */
.upload-buttons {
display: flex; gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.upload-buttons .btn { flex: 1; min-width: 100px; }
.upload-status {
font-size: 11px;
color: var(--gray-600);
margin-top: 6px;
padding: 4px 8px;
border-radius: 6px;
background: var(--gray-50);
border: 1px dashed var(--gray-200);
text-align: center;
}
.upload-status.has-file {
color: var(--green, #2e7d32);
background: #e8f5e9;
border-style: solid;
border-color: var(--green, #2e7d32);
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
transition: all var(--transition);
border: none;
cursor: pointer;
}
.btn-full { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-primary { background: var(--ford-blue); color: var(--white); }
.btn-primary:active { background: var(--ford-blue-dark); }
.btn-success { background: var(--green); color: var(--white); }
.btn-danger { background: var(--red); color: var(--white); }
/* Entrada y salida del checador rápido — grid 2 columnas, misma altura,
ambos rellenan su mitad. La salida queda deshabilitada (gris) hasta que
se haya marcado entrada del día, para evitar errores de dedo. */
/* Toggle segmentado estilo .perm-tipo-toggle: contenedor tipo "pill" gris con
las dos acciones dentro. Solo la acción disponible se ve "activa" (resaltada
y elevada); la otra queda apagada. El acoplamiento lo gobierna
_actualizarBotonesChecador() añadiendo/quitando .active. */
.check-rapido-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
background: #e3e3ea;
border-radius: 14px;
padding: 5px;
}
.check-rapido-actions .btn { width: 100%; }
/* Estado base (inactivo): plano, sin sombra, atenuado dentro de la pill. */
.btn-check-entrada,
.btn-check-salida {
background: transparent;
border: 1.5px solid transparent;
font-weight: 700;
border-radius: 10px;
transition: background .18s, color .18s, box-shadow .18s, transform .12s;
}
.btn-check-entrada { color: #1e7e34; }
.btn-check-salida { color: #b91c1c; }
/* Estado activo (la acción que toca hacer): tarjeta elevada y a color. */
.btn-check-entrada.active {
background: #d4edda;
border-color: #b3dfbb;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.btn-check-salida.active {
background: #fde2e2;
border-color: #f5b5b5;
box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.btn-check-entrada.active:active { background: #c3e6cb; transform: scale(.98); }
.btn-check-salida.active:active { background: #fbcfcf; transform: scale(.98); }
/* Estado disabled: gris claro, cursor not-allowed, sin hover. Aplica para
ambos botones del checador. */
.btn-check-entrada:disabled,
.btn-check-salida:disabled {
background: #f3f4f6;
color: var(--gray-400);
border-color: var(--gray-200);
cursor: not-allowed;
opacity: .8;
}
.btn-check-entrada:disabled:active,
.btn-check-salida:disabled:active { background: #f3f4f6; transform: none; }
.btn-outline { background: transparent; border: 1.5px solid var(--gray-200); color: var(--gray-800); }
.btn-group { display: flex; flex-direction: column; gap: 10px; }
/* ===== MODALS ===== */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 500;
display: flex;
align-items: flex-end;
backdrop-filter: blur(2px);
}
.modal-overlay.hidden { display: none; }
/* === Modales abiertos desde view-limpieza: en PC se confinan AL ANCHO del
.app-content (no del viewport entero) — así no se solapan con los drawers
ni se ven gigantes en pantallas grandes. Móvil/tablet queda full-screen
como siempre. El overlay oscuro tampoco invade los drawers. === */
@media (min-width: 1200px) {
#app-screen:has(#view-limpieza.active) .modal-overlay:not(.modal-fullscreen) {
left: var(--drawer-shift-left, 0px);
right: var(--drawer-shift-right, 0px);
align-items: center;
justify-content: center;
padding: 24px;
}
#app-screen:has(#view-limpieza.active) .modal-overlay:not(.modal-fullscreen) .modal-sheet {
width: 100%;
max-width: 720px;
max-height: 86vh;
border-radius: var(--radius-xl);
margin: 0 auto;
animation: fadeInScale .2s ease;
}
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
/* Modal a pantalla completa centrado — útil para visores de imágenes/PDFs
donde el bottom-sheet recortaba o desalineaba el contenido. */
.modal-overlay.modal-fullscreen {
align-items: center;
justify-content: center;
background: rgba(0,0,0,.85);
}
.modal-overlay.modal-fullscreen .modal-sheet.doc-viewer-sheet {
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
border-radius: 0;
background: #1a1a1a;
animation: none;
}
.doc-viewer-sheet .modal-header {
background: rgba(0,0,0,.6);
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.doc-viewer-sheet .modal-header h3 { color: #fff; }
.doc-viewer-sheet .modal-header .btn-icon { color: #fff; }
.doc-viewer-sheet #doc-viewer-body {
flex: 1;
padding: 0;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
min-height: 0; /* permite que flex-child se encoja correctamente */
}
.doc-viewer-sheet #doc-viewer-body img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: auto;
background: #000;
}
.doc-viewer-sheet #doc-viewer-body iframe {
width: 100%;
height: 100%;
min-height: 100%;
border: none;
background: #1a1a1a;
}
.modal-sheet {
background: var(--white);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 -8px 32px rgba(0,0,0,.2);
animation: slideUp .22s ease;
}
/* ===== Modal como ESPACIO a pantalla completa (vista propia, estilo
"Subir evidencia") — NO pop-up flotante con su ✕. Ocupa toda el área de la
app, con el contenido como una sección. Se activa con la clase .modal-space
(la pone openModal() para los modales de MODAL_SPACES). !important para
ganarle a los overrides por #id (modal-reporte, etc.). ===== */
.modal-overlay.modal-space {
align-items: stretch !important;
justify-content: stretch !important;
padding: 0 !important;
background: var(--white) !important; /* sin dim: es una pantalla, no un popup */
backdrop-filter: none !important;
}
.modal-overlay.modal-space > .modal-sheet,
.modal-overlay.modal-space > .modal-sheet.wifi-share-sheet {
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
max-height: 100% !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
animation: slideUp .2s ease !important;
}
/* El header del modal queda como barra superior pegada (título + ✕ como volver) */
.modal-overlay.modal-space .modal-header {
position: sticky;
top: 0;
z-index: 2;
background: var(--white);
padding: 16px 16px 14px;
}
.modal-overlay.modal-space .modal-body {
flex: 1 1 auto;
padding-bottom: 96px; /* aire para el nav inferior */
}
/* En PC/tablet la "pantalla" se confina a la franja central de la app (no tapa
los rieles laterales de menú/notificaciones) — así se nota que es una VISTA
dentro de la app y no un pop-up sobre todo el navegador. Usa --dock-left/right
(los --drawer-shift-* quedaron fijados en 0 y ya no confinan). */
@media (min-width: 1200px) {
.modal-overlay.modal-space {
left: var(--dock-left, 0px);
right: var(--dock-right, 0px);
}
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
/* Modal centrado en pantalla (en lugar de bottom-sheet) */
#modal-perfil.modal-overlay {
align-items: center;
justify-content: center;
padding: 20px;
}
/* WiFi: ventana emergente centrada (no pegada abajo) */
#modal-wifi.modal-overlay {
align-items: center;
justify-content: center;
padding: 20px;
}
/* Reporte: ventana emergente centrada, homologada con las demás */
#modal-reporte.modal-overlay { align-items: center; justify-content: center; padding: 20px; }
#modal-reporte .modal-sheet { max-height: 88vh; animation: fadeInScale .2s ease; }
#modal-wifi .modal-sheet {
max-height: 88vh;
animation: fadeInScale .2s ease;
}
#modal-perfil .modal-sheet {
max-width: 560px;
width: 100%;
max-height: 88vh;
border-radius: var(--radius-xl);
animation: fadeScaleIn .22s ease;
}
@keyframes fadeScaleIn {
from { opacity: 0; transform: scale(.95); }
to { opacity: 1; transform: scale(1); }
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 20px 16px;
border-bottom: 1px solid var(--gray-200);
flex-shrink: 0;
}
.modal-header h3 { font-size: 17px; font-weight: 700; }
.modal-header .btn-icon { color: var(--gray-600); }
.modal-header .btn-icon:hover { background: var(--gray-100); }
.modal-body {
padding: 20px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ===== ALERTS ===== */
.alert {
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
margin-bottom: 14px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.alert-danger { background: var(--red-light); color: var(--red); }
.alert-info { background: var(--blue-light); color: var(--ford-blue); }
.alert-success { background: var(--green-light); color: var(--green); }
/* ===== TOAST ===== */
.toast {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: var(--gray-900);
color: var(--white);
padding: 12px 20px;
border-radius: 100px;
font-size: 13px;
font-weight: 500;
z-index: 1000;
white-space: nowrap;
max-width: 90vw;
text-overflow: ellipsis;
overflow: hidden;
box-shadow: var(--shadow-lg);
opacity: 1;
transition: opacity .3s ease;
}
.toast.hidden { display: none; }
.toast.fade { opacity: 0; }
/* ===== INFO BLOCK ===== */
.info-block {
background: var(--gray-50);
border-radius: var(--radius-md);
padding: 14px;
margin-bottom: 16px;
font-size: 13px;
line-height: 1.7;
}
.info-block strong { color: var(--ford-blue); }
/* ===== EMPTY STATE ===== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
gap: 12px;
color: var(--gray-400);
}
.empty-state i { font-size: 48px; }
.empty-state p { font-size: 14px; text-align: center; }
/* ===== UTILS ===== */
.hidden { display: none !important; }
.text-muted { color: var(--gray-600); }
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.strike-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--red);
color: var(--white);
font-size: 11px;
font-weight: 700;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--gray-700);
cursor: pointer;
margin-bottom: 8px;
}
/* ===== CHAT =====
En la vista de chat IA el bottom-nav PERSISTE (v450). El chat-wrapper se
ajusta para que el `chat-input-bar` quede justo arriba del nav, sin espacio
muerto en PC. */
#view-chat.view.active {
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--header-h) - var(--nav-h));
}
.chat-wrapper {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
-webkit-overflow-scrolling: touch;
}
.chat-welcome {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 16px;
gap: 10px;
}
.chat-welcome-icon {
width: 64px; height: 64px;
background: var(--blue-light);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--ford-blue);
font-size: 28px;
}
.chat-welcome h3 { font-size: 18px; font-weight: 700; color: var(--ford-blue); }
.chat-welcome p { font-size: 13px; color: var(--gray-600); max-width: 280px; }
.chat-suggestions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: 8px;
}
.suggestion-chip {
padding: 7px 14px;
border-radius: 100px;
background: var(--white);
border: 1.5px solid var(--gray-200);
font-size: 12px;
font-weight: 500;
color: var(--ford-blue);
cursor: pointer;
transition: all var(--transition);
}
.suggestion-chip:hover { background: var(--blue-light); border-color: var(--ford-blue); }
/* Chat bubbles */
.chat-msg {
display: flex;
flex-direction: column;
max-width: 85%;
}
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.ai { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
padding: 11px 14px;
border-radius: 16px;
font-size: 13px;
line-height: 1.6;
white-space: pre-wrap;
}
.chat-msg.user .chat-bubble {
background: var(--ford-blue);
color: var(--white);
border-bottom-right-radius: 4px;
}
.chat-msg.ai .chat-bubble {
background: var(--white);
color: var(--gray-900);
border-bottom-left-radius: 4px;
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.chat-msg.ai .chat-bubble.loading {
color: var(--gray-400);
font-style: italic;
}
.chat-time {
font-size: 10px;
color: var(--gray-400);
margin-top: 3px;
padding: 0 4px;
}
.chat-input-bar {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 10px 12px 12px;
background: var(--white);
border-top: 1px solid var(--gray-200);
}
.chat-textarea {
flex: 1;
padding: 10px 14px;
border: 1.5px solid var(--gray-200);
border-radius: 20px;
resize: none;
font-size: 14px;
line-height: 1.4;
max-height: 100px;
overflow-y: auto;
background: var(--gray-50);
}
.chat-textarea:focus { border-color: var(--ford-blue); outline: none; }
.chat-send-btn {
width: 42px; height: 42px;
border-radius: 50%;
background: var(--ford-blue);
color: var(--white);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
transition: all var(--transition);
}
.chat-send-btn:disabled { background: var(--gray-200); color: var(--gray-400); }
.chat-send-btn:not(:disabled):active { transform: scale(.93); }
/* ===== DOCUMENTOS ===== */
.doc-card {
background: var(--white);
margin: 0 12px 8px;
border-radius: var(--radius-md);
padding: 14px 16px;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 14px;
border: 1px solid var(--gray-200);
}
.doc-icon {
width: 44px; height: 44px;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.doc-icon.pdf { background: #FEE8EA; color: #D0021B; }
.doc-icon.img { background: #EBF2FF; color: var(--ford-blue); }
.doc-icon.doc { background: #E8F5E9; color: #00A651; }
.doc-icon.file { background: var(--gray-100); color: var(--gray-600); }
.doc-info { flex: 1; min-width: 0; }
.doc-name { font-size: 14px; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-meta { font-size: 12px; color: var(--gray-600); margin-top: 2px; }
.doc-date { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.doc-link-icon { color: var(--gray-400); font-size: 14px; flex-shrink: 0; }
/* ===== ORDENAMIENTO — Selector de departamentos ===== */
.ord-intro {
margin: 14px 16px 6px;
color: var(--gray-600);
font-size: 14px;
}
.ord-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 8px 16px 24px;
}
.ord-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 18px 12px 14px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
position: relative;
text-align: center;
}
.ord-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,52,120,.10); border-color: var(--ford-blue); }
.ord-card i { font-size: 32px; color: var(--ford-blue); margin: 6px 0; }
.ord-card-tag {
position: absolute;
top: 8px;
left: 8px;
background: var(--ford-blue);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 8px;
border-radius: 999px;
letter-spacing: .3px;
}
.ord-card-title { font-size: 14px; font-weight: 600; color: var(--gray-900); }
.ord-card-sub { font-size: 11px; color: var(--gray-500); }
.ord-card-soon { opacity: .72; }
.ord-card-soon .ord-card-tag { background: var(--gray-400); }
.ord-card-soon i { color: var(--gray-400); }
/* ===== ORDENAMIENTO — Plano SVG interactivo ===== */
.plano-leyenda {
margin: 10px 16px 0;
padding: 10px 12px;
background: #eaf2fb;
border-left: 4px solid var(--ford-blue);
border-radius: 8px;
font-size: 13px;
color: var(--gray-800);
line-height: 1.45;
}
.plano-leyenda i { color: var(--ford-blue); margin-right: 4px; }
.plano-svg-wrap {
margin: 12px 16px;
background: #fafafa;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 10px;
overflow: hidden;
}
.plano-svg { width: 100%; height: auto; display: block; }
.plano-space rect {
fill: #ffffff;
stroke: #2e7d32;
stroke-width: 3;
transition: fill .15s ease, stroke .15s ease;
cursor: pointer;
}
.plano-space text {
text-anchor: middle;
dominant-baseline: middle;
font-family: var(--font);
font-size: 22px;
font-weight: 600;
fill: #1a1a1a;
pointer-events: none;
}
.plano-space:hover rect { fill: #e8f5e9; }
.plano-space.is-selected rect { fill: #fff3cd; stroke: #ff8c00; stroke-width: 4; }
.plano-wc rect { fill: #fdeef2; }
.plano-wc:hover rect { fill: #f8d7da; }
.plano-cocina rect { fill: #fff8e1; }
.plano-cocina:hover rect { fill: #ffe9a8; }
.plano-aux rect { fill: #f1f8e9; }
.plano-aux:hover rect { fill: #dcedc8; }
.plano-pasillo rect { fill: #f5f5f5; }
.plano-pasillo:hover rect { fill: #e0e0e0; }
.plano-social rect { fill: #eaf2fb; }
.plano-social:hover rect { fill: #cfe2ff; }
.plano-puerta {
fill: #66bb6a;
fill-opacity: .55;
stroke: #2e7d32;
stroke-width: 1.5;
pointer-events: none;
}
.plano-puerta-hueco {
stroke: #fff;
stroke-width: 5;
pointer-events: none;
}
.plano-puerta-marco {
stroke: #000;
stroke-width: 6;
pointer-events: none;
}
.plano-tip {
margin: 10px 16px 24px;
padding: 10px 12px;
background: #fff8e1;
border-left: 4px solid #ff8c00;
border-radius: 8px;
font-size: 12.5px;
color: var(--gray-800);
display: flex;
gap: 8px;
align-items: flex-start;
line-height: 1.45;
}
.plano-tip i { color: #ff8c00; margin-top: 2px; }
/* Panel de info de espacio (aparece al click) */
.espacio-info-panel {
margin: 12px 16px 0;
max-height: 0;
overflow: hidden;
transition: max-height .25s ease;
}
.espacio-info-panel.show { max-height: 360px; }
.espacio-info-card {
background: #fff;
border: 1px solid var(--gray-200);
border-left: 4px solid var(--ford-blue);
border-radius: 10px;
padding: 12px 14px;
box-shadow: 0 4px 14px rgba(0,52,120,.08);
}
.espacio-info-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
}
.espacio-info-head i { color: var(--ford-blue); font-size: 18px; }
.espacio-info-head h3 { margin: 0; flex: 1; font-size: 16px; color: var(--gray-900); }
.espacio-info-card p { margin: 4px 0; font-size: 13px; color: var(--gray-700); line-height: 1.45; }
.espacio-info-hint {
margin-top: 8px !important;
padding-top: 8px;
border-top: 1px dashed var(--gray-200);
font-size: 12px !important;
color: var(--gray-500) !important;
}
.espacio-info-hint i { color: #ffb300; margin-right: 4px; }
/* Categoría contraíble en el menú hamburguesa */
.menu-cat-collapsible .menu-cat-header-toggle {
display: flex;
align-items: center;
width: 100%;
background: none;
border: none;
padding: 8px 14px;
cursor: pointer;
font: inherit;
color: inherit;
text-align: left;
}
.menu-cat-collapsible .menu-cat-toggle-icon {
margin-left: auto;
font-size: 12px;
color: var(--gray-500);
transition: transform .2s ease;
}
.menu-cat-collapsible.collapsed .menu-cat-toggle-icon {
transform: rotate(-90deg);
}
.menu-cat-collapsible.collapsed .menu-cat-items {
display: none;
}
/* Colapso UNIVERSAL: TODAS las categorías del menú inician colapsadas (via
_initMenuCatCollapse) y su header se puede tocar para abrir/cerrar. */
.menu-cat.collapsed .menu-cat-items { display: none; }
.menu-cat > .menu-cat-header { cursor: pointer; }
.menu-cat-toggle-icon { margin-left: auto; font-size: 12px; color: var(--gray-500); transition: transform .2s ease; }
.menu-cat.collapsed .menu-cat-toggle-icon { transform: rotate(-90deg); }
/* ============================================================================
COLOR INVERSION (v447) — Topbar + drawers: fondo BLANCO, texto/iconos AZUL
FORD. Antes era al revés (fondo azul, texto blanco). Solo se invierte; la
estructura no cambia.
============================================================================ */
/* Barra superior con el mismo degradado glossy de los botones del menú admin. */
.app-topbar { background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%); }
.app-header {
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%);
/* Sin border-bottom NI sombra (v464) — el usuario pidió pegar el banner
a la app-header sin separación visual. */
box-shadow: none;
}
.app-header .btn-icon,
.app-header .btn-icon i { color: var(--ford-blue); }
/* Barrita de Atrás/título/Opciones en BLANCO limpio: se distingue del header
degradado (no se confunden) y separa con una línea sutil. */
.view-toolbar-slot { background: var(--white) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 -1px 0 rgba(13,30,70,.08); }
.view-toolbar-slot > .view-toolbar { background: transparent !important; }
/* Botón-barra de búsqueda del header — borde azul tenue, texto azul Ford */
.header-search-btn {
border: 1px solid rgba(0,52,120,.30);
color: var(--ford-blue);
}
.header-search-btn:hover,
.header-search-btn:focus-visible {
background: rgba(0,52,120,.06);
border-color: rgba(0,52,120,.50);
}
.header-search-placeholder,
.header-search-placeholder.greeting { color: var(--ford-blue); }
.header-search-btn.greeting-active {
background: rgba(0,52,120,.06);
border-color: rgba(0,52,120,.18);
}
.header-search-btn.greeting-active .header-search-placeholder {
color: var(--ford-blue);
text-shadow: none;
}
/* Header drawers (menú hamburguesa + notificaciones) — MISMO degradado que la
app-header para que se vea en continuidad al abrir el drawer. */
.menu-drawer-header,
.notif-drawer .menu-drawer-header {
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%);
color: var(--ford-blue);
border-bottom: 1px solid rgba(0,52,120,.15);
}
.menu-drawer-header .btn-icon,
.menu-drawer-header .btn-icon i { color: var(--ford-blue); }
.menu-drawer-title { color: var(--ford-blue); }
/* Search bar dentro de los drawers — borde y texto azul Ford */
.menu-drawer-search-inline {
border: 1px solid rgba(0,52,120,.28);
color: var(--ford-blue);
}
.menu-drawer-search-inline::placeholder { color: rgba(0,52,120,.55); font-weight: 500; }
.menu-drawer-search-inline:hover { background: transparent; border-color: rgba(0,52,120,.28); }
.menu-drawer-search-inline:focus,
.menu-drawer-search-inline:not(:placeholder-shown) {
background: rgba(0,52,120,.06);
border-color: var(--ford-blue);
color: var(--ford-blue);
}
.menu-drawer-search-inline:focus::placeholder,
.menu-drawer-search-inline:not(:placeholder-shown)::placeholder {
color: rgba(0,52,120,.45);
}
/* ============================================================================
Categorías del menú hamburguesa COLAPSADAS DESDE EL INICIO (v447).
Cualquier `.menu-cat.collapsed` esconde sus items. Los headers tipo div
reciben chevron auto vía ::after + cursor pointer (el JS añade el click).
Las categorías que ya tenían `.menu-cat-collapsible` con su botón
`.menu-cat-header-toggle` mantienen su comportamiento original.
============================================================================ */
.menu-cat.collapsed > .menu-cat-items { display: none; }
.menu-cat > .menu-cat-header:not(.menu-cat-header-toggle) {
cursor: pointer;
user-select: none;
}
.menu-cat > .menu-cat-header:not(.menu-cat-header-toggle)::after {
content: '\f078'; /* fa-chevron-down */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-left: auto;
font-size: 11px;
color: var(--gray-500);
transition: transform .18s ease;
}
.menu-cat.collapsed > .menu-cat-header:not(.menu-cat-header-toggle)::after {
transform: rotate(-90deg);
}
/* ===== ORDENAMIENTO — Editor de cuadrícula ===== */
.ord-edit-body { padding: 0; }
.ord-pestanas {
display: flex;
gap: 4px;
padding: 0 12px 8px;
background: transparent;
border-top: 1px solid var(--gray-200);
margin-top: 6px;
padding-top: 8px;
overflow-x: auto;
align-items: stretch;
}
.ord-pestana {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
background: #f3f4f6;
border: 1px solid var(--gray-200);
border-top: none;
border-radius: 0 0 8px 8px;
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
cursor: pointer;
flex-shrink: 0;
max-width: 200px;
}
.ord-pestana.active {
background: var(--ford-blue);
color: #fff;
border-color: var(--ford-blue);
}
.ord-pestana-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.ord-pestana-act {
background: rgba(0,0,0,.08);
border: none;
border-radius: 999px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
cursor: pointer;
font-size: 10px;
}
.ord-pestana.active .ord-pestana-act { background: rgba(255,255,255,.22); }
.ord-pestana-add {
background: transparent;
border: 1px dashed var(--gray-300);
border-top: none;
border-radius: 0 0 8px 8px;
padding: 8px 12px;
color: var(--ford-blue);
cursor: pointer;
font-weight: 700;
font-size: 13px;
flex-shrink: 0;
}
.ord-pestana-add:hover { background: #eaf2fb; }
.ord-tools {
display: none;
gap: 6px;
padding: 10px 12px;
background: #fff;
border-bottom: 1px solid var(--gray-200);
overflow-x: auto;
}
.ord-edit-body.ord-edit-mode .ord-tools { display: flex; }
.ord-tool {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 10px;
min-width: 58px;
border: 1px solid var(--gray-200);
border-radius: 10px;
background: #fff;
cursor: pointer;
font-size: 11px;
color: var(--gray-700);
transition: background .12s ease, border-color .12s ease, color .12s ease;
flex-shrink: 0;
}
.ord-tool i, .ord-tool .ord-tool-glyph { font-size: 16px; color: var(--ford-blue); }
.ord-tool .ord-tool-glyph { font-weight: 700; line-height: 1; }
.ord-tool.active {
background: var(--ford-blue);
border-color: var(--ford-blue);
color: #fff;
}
.ord-tool.active i, .ord-tool.active .ord-tool-glyph { color: #fff; }
.ord-tool-danger i { color: #b91c1c; }
.ord-tool-danger { border-color: #fecaca; }
.ord-fill-dot {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.ord-tool-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.ord-tool-emoji {
font-size: 18px;
line-height: 1;
}
.ord-emoji-picker {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 200;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
width: 280px;
}
.ord-emoji-picker.hidden { display: none; }
.ord-emoji-picker-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--gray-500);
margin-bottom: 8px;
}
.ord-emoji-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 4px;
}
.ord-emoji-opt {
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 18px;
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .12s, transform .08s;
}
.ord-emoji-opt:hover { background: #eaf2fb; transform: scale(1.08); }
.ord-emoji-opt.active { background: var(--ford-blue); color: #fff; }
.ord-hint {
margin: 10px 14px 0;
padding: 8px 10px;
background: #eaf2fb;
border-left: 3px solid var(--ford-blue);
border-radius: 6px;
font-size: 12px;
color: var(--gray-800);
line-height: 1.4;
}
.ord-canvas-area {
position: relative;
margin: 10px 14px;
}
.ord-canvas-wrap {
position: relative;
background: transparent;
border: 1px solid var(--gray-200);
border-radius: 10px;
overflow: auto;
width: auto;
max-height: 500px;
height: 500px;
touch-action: pan-x pan-y;
}
.ord-canvas-wrap.expanded {
position: fixed;
inset: 0;
margin: 0;
border-radius: 0;
max-height: none;
height: 100vh;
width: 100vw;
z-index: 9000;
background: #fff;
}
.ord-canvas-area.expanded {
position: static;
}
.ord-canvas-area.expanded .ord-canvas-controls {
position: fixed;
bottom: 16px;
left: 16px;
z-index: 9100;
}
/* === Herramientas flotantes en pantalla completa (estilo Miro, vertical, derecha) === */
/* Cuando .ord-tools recibe la clase .ord-tools-floating (vía JS al expandir el canvas) */
.ord-tools.ord-tools-floating {
display: flex !important;
position: absolute !important;
top: 8px !important;
right: 8px !important;
left: auto !important;
bottom: auto !important;
width: auto !important;
max-height: calc(100% - 16px) !important;
flex-direction: column !important;
align-items: stretch !important;
z-index: 50 !important;
background: rgba(255,255,255,.97) !important;
border: 1px solid var(--gray-200) !important;
border-radius: 10px !important;
box-shadow: 0 6px 22px rgba(0,0,0,.22) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
overflow-x: hidden !important;
overflow-y: auto !important;
padding: 4px !important;
gap: 3px !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Botones a la mitad del tamaño normal cuando la barra está flotando */
.ord-tools.ord-tools-floating .ord-tool {
min-width: 30px !important;
padding: 4px 5px !important;
font-size: 0 !important; /* oculta el label de texto */
gap: 0 !important;
border-radius: 6px !important;
}
.ord-tools.ord-tools-floating .ord-tool i,
.ord-tools.ord-tools-floating .ord-tool .ord-tool-glyph,
.ord-tools.ord-tools-floating .ord-tool .ord-tool-emoji {
font-size: 12px !important;
}
.ord-tools.ord-tools-floating .ord-fill-dot {
width: 10px !important;
height: 10px !important;
}
/* El span "flex:1" inline (separador) ya no debe expandir en columna */
.ord-tools.ord-tools-floating > span[style*="flex:1"] {
flex: 0 0 3px !important;
}
/* Picker de emojis DESACOPLADO: panel separado a la izquierda de la barra de herramientas */
.ord-emoji-picker.ord-emoji-picker-detached {
position: absolute !important;
top: 8px !important;
right: 60px !important; /* a la izquierda de la barra flotante (ancho ~46px + gap) */
left: auto !important;
bottom: auto !important;
z-index: 60 !important;
width: 220px !important;
max-height: calc(100% - 16px) !important;
overflow-y: auto !important;
background: rgba(255,255,255,.98) !important;
border: 1px solid var(--gray-200) !important;
border-radius: 12px !important;
box-shadow: 0 6px 22px rgba(0,0,0,.22) !important;
padding: 10px !important;
}
.ord-emoji-picker.ord-emoji-picker-detached .ord-emoji-grid {
grid-template-columns: repeat(4, 1fr) !important;
}
.ord-emoji-picker.ord-emoji-picker-detached .ord-emoji-opt {
width: 36px !important;
height: 36px !important;
font-size: 17px !important;
}
/* Picker de emojis (legacy): cuando las tools están flotando, sale hacia la IZQUIERDA del botón Pin */
.ord-tools.ord-tools-floating .ord-emoji-picker {
top: 0 !important;
left: auto !important;
right: calc(100% + 8px) !important;
z-index: 9600 !important;
}
/* Toolbar de selección al frente cuando estamos en fullscreen */
.ord-canvas-area.expanded .ord-sel-toolbar {
position: fixed !important;
top: 12px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
z-index: 9400 !important;
}
.ord-sel-toolbar {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 4px;
background: rgba(0,52,120,.95);
border-radius: 10px;
padding: 5px 7px;
z-index: 11;
box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.ord-sel-toolbar.hidden { display: none; }
.ord-sel-btn {
background: rgba(255,255,255,.12);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ord-sel-btn:hover { background: rgba(255,255,255,.25); }
.ord-sel-btn.ord-sel-btn-danger { background: rgba(220,38,38,.85); }
.ord-sel-btn.ord-sel-btn-danger:hover { background: rgba(220,38,38,1); }
.ord-canvas-controls {
position: absolute;
bottom: 8px;
left: 8px;
z-index: 10;
display: flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.92);
border-radius: 10px;
padding: 4px 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.ord-zoom-btn {
background: var(--ford-blue);
color: #fff;
border: none;
border-radius: 6px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 12px;
}
.ord-zoom-btn:hover { background: #00255a; }
.ord-zoom-label {
font-size: 12px;
font-weight: 700;
color: var(--gray-700);
min-width: 42px;
text-align: center;
}
.ord-fullscreen-btn {
background: rgba(0,52,120,.92);
color: #fff;
border: none;
border-radius: 6px;
padding: 6px 10px;
font-size: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 5px;
}
.ord-fullscreen-btn:hover { background: var(--ford-blue); }
#ord-canvas {
display: block;
background: transparent;
cursor: crosshair;
image-rendering: crisp-edges;
}
.ord-leyenda {
margin: 10px 14px 24px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 10px;
padding: 12px;
}
.ord-leyenda-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
cursor: pointer;
user-select: none;
}
.ord-leyenda-chevron {
font-size: 12px;
color: var(--gray-600);
transition: transform .18s ease;
}
.ord-leyenda.collapsed .ord-leyenda-chevron {
transform: rotate(-90deg);
}
.ord-leyenda.collapsed .ord-leyenda-head {
margin-bottom: 0;
}
.ord-leyenda.collapsed .ord-leyenda-list {
display: none;
}
.ord-leyenda-head h3 {
margin: 0;
font-size: 14px;
color: var(--gray-900);
}
.ord-leyenda-head h3 i { color: var(--ford-blue); margin-right: 4px; }
.ord-leyenda-list { display: flex; flex-direction: column; gap: 6px; }
.ord-leyenda-empty {
font-size: 12px;
color: var(--gray-500);
font-style: italic;
padding: 4px 0;
}
.ord-leyenda-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
background: #f9fafb;
border-radius: 8px;
font-size: 13px;
}
.ord-leyenda-num {
background: var(--ford-blue);
color: #fff;
font-weight: 700;
min-width: 26px;
height: 26px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.ord-leyenda-tag {
background: #eaf2fb;
color: var(--ford-blue);
font-weight: 700;
border: 1px solid var(--ford-blue);
height: 26px;
border-radius: 999px;
display: inline-flex;
align-items: center;
padding: 0 10px;
font-size: 12px;
white-space: nowrap;
flex-shrink: 0;
}
.ord-leyenda-item input.ord-leyenda-name {
flex: 1;
border: 1px solid transparent;
background: transparent;
padding: 4px 6px;
font-size: 13px;
border-radius: 4px;
}
.ord-leyenda-item input.ord-leyenda-name:focus {
outline: none;
border-color: var(--ford-blue);
background: #fff;
}
.ord-leyenda-item .ord-leyenda-del {
background: none;
border: none;
color: #b91c1c;
cursor: pointer;
font-size: 14px;
padding: 4px 6px;
}
/* Modal de detalle del pin */
.ord-pin-modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.ord-pin-modal.hidden { display: none; }
.ord-pin-modal-card {
background: #fff;
border-radius: 14px;
max-width: 400px;
width: 100%;
padding: 20px;
box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.ord-pin-modal-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.ord-pin-modal-head i {
color: #f59e0b;
font-size: 22px;
}
.ord-pin-modal-head h3 {
margin: 0;
flex: 1;
font-size: 17px;
color: var(--gray-900);
}
/* Controles de zoom dentro del lightbox del croquis (50% – 200%) */
.mdr-zoom-ctrl {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--gray-100);
border-radius: 999px;
padding: 4px 8px;
font-size: 13px;
font-weight: 600;
color: var(--ford-blue);
}
.mdr-zoom-ctrl .btn-icon {
width: 26px; height: 26px;
font-size: 12px;
color: var(--ford-blue);
}
.mdr-zoom-ctrl .btn-icon:hover { background: rgba(0,52,120,.10); }
.mdr-zoom-ctrl span {
min-width: 44px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.ord-pin-modal-body {
font-size: 14px;
color: var(--gray-700);
line-height: 1.5;
margin: 8px 0 16px;
white-space: pre-wrap;
word-break: break-word;
}
.ord-pin-modal-foot {
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
}
/* Modal de etiqueta de texto: grid de opciones predefinidas */
.ord-texto-opts {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ord-texto-opts.hidden { display: none; }
.ord-texto-opt {
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 8px;
padding: 10px 8px;
font-size: 13px;
font-weight: 600;
color: var(--gray-800);
cursor: pointer;
transition: background .12s, border-color .12s, transform .08s;
}
.ord-texto-opt:hover { background: #eaf2fb; border-color: var(--ford-blue); }
.ord-texto-opt.active {
background: var(--ford-blue);
border-color: var(--ford-blue);
color: #fff;
}
.ord-texto-opt-other {
grid-column: 1 / -1;
background: #fff8c4;
border-color: #f5d847;
}
.ord-texto-opt-other:hover { background: #ffeb8a; border-color: #d4a900; }
.ord-texto-libre.hidden { display: none; }
.ord-texto-libre input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--gray-200);
border-radius: 8px;
font-size: 14px;
margin-bottom: 10px;
}
.ord-texto-libre-actions {
display: flex;
justify-content: space-between;
gap: 8px;
}
/* ===== Inmuebles (base maestra de departamentos/casas) ===== */
.inm-lista { padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.inm-grupo {
border: 1px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.inm-grupo-head {
background: linear-gradient(135deg, #003478 0%, #2150a0 100%);
color: #fff;
font-weight: 700;
font-size: 13px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 8px;
}
.inm-grupo-count {
background: rgba(255,255,255,.25);
border-radius: 999px;
padding: 1px 9px;
font-size: 11px;
font-weight: 700;
}
.inm-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid var(--gray-100);
}
.inm-row:last-child { border-bottom: none; }
.inm-row-icon {
width: 36px; height: 36px;
border-radius: 8px;
background: var(--blue-light, #eaf2fb);
color: var(--ford-blue);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px;
flex: 0 0 36px;
}
.inm-row-body { flex: 1; min-width: 0; }
.inm-row-title { font-weight: 700; font-size: 13.5px; color: var(--gray-900); }
.inm-row-sub { font-size: 11px; color: var(--gray-600); text-transform: capitalize; display: flex; gap: 6px; align-items: center; }
.inm-row-obs { font-size: 11px; color: var(--gray-500); margin-top: 2px; font-style: italic; }
.inm-row-meta {
display: inline-block;
padding: 0 6px;
background: var(--gray-100);
border-radius: 4px;
font-size: 10.5px;
color: var(--gray-700);
}
/* Preview del código en "Generar código de ingreso" — recuadro destacado */
.gen-codigo-preview {
margin: 14px 0;
padding: 14px;
background: linear-gradient(135deg, #003478 0%, #1d4ed8 100%);
color: #fff;
border-radius: 10px;
text-align: center;
}
.gen-codigo-preview-label {
margin: 0 0 6px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
opacity: .85;
}
.gen-codigo-preview-val {
margin: 0 0 6px;
font-size: 28px;
font-weight: 800;
letter-spacing: 5px;
font-family: 'Courier New', monospace;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.gen-codigo-preview-hint {
margin: 6px 0 0;
font-size: 11.5px;
opacity: .9;
}
/* Resultado del código generado */
.gen-codigo-resultado-card {
background: #ecfdf5;
border: 2px solid #16a34a;
border-radius: 10px;
padding: 14px;
}
.gen-codigo-resultado-head {
font-size: 13px;
font-weight: 700;
color: #15803d;
}
.gen-codigo-resultado-head i { margin-right: 6px; }
/* Bloque de avatar dentro del modal "Editar usuario" (admin) */
.edit-avatar-row {
display: flex; align-items: center; gap: 14px;
background: var(--gray-50, #f9fafb);
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 12px 14px;
margin: 4px 0 10px;
}
.edit-avatar-preview {
width: 64px; height: 64px; flex-shrink: 0;
border-radius: 50%;
background: #e5e7eb;
display: inline-flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 800; color: var(--ford-blue);
overflow: hidden;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0,52,120,.12);
}
.edit-avatar-preview img {
width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
/* Historial de códigos generados — tabla compacta debajo del formulario.
Verde = activo · Rojo = vencido / cancelado · 👁️ = link abierto. */
.gen-historial-wrap {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--gray-200);
}
.gen-historial-title {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 700; color: #1f2937;
margin: 0 0 4px;
}
.gen-historial-title > i:first-child { color: var(--ford-blue); font-size: 13px; }
.gen-historial-refresh {
margin-left: auto;
width: 28px; height: 28px;
border-radius: 6px;
background: transparent;
border: 1px solid var(--gray-200);
color: var(--gray-600);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
}
.gen-historial-refresh:hover { background: var(--gray-100); color: var(--ford-blue); }
.gen-historial-sub {
font-size: 11.5px; color: var(--gray-600); margin: 0 0 12px; line-height: 1.5;
}
.gen-historial-tabla-wrap {
overflow-x: auto;
border: 1px solid var(--gray-200);
border-radius: 10px;
background: #fff;
}
.gen-historial-tabla {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
}
.gen-historial-tabla thead th {
background: #f3f4f6;
font-weight: 700;
text-align: left;
padding: 8px 10px;
border-bottom: 1px solid var(--gray-200);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--gray-600);
white-space: nowrap;
}
.gen-historial-tabla tbody td {
padding: 8px 10px;
border-bottom: 1px solid var(--gray-100);
vertical-align: middle;
}
.gen-historial-tabla tbody tr:last-child td { border-bottom: none; }
.gen-historial-tabla tbody tr:hover { background: #f9fafb; }
.gen-historial-tabla .gh-codigo {
font-family: 'SF Mono', Menlo, monospace;
font-size: 11px;
font-weight: 700;
color: var(--ford-blue);
white-space: nowrap;
}
.gen-historial-tabla .gh-email {
max-width: 180px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-weight: 600;
color: #1f2937;
}
.gen-historial-tabla .gh-display {
font-size: 11.5px; color: var(--gray-700);
white-space: nowrap;
}
.gen-historial-tabla .gh-fecha {
font-size: 11px; color: var(--gray-600);
white-space: nowrap;
}
.gh-estado {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
border-radius: 100px;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
white-space: nowrap;
}
.gh-estado.gh-activo {
background: #dcfce7; color: #166534;
}
.gh-estado.gh-vencido,
.gh-estado.gh-cancelado {
background: #fee2e2; color: #991b1b;
}
.gh-estado .gh-eye {
margin-left: 4px;
color: #16a34a;
font-size: 11px;
}
.gh-estado.gh-vencido .gh-eye,
.gh-estado.gh-cancelado .gh-eye {
color: #6b7280;
}
.gh-acciones {
display: flex; gap: 4px;
justify-content: flex-end;
}
.gh-acciones button,
.gh-acciones a {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 6px;
background: transparent;
border: 1px solid var(--gray-200);
color: var(--gray-600);
cursor: pointer;
font-size: 11px;
text-decoration: none;
}
.gh-acciones button:hover,
.gh-acciones a:hover {
background: var(--gray-100); color: var(--ford-blue);
}
.gh-acciones .gh-disabled {
opacity: .35; cursor: not-allowed;
}
.gen-historial-mas-wrap {
margin-top: 12px;
text-align: center;
}
/* Link box público (respaldo del correo) — aparece bajo el código si el
correo no llega; admin lo comparte por WhatsApp. */
.gen-codigo-link-box {
margin-top: 12px;
padding: 12px 14px;
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 10px;
}
.gen-codigo-link-label {
font-size: 11px; font-weight: 700; color: #1e40af;
text-transform: uppercase; letter-spacing: .4px;
margin-bottom: 6px;
}
.gen-codigo-link-url {
font-family: 'SF Mono', Menlo, monospace;
font-size: 11.5px;
color: #1e3a5f;
background: #fff;
border: 1px solid #bfdbfe;
border-radius: 8px;
padding: 8px 10px;
word-break: break-all;
cursor: pointer;
user-select: all;
}
.gen-codigo-link-acciones {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 8px;
}
.gen-codigo-link-aviso {
margin: 8px 0 0;
font-size: 11px;
color: #92400e;
background: #fef9c3;
border-radius: 6px;
padding: 6px 8px;
line-height: 1.5;
}
.gen-codigo-resultado-val {
font-size: 26px;
font-weight: 800;
letter-spacing: 5px;
font-family: 'Courier New', monospace;
color: var(--ford-blue);
margin: 8px 0;
padding: 10px 14px;
background: #fff;
border-radius: 8px;
text-align: center;
cursor: pointer;
user-select: all;
}
.gen-codigo-resultado-val:hover { background: var(--blue-light, #eaf2fb); }
/* Input con prefijo "PX" fijo — el usuario solo teclea los 5 dígitos.
Visualmente: pill con el prefijo a la izquierda y el campo numérico a la derecha. */
.cod-inmueble-wrap {
display: flex;
align-items: stretch;
border: 1px solid var(--gray-300);
border-radius: 10px;
background: #fff;
overflow: hidden;
transition: border-color .15s, box-shadow .15s;
}
.cod-inmueble-wrap:focus-within {
border-color: var(--ford-blue);
box-shadow: 0 0 0 3px rgba(0,52,120,.12);
}
.cod-inmueble-prefix {
display: inline-flex;
align-items: center;
padding: 0 14px;
background: var(--ford-blue);
color: #fff;
font-weight: 800;
font-size: 18px;
letter-spacing: 2px;
font-family: 'Courier New', monospace;
}
.cod-inmueble-wrap input {
flex: 1;
border: none;
outline: none;
padding: 12px 14px;
font-size: 22px;
font-weight: 700;
letter-spacing: 8px;
font-family: 'Courier New', monospace;
text-align: center;
background: transparent;
color: var(--gray-900);
width: 100%;
min-width: 0;
}
.cod-inmueble-wrap input::placeholder { color: var(--gray-300); letter-spacing: 6px; }
/* Código de acceso (privado, se entrega al residente) — pill clickeable que copia al portapapeles */
.inm-row-codigo {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
background: var(--blue-light, #eaf2fb);
color: var(--ford-blue);
border: 1px dashed var(--ford-blue);
border-radius: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1px;
font-family: 'Courier New', monospace;
cursor: pointer;
margin-left: 4px;
}
.inm-row-codigo:hover { background: var(--ford-blue); color: #fff; }
.inm-row-codigo.missing {
background: #fde2e2;
color: #b91c1c;
border-color: #fca5a5;
cursor: default;
font-family: inherit;
letter-spacing: 0;
}
/* Vista agrupada de usuarios por edificio + departamento */
.usuarios-grupo {
margin: 8px 16px 14px;
border: 1px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
background: #fff;
}
.usuarios-grupo-head {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: linear-gradient(135deg, #003478 0%, #2150a0 100%);
color: #fff;
font-weight: 600;
font-size: 13px;
}
.usuarios-grupo-title { flex: 1; }
.usuarios-grupo-count {
background: rgba(255,255,255,.25);
border-radius: 999px;
padding: 2px 10px;
font-size: 11px;
font-weight: 700;
}
.usuarios-grupo-empty .usuarios-grupo-head {
background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
}
.usuarios-grupo-vacio {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 14px 10px;
font-size: 12px;
color: var(--gray-600);
background: #fafafa;
}
.usuarios-grupo-vacio i.fa-inbox { font-size: 18px; color: var(--gray-400); }
/* Rango Desde/Hasta agrupado en una tarjeta con separador visual */
.perm-check { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--gray-800); margin:2px 0 12px; cursor:pointer; }
.perm-check input { width:18px; height:18px; accent-color:var(--ford-blue); }
.perm-turnos { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.perm-turno { padding:11px 8px; border:1.5px solid var(--gray-200); border-radius:11px; background:#fff; color:var(--gray-800); font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; }
.perm-turno.active { border-color:var(--ford-blue); background:var(--blue-light,#EBF2FF); color:var(--ford-blue); }
.perm-rango { border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #fff; }
.perm-rango-bloque { padding: 12px 12px 2px; }
.perm-rango-tit { font-size: 11.5px; font-weight: 800; color: var(--ford-blue); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; display: flex; align-items: center; gap: 7px; }
.perm-rango-bloque .form-group { margin-bottom: 10px; }
.perm-rango-sep { position: relative; height: 0; border-top: 1px dashed var(--gray-300); margin: 4px 12px; text-align: center; }
.perm-rango-sep span { position: relative; top: -9px; background: #fff; padding: 0 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--gray-500); }
.perm-resumen {
background: #eaf2fb;
border-left: 3px solid var(--ford-blue);
border-radius: 8px;
padding: 10px 12px;
margin: 10px 0 14px;
font-size: 13px;
color: var(--gray-800);
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
}
.perm-resumen i { color: var(--ford-blue); }
.perm-resumen.invalid {
background: #fef2f2;
border-left-color: #b91c1c;
color: #b91c1c;
}
.perm-resumen.invalid i { color: #b91c1c; }
/* Tag (sigla del depto) dentro de un item del menú */
.menu-item-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 22px;
padding: 0 7px;
background: var(--ford-blue);
color: #fff;
font-size: 5.5px;
font-weight: 700;
border-radius: 999px;
margin-right: 10px;
letter-spacing: .3px;
}
/* === Barra de cuadernos arriba de la lista de notas (estilo OneNote) ===
Chips horizontales scrollables — uno por cada cuaderno. "Todos" siempre
primero. El activo se marca con fondo Ford Blue. */
.notas-cuadernos-bar {
display: flex;
flex-direction: column; /* dos filas: filtros arriba, libretas abajo */
gap: 6px;
padding: 6px 16px 10px;
}
.cuadernos-fila {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cuadernos-fila::-webkit-scrollbar { display: none; }
.cuadernos-libretas { padding-top: 2px; }
/* ===== Tiles grandes de libretas (icono color + nombre debajo, reordenables) ===== */
.libretas-tiles {
display: flex; gap: 14px; overflow-x: auto;
padding: 6px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.libretas-tiles::-webkit-scrollbar { display: none; }
.libreta-tile {
flex: 0 0 auto; width: 78px;
display: flex; flex-direction: column; align-items: center; gap: 5px;
background: transparent; border: none; cursor: pointer; padding: 2px;
font-family: inherit;
}
.libreta-tile-ico {
position: relative;
width: 62px; height: 62px; border-radius: 18px;
display: flex; align-items: center; justify-content: center;
/* Invertido: fondo transparente + glifo del color de la libreta, sin borde */
background: transparent;
color: var(--lib, var(--ford-blue));
font-size: 32px;
border: none;
/* Sombra flotante (SYNC) */
box-shadow: 0 1px 3px rgba(16,24,40,.12), 0 4px 10px rgba(16,24,40,.16);
transition: transform .12s, box-shadow .15s;
}
.libreta-tile:hover .libreta-tile-ico {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16,24,40,.14), 0 10px 22px rgba(16,24,40,.20);
}
/* Contador como badge de notificación (círculo) en la esquina del icono */
.libreta-tile-badge {
position: absolute; top: -5px; right: -5px;
min-width: 19px; height: 19px; padding: 0 5px;
border-radius: 999px; background: #ef4444; color: #fff;
font-size: 10.5px; font-weight: 800; line-height: 1;
display: flex; align-items: center; justify-content: center;
border: 2px solid #fff;
}
.libreta-tile.active .libreta-tile-ico {
/* Activa: sombra más marcada (sin línea/anillo de color) */
box-shadow: 0 4px 8px rgba(16,24,40,.16), 0 10px 22px rgba(16,24,40,.22);
}
.libreta-tile:active .libreta-tile-ico { transform: scale(.93); }
.libreta-tile-name {
font-size: 11.5px; font-weight: 600; color: var(--gray-800);
max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.libreta-tile.active .libreta-tile-name { color: var(--lib, var(--ford-blue)); }
.libreta-tile-count { font-size: 10px; font-weight: 700; color: var(--gray-500); }
.libreta-tile-nueva .libreta-tile-ico {
background: transparent; color: var(--gray-400);
border: 2px dashed var(--gray-300); box-shadow: none;
}
.libreta-tile-ghost { opacity: .4; }
/* ===== Notas: buscador (título/contenido) ===== */
.notas-buscador {
position: relative;
display: flex; align-items: center;
margin: 4px 0 0;
}
.notas-buscador-ico {
position: absolute; left: 12px;
color: var(--gray-400); font-size: 13px; pointer-events: none;
}
/* Sube especificidad para ganarle a la regla global input[type="search"] */
.notas-buscador input.notas-buscar-input {
width: 100%;
padding: 9px 34px 9px 34px;
border: 1px solid var(--gray-200);
border-radius: 12px;
background: var(--gray-50, #f6f7f9);
font-size: 14px; font-family: inherit; color: var(--gray-900);
outline: none;
transition: border-color .15s, box-shadow .15s, background .15s;
-webkit-appearance: none; appearance: none;
}
.notas-buscar-input::-webkit-search-cancel-button { display: none; }
.notas-buscar-input:focus {
border-color: var(--ford-blue);
background: #fff;
box-shadow: 0 0 0 3px rgba(16,110,234,.12);
}
.notas-buscar-clear {
position: absolute; right: 8px;
width: 24px; height: 24px; border: none; background: transparent;
color: var(--gray-400); cursor: pointer; border-radius: 999px;
display: none; align-items: center; justify-content: center; font-size: 13px;
}
.notas-buscar-clear:hover { background: var(--gray-100); color: var(--gray-600); }
.notas-buscar-resultados { display: none; }
.notas-buscar-resultados.activo {
display: flex; flex-direction: column; gap: 6px;
margin-top: 6px; max-height: 52vh; overflow-y: auto;
padding: 2px;
}
.notas-buscar-vacio {
padding: 14px 8px; text-align: center;
color: var(--gray-500); font-size: 13px;
}
.notas-buscar-item {
display: flex; flex-direction: column; gap: 3px;
text-align: left; width: 100%;
padding: 10px 12px; border: 1px solid var(--gray-200);
border-left: 4px solid var(--nota-accent, #f2c94c);
border-radius: 10px; background: #fff; cursor: pointer;
font-family: inherit;
transition: box-shadow .12s, transform .08s;
}
.notas-buscar-item:hover { box-shadow: 0 2px 8px rgba(16,24,40,.10); }
.notas-buscar-item:active { transform: scale(.99); }
.notas-buscar-item-tit {
font-size: 14px; font-weight: 700; color: var(--gray-900);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notas-buscar-item-snip {
font-size: 12.5px; color: var(--gray-600);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.notas-buscar-lib {
font-size: 11px; color: var(--gray-500); font-weight: 600;
display: inline-flex; align-items: center; gap: 4px; margin-top: 1px;
}
.notas-buscar-item .search-hl, .notas-buscar-resultados .search-hl {
background: #fff3bf; color: inherit; border-radius: 3px; padding: 0 1px;
}
/* Acento por color de la nota (reusa la paleta nota-color-*) */
.notas-buscar-item.nota-color-amarillo { --nota-accent: #f5c518; }
.notas-buscar-item.nota-color-rosa { --nota-accent: #e91e63; }
.notas-buscar-item.nota-color-azul { --nota-accent: #1976d2; }
.notas-buscar-item.nota-color-verde { --nota-accent: #43a047; }
.notas-buscar-item.nota-color-morado { --nota-accent: #8e24aa; }
.notas-buscar-item.nota-color-gris { --nota-accent: #757575; }
/* ===== Notas: botones glossy "tipo sync" (un solo "Libretas" + "Compartido") ===== */
/* ===== Recibos de servicios: listado con miniatura + acciones ===== */
.sf-recibo-item {
display: flex; align-items: center; gap: 10px;
border: 1px solid #e5e7eb; border-radius: 12px; padding: 8px 10px; background: #fff;
}
.sf-recibo-thumb {
width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
display: block; background: #f3f4f6; text-decoration: none;
}
.sf-recibo-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-recibo-thumb-ico {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
color: #dc2626; font-size: 22px; background: #fef2f2;
}
.sf-recibo-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-recibo-info b {
font-size: 13px; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-recibo-info small { font-size: 11px; color: #9ca3af; }
.sf-recibo-acc { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.sf-recibo-acc a, .sf-recibo-acc button {
width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
display: flex; align-items: center; justify-content: center; border-radius: 8px;
color: #4b5563; font-size: 14px; text-decoration: none;
}
.sf-recibo-acc a:active, .sf-recibo-acc button:active { background: #f3f4f6; }
/* ===== Recorridos (street-view por zona) ===== */
.rec-card {
background: #fff; border: 1px solid #eef0f4; border-radius: 14px;
padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.rec-card-h { font-size: 15px; color: #1f2937; }
#view-recorridos .rec-card .btn { text-decoration: none; }
.rec-lista { display: flex; flex-direction: column; gap: 8px; }
.rec-item {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
background: #fff; border: 1px solid #eef0f4; border-radius: 12px; padding: 12px 14px;
cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.rec-item:active { background: #f6f7fb; }
.rec-item-ico {
width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; color: #fff;
background: linear-gradient(135deg,#7c3aed,#4f46e5); font-size: 16px;
}
.rec-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-item-tx b { font-size: 14.5px; color: #1f2937; }
.rec-item-tx small { font-size: 12px; color: #6b7280; }
.rec-volver {
display: inline-flex; align-items: center; gap: 7px; background: none; border: 0;
color: var(--ford-blue, #1769FF); font-weight: 700; font-size: 13.5px; cursor: pointer;
padding: 4px 2px; margin-bottom: 10px;
}
/* ===== Switch segmentado Libretas / Compartido (debajo del buscador) ===== */
.notas-switch {
display: inline-flex; gap: 4px; padding: 4px; margin: 8px auto 2px;
align-self: center; /* centrado horizontal en la barra (columna) */
background: var(--gray-100, #eef0f4); border-radius: 999px; max-width: 100%;
}
.notas-switch-seg {
display: inline-flex; align-items: center; gap: 7px; border: 0; cursor: pointer;
background: transparent; padding: 8px 16px; border-radius: 999px;
font-size: 13.5px; font-weight: 700; color: var(--gray-600, #6b7280); white-space: nowrap;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.notas-switch-seg .notas-switch-caret { font-size: 10px; opacity: .55; }
.notas-switch-seg.is-active {
background: #fff; color: var(--ford-blue, #1769FF);
box-shadow: 0 1px 3px rgba(0,0,0,.14);
}
.notas-switch-seg:active { transform: scale(.97); }
.notas-actions { display: flex; gap: 16px; padding: 8px 2px 6px; flex-wrap: wrap; }
.notas-app { flex: 0 0 auto; max-width: 120px; }
.notas-app .limpieza-app-name {
max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notas-app.is-active .limpieza-app-name { color: var(--ford-blue); font-weight: 700; }
/* ===== Selector de libreta (lista) ===== */
.libreta-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow-y: auto; }
.libreta-pick-row {
display: flex; align-items: center; gap: 12px; width: 100%;
padding: 11px 12px; border: none; background: transparent; cursor: pointer;
border-radius: 12px; font-family: inherit; text-align: left;
transition: background .12s;
}
.libreta-pick-row:hover { background: var(--gray-100); }
.libreta-pick-row.active { background: #eef4ff; }
.libreta-pick-dot {
flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 16px;
}
.libreta-pick-name { flex: 1 1 auto; font-size: 14.5px; font-weight: 600; color: var(--gray-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libreta-pick-count { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: var(--gray-500); background: var(--gray-100); border-radius: 999px; padding: 2px 8px; }
.libreta-pick-check { color: var(--ford-blue); font-size: 15px; }
.libreta-pick-nueva {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 8px; padding: 11px; width: 100%; cursor: pointer; font-family: inherit;
border: 2px dashed var(--gray-300); border-radius: 12px; background: transparent;
color: var(--ford-blue); font-weight: 700; font-size: 14px;
}
.libreta-pick-nueva:hover { background: #f5f8ff; border-color: var(--ford-blue); }
/* ===== Menú "Nuevo" (nota / libreta) ===== */
.nuevo-notas-opts { display: flex; flex-direction: column; gap: 10px; }
.nuevo-notas-opt {
display: flex; align-items: center; gap: 14px; width: 100%;
padding: 14px; cursor: pointer; font-family: inherit; text-align: left;
border: 1px solid var(--gray-200); border-radius: 14px;
background: linear-gradient(160deg, #ffffff 0%, #f3f7ff 100%);
transition: transform .12s, box-shadow .15s;
}
.nuevo-notas-opt:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16,24,40,.12); }
.nuevo-notas-opt:active { transform: scale(.98); }
.nuevo-notas-ico {
flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px;
display: flex; align-items: center; justify-content: center;
font-size: 19px; color: var(--ford-blue);
background: #eaf0fb;
}
.nuevo-notas-txt { display: flex; flex-direction: column; gap: 1px; }
.nuevo-notas-txt strong { font-size: 15px; color: var(--gray-900); }
.nuevo-notas-txt small { font-size: 12px; color: var(--gray-500); }
/* Cabeceras combinadas con la app (mismo degradado glossy del topbar) y azul
Ford de los drawers (notificaciones / menú hamburguesa). */
#modal-libreta-picker .modal-header,
#modal-nuevo-notas .modal-header {
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%);
border-bottom: 1px solid rgba(0,52,120,.15);
}
#modal-libreta-picker .modal-header h3,
#modal-nuevo-notas .modal-header h3,
#modal-libreta-picker .modal-header .btn-icon,
#modal-nuevo-notas .modal-header .btn-icon { color: var(--ford-blue); }
.libreta-color-swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.libreta-swatch {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid transparent; cursor: pointer; padding: 0;
transition: transform .1s;
}
.libreta-swatch:hover { transform: scale(1.08); }
.libreta-swatch.sel { border-color: var(--gray-800); box-shadow: inset 0 0 0 2px #fff; }
/* Modal crear libreta: centrado en pantalla */
#modal-libreta.modal-overlay { align-items: center; justify-content: center; padding: 20px; }
#modal-libreta .modal-sheet { max-height: 88vh; animation: fadeInScale .2s ease; }
/* Cabecera del editor de nota estilo VISTA de la app: flecha "volver" a la
izquierda + título, sobre una barra glossy clara (como el resto del shell). */
.nota-view-header {
justify-content: flex-start !important;
gap: 8px;
background: linear-gradient(160deg, #ffffff 0%, #eaf0fb 55%, #d9e4f7 100%) !important;
border-bottom: 1px solid var(--gray-200);
padding: 10px 12px !important;
}
.nota-view-header .nota-back-btn {
color: var(--ford-blue);
font-size: 18px;
flex: 0 0 auto;
}
.nota-view-header .nota-back-btn:hover { background: rgba(0,52,120,.08); }
.nota-view-header h3 { flex: 1 1 auto; min-width: 0; }
/* === Modal "Editar nota" fullscreen estilo Google Keep ampliado === */
.nota-modal-full.modal-overlay {
align-items: stretch;
justify-content: stretch;
padding: 0;
}
.nota-modal-full .nota-modal-sheet {
max-width: 100% !important;
width: 100%;
height: 100%;
border-radius: 0;
display: flex;
flex-direction: column;
margin: 0;
}
.nota-modal-full .modal-header {
flex: 0 0 auto;
}
.nota-modal-full .nota-modal-body {
flex: 1 1 auto;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* En desktop dejamos un marco con padding y card centrado y MUCHO más grande */
@media (min-width: 720px) {
.nota-modal-full.modal-overlay {
align-items: center;
justify-content: center;
padding: 24px;
}
.nota-modal-full .nota-modal-sheet {
max-width: 900px !important;
height: calc(100vh - 48px);
max-height: calc(100vh - 48px);
border-radius: 14px;
}
}
/* El textarea del modo texto crece para llenar todo el espacio disponible */
.nota-modal-full #nota-contenido {
width: 100%;
min-height: 240px;
resize: vertical;
font-family: inherit;
font-size: 14px;
line-height: 1.55;
padding: 12px 14px;
border: 1px solid var(--gray-300);
border-radius: 10px;
background: #fff;
}
@media (min-width: 720px) {
.nota-modal-full #nota-contenido { min-height: 360px; }
}
/* === "Editar nota" como VISTA (no pop-up a pantalla completa): la hoja arranca
DEBAJO del topbar de la app (header + barra de vista) y termina ARRIBA del
bottom-nav, de modo que los menús superiores/inferiores de la app siguen
visibles. --app-topbar-h lo mide el JS (refreshAppContentPadding); si aún no
está, cae a header-h + nav-h. === */
#modal-nota.modal-space {
top: var(--app-topbar-h, calc(var(--header-h) + var(--nav-h)));
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
/* ===== Editor de nota como VISTA real (#view-nota-editor) =====
Vive dentro de #app-content: scrollea con la página, las barras superior e
inferior se ocultan/aparecen solas y el textarea crece con el contenido
(sin scroll propio) → se siente como escribir sobre la página. */
#nota-editor-vbody { padding: 12px 16px 28px; }
#view-nota-editor #nota-contenido {
width: 100%;
min-height: 220px;
resize: none;
overflow-y: hidden; /* crece en vez de scrollear */
padding: 12px 14px;
line-height: 1.55;
font-size: 14px;
}
/* El cuerpo llega hasta abajo (sin gap): el borde inferior del textarea / lista
queda colineal con el borde superior del bottom-nav. */
#modal-nota.modal-space .nota-modal-body {
padding-bottom: 0;
}
/* Contenedores de previews vacíos no deben ocupar alto. */
#nota-img-status:empty,
#nota-img-preview:empty,
#nota-ubic-preview:empty {
display: none;
}
/* ===== Barra del editor (iconos + acciones) FIJA ARRIBA =====
Colineal: se posa justo DEBAJO del view-toolbar-slot del topbar. Al scrollear
imita el movimiento del topbar (sube), pero NO desaparece: cuando el topbar se
oculta, la barra se pega arriba (top:0) y queda siempre visible. */
body:has(#view-nota-editor.active) .nota-topbar {
position: fixed;
left: 0; right: 0;
top: 0;
/* posada justo bajo el topbar (header + slot) */
transform: translateY(var(--app-topbar-h, calc(var(--header-h) + var(--nav-h))));
z-index: 150; /* bajo el topbar (200), sobre el contenido */
margin: 0;
padding: 6px 10px;
gap: 6px;
flex-wrap: nowrap;
align-items: center;
background: #fff; /* fondo blanco opaco (barra fija sobre el contenido) */
border-bottom: none;
box-shadow: 0 6px 8px -6px rgba(0,0,0,.18); /* borde inferior = solo sombra */
transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
/* Al ocultarse el topbar (scroll), la barra sube a top:0 y sigue visible. */
body:has(#app-screen.topbar-hidden) .nota-topbar {
transform: translateY(0);
}
/* Herramientas repartidas equitativamente en el espacio; acciones a la derecha. */
body:has(#view-nota-editor.active) .nota-toolbar-inline {
flex: 1 1 auto; margin: 0; gap: 2px;
flex-wrap: nowrap; justify-content: space-evenly;
}
body:has(#view-nota-editor.active) .nota-topbar-actions {
flex: 0 0 auto; margin-left: 4px; gap: 4px; flex-wrap: nowrap;
}
/* Botones un poco más compactos para que quepan todos en una fila. */
body:has(#view-nota-editor.active) .nota-topbar .nota-tool-btn { width: 34px; height: 34px; }
body:has(#view-nota-editor.active) .nota-topbar-actions .btn { padding: 6px 8px; }
/* Aire arriba para que el contenido no quede tapado por la barra fija. */
body:has(#view-nota-editor.active) #nota-editor-vbody {
padding-top: 52px;
}
/* En desktop, confinar la barra a la franja central (como el topbar/nav). */
@media (min-width: 1200px) {
body:has(#view-nota-editor.active) .nota-topbar {
left: var(--dock-left); right: var(--dock-right);
}
}
/* ✕ para quitar una ubicación (esquina superior derecha del mapa). */
.nota-ubic-del {
position: absolute; top: 6px; right: 6px; z-index: 3;
width: 26px; height: 26px; border-radius: 50%;
background: rgba(0,0,0,.55); color: #fff; border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 13px; padding: 0;
}
.nota-ubic-del:hover { background: rgba(0,0,0,.78); }
/* El cuerpo del editor crece hasta abajo: el textarea (modo texto) o la lista de
checkboxes (modo lista) llenan todo el alto disponible de la hoja. Cadena de
flex: body → form → form-group de modos → wrap activo → textarea/lista. */
#modal-nota .nota-modal-body { display: flex; flex-direction: column; }
#modal-nota #form-nota {
flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#modal-nota .nota-editor-fill {
flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#modal-nota #nota-modo-texto-wrap:not(.hidden),
#modal-nota #nota-modo-lista-wrap:not(.hidden) {
flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
}
#modal-nota #nota-contenido { flex: 1 1 auto; min-height: 140px; }
#modal-nota #nota-lista-items { flex: 1 1 auto; }
/* === Toggle Texto / Lista (estilo botón SWITCH / pastilla iOS) === */
.nota-modo-toggle {
display: inline-flex;
background: var(--gray-100);
border: 1px solid var(--gray-300);
border-radius: 999px; /* pastilla completa */
padding: 3px;
box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
flex: 0 0 auto;
}
.nota-modo-btn {
padding: 6px 16px;
font-size: 12px;
font-weight: 600;
background: transparent;
color: var(--gray-700);
border: none;
border-radius: 999px; /* cada lado, redondeado tipo switch */
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.nota-modo-btn.active {
background: var(--ford-blue);
color: #fff;
box-shadow: 0 1px 3px rgba(0,52,120,.30);
}
.nota-modo-btn:not(.active):hover {
background: rgba(0,52,120,.06);
color: var(--ford-blue);
}
/* === Modo LISTA — items estilo Google Keep === */
#nota-lista-items {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 8px;
min-height: 40px;
}
.nota-lista-item {
display: flex;
align-items: center;
gap: 10px;
padding: 2px 10px; /* compacto en vertical */
border-radius: 8px;
transition: background .12s;
}
.nota-lista-item:hover {
background: var(--gray-100);
}
.nota-lista-item-handle {
color: var(--gray-400);
font-size: 12px;
cursor: grab;
flex-shrink: 0;
user-select: none;
}
.nota-lista-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--ford-blue);
cursor: pointer;
flex-shrink: 0;
}
.nota-lista-item input[type="text"],
.nota-lista-item input[type="text"]:focus {
flex: 1;
border: none !important; /* gana a la regla global .form-group input */
box-shadow: none !important;
border-radius: 0;
background: transparent;
font-family: inherit;
font-size: 14px;
color: var(--gray-900);
padding: 2px 0;
outline: none;
min-width: 0;
}
.nota-lista-item.done input[type="text"] {
text-decoration: line-through;
color: var(--gray-500);
}
.nota-lista-item-del {
background: transparent;
border: none;
color: var(--gray-400);
cursor: pointer;
font-size: 14px;
padding: 4px 6px;
visibility: hidden;
flex-shrink: 0;
}
.nota-lista-item:hover .nota-lista-item-del,
.nota-lista-item:focus-within .nota-lista-item-del {
visibility: visible;
}
.nota-lista-item-del:hover { color: #b91c1c; }
.nota-lista-add {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: 1px dashed var(--gray-300);
border-radius: 8px;
color: var(--gray-600);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.nota-lista-add:hover {
background: rgba(0,52,120,.04);
color: var(--ford-blue);
border-color: var(--ford-blue);
}
/* === Líneas con checkbox / viñeta dentro del contenido de una nota === */
.nota-item-contenido {
font-family: inherit;
font-size: 13.5px;
line-height: 1.55;
white-space: normal;
margin: 0 0 10px;
}
.nota-line {
padding: 1px 0;
}
/* Imágenes adjuntas en notas */
.nota-ubic-wrap { margin:6px 0; border:1px solid rgba(0,52,120,.14); border-radius:12px; overflow:hidden; }
.nota-ubic-map { width:100%; height:150px; border:0; display:block; background:#e9eef5; }
/* Toda el área del mapa es un link: capa transparente encima del iframe que abre Maps al picar. */
.nota-ubic-mapwrap { position:relative; line-height:0; }
.nota-ubic-tap { position:absolute; inset:0; z-index:2; display:block; cursor:pointer; }
.nota-ubic-tap::after { content:"\f35d"; font-family:"Font Awesome 6 Free","Font Awesome 5 Free",sans-serif; font-weight:900; position:absolute; right:8px; bottom:8px; font-size:11px; color:#fff; background:rgba(0,52,120,.85); padding:4px 7px; border-radius:7px; line-height:1; }
/* Preview en vivo dentro del editor de notas */
.nota-ubic-preview { margin-top:8px; }
.nota-ubic-preview:empty { margin-top:0; }
.nota-ubic-preview .nota-ubic-wrap { margin:0 0 8px; }
/* Links detectados dentro del texto de una nota */
.nota-link { color:var(--ford-blue,#003478); text-decoration:underline; word-break:break-all; }
.nota-link:hover { color:#0a4ea8; }
.nota-ubic { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--blue-light,#EBF2FF); font-size:13px; }
/* chip suelto (vista preview, sin mini-mapa) */
.nota-ubic-wrap:not(:has(.nota-ubic-map)) .nota-ubic { border-radius:0; }
.nota-ubic > .fa-location-dot { color:var(--red,#D0021B); }
.nota-ubic .nu-label { flex:1; min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nota-ubic .nu-btn { flex:none; text-decoration:none; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:8px; background:var(--ford-blue,#003478); color:#fff; }
.nota-ubic .nu-btn.waze { background:#33ccff; color:#06262f; }
/* Hoja de acciones para agregar ubicación (estilo WhatsApp) */
.nota-ubic-sheet-ov { position:fixed; inset:0; z-index:99999; background:rgba(16,24,40,.45); display:flex; align-items:flex-end; justify-content:center; animation:nusFade .15s ease; }
@keyframes nusFade { from{opacity:0} to{opacity:1} }
.nota-ubic-sheet { width:100%; max-width:440px; background:#fff; border-radius:18px 18px 0 0; padding:8px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(16,24,40,.18); animation:nusUp .2s cubic-bezier(.2,.8,.2,1); }
@keyframes nusUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.nus-grab { width:40px; height:4px; border-radius:99px; background:#d7dce5; margin:6px auto 12px; }
.nus-opt { display:flex; align-items:center; gap:14px; width:100%; text-align:left; border:0; background:#f4f6fb; border-radius:14px; padding:14px; margin-bottom:10px; cursor:pointer; color:inherit; transition:transform .12s, background .12s; }
.nus-opt:active { transform:scale(.98); }
.nus-opt i { width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:18px; background:#fff; color:var(--ford-blue,#003478); box-shadow:0 1px 3px rgba(16,24,40,.1); }
.nus-opt div { min-width:0; }
.nus-opt b { display:block; font-size:15px; }
.nus-opt span { display:block; font-size:12.5px; color:var(--gray-500,#667085); margin-top:1px; }
.nus-opt.nus-primary { background:var(--ford-blue,#003478); }
.nus-opt.nus-primary b, .nus-opt.nus-primary span { color:#fff; }
.nus-opt.nus-primary span { opacity:.82; }
.nus-opt.nus-primary i { background:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
.nus-cancel { width:100%; border:0; background:transparent; padding:12px; font-size:15px; font-weight:700; color:var(--ford-blue,#003478); cursor:pointer; }
.nota-img-linea { margin: 6px 0; }
.nota-img-thumb {
max-width: 100%; max-height: 220px; border-radius: 10px;
object-fit: cover; cursor: pointer; display: block;
box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.nota-img-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.nota-img-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.nota-img-prev-item { position: relative; width: 72px; height: 72px; }
.nota-img-prev-item img {
width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
cursor: pointer; box-shadow: 0 1px 3px rgba(16,24,40,.12);
}
.nota-img-prev-del {
position: absolute; top: -6px; right: -6px;
width: 20px; height: 20px; border-radius: 50%;
border: none; background: #ef4444; color: #fff;
font-size: 10px; cursor: pointer; display: flex;
align-items: center; justify-content: center; padding: 0;
}
.nota-line-empty { height: 6px; }
.nota-line-more {
margin-top: 6px;
font-size: 11px;
color: var(--gray-500);
font-style: italic;
}
.nota-line-bu {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 1px 0;
}
.nota-bu-dot {
color: var(--ford-blue);
font-weight: 800;
margin-top: -2px;
flex-shrink: 0;
}
.nota-line-ck {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 3px 0;
}
.nota-line-ck input[type="checkbox"] {
margin-top: 3px;
width: 16px;
height: 16px;
accent-color: var(--ford-blue);
cursor: pointer;
flex-shrink: 0;
}
.nota-line-ck .nota-ck-text {
flex: 1;
word-break: break-word;
}
.nota-line-ck.done .nota-ck-text {
text-decoration: line-through;
color: var(--gray-500);
}
.nota-line-ck .nota-ck-box {
font-size: 14px;
color: var(--ford-blue);
flex-shrink: 0;
}
.nota-line-ck.done .nota-ck-box { color: var(--gray-500); }
/* Badge "de fulano@" en notas compartidas conmigo (en vista lista) */
.nota-item-shared-by {
display: inline-flex;
align-items: center;
gap: 4px;
background: rgba(0,52,120,.08);
color: var(--ford-blue);
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
margin-left: 6px;
}
.nota-item-shared-by i { font-size: 9px; }
/* === Buscador de usuarios en el modal de Compartir nota === */
.cn-buscar-resultados {
position: absolute;
top: 100%;
left: 0; right: 0;
background: #fff;
border: 1px solid var(--gray-300);
border-top: none;
border-radius: 0 0 10px 10px;
max-height: 260px;
overflow-y: auto;
z-index: 10;
box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cn-buscar-resultados.hidden { display: none; }
.cn-buscar-resultados .cn-buscar-item {
padding: 9px 12px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid var(--gray-100);
display: flex;
flex-direction: column;
gap: 2px;
}
.cn-buscar-resultados .cn-buscar-item:hover {
background: var(--gray-100);
}
.cn-buscar-resultados .cn-buscar-item .cn-buscar-nombre {
font-weight: 600;
color: var(--gray-900);
}
.cn-buscar-resultados .cn-buscar-item .cn-buscar-email {
font-size: 11.5px;
color: var(--gray-600);
}
.cn-buscar-resultados .cn-buscar-empty {
padding: 14px;
font-size: 12.5px;
color: var(--gray-500);
text-align: center;
font-style: italic;
}
.cn-usuarios-elegidos {
min-height: 38px;
padding: 6px;
border: 1px dashed var(--gray-300);
border-radius: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.cn-usuarios-elegidos .cn-usuarios-empty {
font-size: 12px;
color: var(--gray-500);
font-style: italic;
padding: 4px 8px;
}
.cn-usuarios-elegidos .cn-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 6px 4px 10px;
background: #eaf2fb;
color: var(--ford-blue);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.cn-usuarios-elegidos .cn-chip button {
background: transparent;
border: none;
color: var(--ford-blue);
cursor: pointer;
font-size: 13px;
padding: 0 4px;
line-height: 1;
}
.cn-usuarios-elegidos .cn-chip button:hover { color: #b91c1c; }
/* === Checkbox-pill (chips clickeables tipo toggle, sin checkbox visible) ===
Usado en el modal de versiones de la app para elegir roles. */
.ck-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: var(--gray-100);
color: var(--gray-700);
border: 1px solid var(--gray-300);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
user-select: none;
transition: background .12s, color .12s, border-color .12s;
}
.ck-pill input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 14px; height: 14px;
border: 2px solid var(--gray-400);
border-radius: 4px;
position: relative;
cursor: pointer;
flex-shrink: 0;
}
.ck-pill input[type="checkbox"]:checked {
background: var(--ford-blue);
border-color: var(--ford-blue);
}
.ck-pill input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 3px; top: -1px;
width: 4px; height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.ck-pill:has(input:checked) {
background: #eaf2fb;
color: var(--ford-blue);
border-color: var(--ford-blue);
}
.ck-pill input[type="checkbox"]:disabled {
opacity: .4;
cursor: not-allowed;
}
.ck-pill:has(input:disabled) {
opacity: .55;
cursor: not-allowed;
}
/* ========== CONTABILIDAD ==========
Vista aislada con patrón Finanzas: tabs horizontales + content body.
TODOS los selectores están scopeados con `#view-contabilidad` para no
contaminar otras pantallas. Prefix de clases: `ctb-` (Contabilidad). */
#view-contabilidad .ctb-tabs {
display: flex;
gap: 4px;
padding: 8px 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: var(--gray-50, #f8f9fa);
border-bottom: 1px solid var(--gray-200);
scrollbar-width: none;
}
#view-contabilidad .ctb-tabs::-webkit-scrollbar { display: none; }
#view-contabilidad .ctb-tab {
flex: 0 0 auto;
padding: 6px 14px;
border-radius: 100px;
background: #fff;
border: 1px solid var(--gray-200);
font-size: 12px;
font-weight: 600;
color: var(--gray-700);
cursor: pointer;
white-space: nowrap;
transition: all .12s;
font-family: inherit;
}
#view-contabilidad .ctb-tab.active {
background: var(--ford-blue, #003478);
color: #fff;
border-color: var(--ford-blue, #003478);
}
#view-contabilidad .ctb-content { padding: 12px; }
/* KPIs (siempre 3 columnas) */
#view-contabilidad .ctb-kpis {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
#view-contabilidad .ctb-kpi {
background: #fff;
border-radius: 12px;
padding: 12px 10px;
border: 1px solid var(--gray-200);
border-left: 4px solid var(--gray-300);
min-width: 0;
}
#view-contabilidad .ctb-kpi-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--gray-600);
}
#view-contabilidad .ctb-kpi-value {
font-size: 17px;
font-weight: 800;
margin-top: 2px;
letter-spacing: -0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#view-contabilidad .ctb-kpi-sub {
font-size: 10.5px;
color: var(--gray-500);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#view-contabilidad .ctb-kpi-in { border-left-color: #16a34a; }
#view-contabilidad .ctb-kpi-out { border-left-color: #dc2626; }
#view-contabilidad .ctb-kpi-bal { border-left-color: var(--ford-blue, #003478); }
#view-contabilidad .ctb-kpi-in .ctb-kpi-value { color: #16a34a; }
#view-contabilidad .ctb-kpi-out .ctb-kpi-value { color: #dc2626; }
#view-contabilidad .ctb-kpi-bal .ctb-kpi-value { color: var(--ford-blue, #003478); }
/* Card-list para Registros: cada persona/gasto es una card vertical compacta
en móvil — mucho más usable que tabla con scroll horizontal. */
#view-contabilidad .ctb-list {
display: flex;
flex-direction: column;
gap: 8px;
}
#view-contabilidad .ctb-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 10px 12px;
display: grid;
grid-template-columns: 1fr auto;
gap: 4px 12px;
align-items: center;
font-size: 13px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
#view-contabilidad .ctb-card:hover { border-color: var(--ford-blue); }
#view-contabilidad .ctb-card.out { background: #fef7f7; border-color: #fecaca; }
#view-contabilidad .ctb-card-main { min-width: 0; }
#view-contabilidad .ctb-card-name {
font-size: 14px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
color: #1f2937;
}
#view-contabilidad .ctb-card-meta {
font-size: 11.5px; color: var(--gray-600);
margin-top: 2px;
display: flex; gap: 8px; flex-wrap: wrap;
}
#view-contabilidad .ctb-card-monto {
font-size: 16px; font-weight: 800;
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
#view-contabilidad .ctb-card-monto.pos { color: #16a34a; }
#view-contabilidad .ctb-card-monto.neg { color: #dc2626; }
#view-contabilidad .ctb-pill {
display: inline-block; padding: 1px 7px;
background: var(--gray-100); color: var(--gray-700);
border-radius: 100px;
font-size: 10.5px; font-weight: 600;
}
#view-contabilidad .ctb-pill.r1 { background: #dbeafe; color: #1e40af; }
#view-contabilidad .ctb-pill.r2 { background: #fef3c7; color: #92400e; }
#view-contabilidad .ctb-pill.r3 { background: #fee2e2; color: #991b1b; }
/* Filtros (Registros) */
#view-contabilidad .ctb-filters {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
#view-contabilidad .ctb-filters input,
#view-contabilidad .ctb-filters select {
width: 100%;
padding: 8px 10px;
font-size: 13px;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: #fff;
font-family: inherit;
}
/* Tabla de Pagos (matriz por fecha) — scroll horizontal SOLO en su tab */
#view-contabilidad .ctb-pagos-wrap {
overflow: auto;
border: 1px solid var(--gray-200);
border-radius: 10px;
background: #fff;
-webkit-overflow-scrolling: touch;
}
#view-contabilidad .ctb-pagos-tabla {
width: max-content;
min-width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
}
#view-contabilidad .ctb-pagos-tabla thead th {
background: #f3f4f6;
position: sticky; top: 0; z-index: 2;
font-weight: 700;
padding: 6px 8px;
border-bottom: 2px solid var(--gray-300);
white-space: nowrap;
border-right: 1px solid var(--gray-200);
font-size: 11px;
}
#view-contabilidad .ctb-pagos-tabla th.ctb-th-fecha {
text-align: center;
vertical-align: bottom;
min-width: 32px; max-width: 32px;
padding: 6px 2px;
}
#view-contabilidad .ctb-pagos-tabla th.ctb-th-fecha .ctb-fecha-rot {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 10px;
letter-spacing: 0.3px;
white-space: nowrap;
padding: 3px 0;
}
#view-contabilidad .ctb-pagos-tabla tbody td {
padding: 6px 8px;
border-bottom: 1px solid var(--gray-200);
border-right: 1px solid var(--gray-100);
white-space: nowrap;
}
#view-contabilidad .ctb-pagos-tabla tbody td.ctb-cell-pago {
text-align: center;
min-width: 32px; max-width: 32px;
padding: 4px;
cursor: pointer;
font-weight: 700;
}
#view-contabilidad .ctb-pagos-tabla tbody td.ctb-cell-pago.si { background: #dcfce7; color: #166534; }
#view-contabilidad .ctb-pagos-tabla tbody td.ctb-cell-pago.no { background: #fef2f2; color: #991b1b; }
#view-contabilidad .ctb-pagos-tabla tbody td.ctb-cell-pago.empty { color: #9ca3af; }
#view-contabilidad .ctb-pagos-tabla tbody td.ctb-cell-pago:hover { outline: 2px solid var(--ford-blue); outline-offset: -2px; }
#view-contabilidad .ctb-pagos-name {
position: sticky; left: 0; background: #fff;
font-weight: 600;
border-right: 1px solid var(--gray-200);
z-index: 1;
}
/* Tabla cronograma unificada: primera columna (nombre+meta) sticky,
segunda (renta) sticky, fechas a la derecha en orden descendente. */
#view-contabilidad .ctb-cron-tabla th.ctb-cron-name,
#view-contabilidad .ctb-cron-tabla td.ctb-cron-name {
position: sticky; left: 0;
background: #fff;
z-index: 2;
text-align: left;
border-right: 1px solid var(--gray-300);
padding: 8px 10px;
min-width: 140px;
}
#view-contabilidad .ctb-cron-tabla thead th.ctb-cron-name { z-index: 4; background: #f3f4f6; }
#view-contabilidad .ctb-cron-name-main {
font-weight: 700; font-size: 12.5px; color: #1f2937;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 160px;
cursor: pointer;
}
#view-contabilidad .ctb-cron-name-tel {
font-size: 11px; margin-top: 1px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 160px;
}
#view-contabilidad .ctb-cron-name-tel a {
color: var(--ford-blue, #003478); text-decoration: none; font-weight: 600;
}
#view-contabilidad .ctb-cron-name-tel i { font-size: 9px; opacity: .7; }
#view-contabilidad .ctb-cron-name-meta {
display: flex; gap: 6px; align-items: center;
font-size: 10.5px; color: var(--gray-600);
margin-top: 2px;
flex-wrap: nowrap;
}
#view-contabilidad .ctb-cron-tabla th.ctb-cron-monto-h,
#view-contabilidad .ctb-cron-tabla td.ctb-cron-monto {
position: sticky; left: 140px;
background: #fff;
z-index: 2;
text-align: right;
border-right: 2px solid var(--gray-300);
padding: 8px 10px;
min-width: 80px;
font-variant-numeric: tabular-nums;
font-weight: 700;
}
#view-contabilidad .ctb-cron-tabla thead th.ctb-cron-monto-h { z-index: 4; background: #f3f4f6; }
#view-contabilidad .ctb-cron-tabla td.ctb-cron-monto.pos { color: #16a34a; }
#view-contabilidad .ctb-cron-tabla td.ctb-cron-monto.neg { color: #dc2626; }
#view-contabilidad .ctb-cron-tabla tbody tr.ctb-row-out td.ctb-cron-name,
#view-contabilidad .ctb-cron-tabla tbody tr.ctb-row-out td.ctb-cron-monto { background: #fef2f2; }
/* Tab "Acciones" — botones grandes apilados */
#view-contabilidad .ctb-acciones { display: flex; flex-direction: column; gap: 10px; }
#view-contabilidad .ctb-accion {
display: flex; align-items: center; gap: 14px;
background: #fff; border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px 16px;
text-align: left;
cursor: pointer;
font-family: inherit;
}
#view-contabilidad .ctb-accion i {
font-size: 22px; color: var(--ford-blue);
width: 30px; text-align: center;
}
#view-contabilidad .ctb-accion-body { flex: 1; min-width: 0; }
#view-contabilidad .ctb-accion-title {
font-size: 14px; font-weight: 700; color: #1f2937;
}
#view-contabilidad .ctb-accion-sub {
font-size: 12px; color: var(--gray-600); margin-top: 2px;
}
#view-contabilidad .ctb-accion:hover { border-color: var(--ford-blue); background: #f9fafb; }
/* Lista de mensajes programados (Contabilidad → Acciones) */
.ctb-prog-list { display: flex; flex-direction: column; gap: 6px; }
.ctb-prog-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 10px;
font-size: 12.5px;
}
.ctb-prog-item > div:first-child { flex: 1; min-width: 0; }
.ctb-prog-num { font-weight: 700; color: #1f2937; font-family: monospace; }
.ctb-prog-msg {
font-size: 12px; color: var(--gray-700);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-top: 2px;
}
.ctb-prog-meta { font-size: 10.5px; color: var(--gray-500); margin-top: 2px; }
.ctb-prog-right { display: flex; align-items: center; gap: 8px; }
/* Form grid del modal */
.form-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }
/* ===== Forma de salida — secciones nuevas ===== */
.salida-hint {
font-size: 12px; color: var(--gray-600);
margin: -4px 0 10px;
line-height: 1.45;
}
.salida-fecha-sel {
padding: 8px 6px;
font-size: 13.5px;
text-align: center;
}
/* Route map (timeline vertical) — 4 paradas conectadas con línea azul.
Cada parada tiene burbuja con icono, título y descripción. */
.salida-roadmap {
position: relative;
padding: 6px 4px 14px;
margin: 8px 0 18px;
}
.salida-roadmap::before {
content: '';
position: absolute;
left: 23px;
top: 18px;
bottom: 28px;
width: 2px;
background: linear-gradient(180deg, #003478 0%, #1769FF 50%, #16a34a 100%);
border-radius: 1px;
z-index: 0;
}
.salida-roadmap .srm-step {
position: relative;
display: flex;
gap: 14px;
padding: 6px 0 14px;
align-items: flex-start;
z-index: 1;
}
.salida-roadmap .srm-step:last-child { padding-bottom: 0; }
.salida-roadmap .srm-icon {
flex-shrink: 0;
width: 46px; height: 46px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--ford-blue, #003478);
color: var(--ford-blue, #003478);
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: 0 4px 12px rgba(0, 52, 120, 0.18);
position: relative;
z-index: 2;
}
/* El último paso (devolución del depósito) en verde */
.salida-roadmap .srm-step-final .srm-icon {
border-color: #16a34a;
color: #16a34a;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.18);
}
.salida-roadmap .srm-body {
flex: 1;
padding-top: 4px;
min-width: 0;
}
.salida-roadmap .srm-title {
font-size: 13.5px;
font-weight: 700;
color: #1f2937;
margin-bottom: 2px;
}
.salida-roadmap .srm-sub {
font-size: 12px;
color: var(--gray-600);
line-height: 1.45;
}
.salida-roadmap .srm-step-final .srm-title { color: #14532d; }
.salida-aviso-check {
display: flex; gap: 10px; align-items: flex-start;
padding: 12px 14px;
background: #fef9c3;
border: 1px solid #fde047;
border-radius: 12px;
margin: 0 0 16px;
font-size: 12.5px;
line-height: 1.45;
color: #713f12;
cursor: pointer;
}
.salida-aviso-check input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #ca8a04;
flex-shrink: 0;
margin-top: 1px;
}
.salida-aviso-check strong { color: #713f12; }
.salida-aviso-check:has(input:checked) {
background: #dcfce7; border-color: #86efac; color: #166534;
}
.salida-aviso-check:has(input:checked) strong { color: #14532d; }
.salida-checklist {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 6px;
margin-bottom: 14px;
}
.salida-checklist label {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 10px;
font-size: 12.5px;
cursor: pointer;
user-select: none;
}
.salida-checklist label > span {
display: flex; align-items: center; gap: 8px;
flex: 1;
}
.salida-checklist label > span > i {
width: 16px; text-align: center;
color: var(--ford-blue);
font-size: 13px;
}
.salida-checklist label:has(input:checked) {
background: #f0fdf4; border-color: #86efac;
}
.salida-checklist label:has(input:checked) > span > i {
color: #16a34a;
}
.salida-checklist input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: #16a34a;
flex-shrink: 0;
}
.salida-fotos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.salida-foto-card {
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.salida-foto-thumb {
width: 100%;
aspect-ratio: 1;
background: #f3f4f6;
border: 2px dashed #cbd5e1;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
color: #94a3b8;
cursor: pointer;
transition: border-color .12s, color .12s;
background-size: cover; background-position: center;
}
.salida-foto-thumb:hover {
border-color: var(--ford-blue); color: var(--ford-blue);
}
.salida-foto-card.done .salida-foto-thumb {
border: 2px solid #16a34a;
color: transparent;
}
.salida-foto-card.done .salida-foto-thumb::after {
content: '✓';
position: absolute;
width: 24px; height: 24px;
background: #16a34a; color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 800;
transform: translate(34px, -34px);
}
.salida-foto-card.done .salida-foto-thumb { position: relative; }
.salida-foto-card span {
font-size: 11px;
color: var(--gray-600);
font-weight: 600;
text-align: center;
}
/* Card de preview de devolución del depósito (arriba del checklist) */
.salida-deposito-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 0 0 16px;
}
.salida-deposito-preview .sdp-block {
padding: 12px 14px;
border-radius: 12px;
border: 1px solid;
}
.salida-deposito-preview .sdp-fecha { background: #eff6ff; border-color: #bfdbfe; }
.salida-deposito-preview .sdp-monto { background: #f0fdf4; border-color: #86efac; }
.salida-deposito-preview .sdp-label {
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px;
color: #4b5563;
}
.salida-deposito-preview .sdp-value {
font-size: 17px; font-weight: 800; margin-top: 4px;
color: #1f2937; letter-spacing: -0.3px;
}
.salida-deposito-preview .sdp-fecha .sdp-value { color: #1e40af; }
.salida-deposito-preview .sdp-monto .sdp-value { color: #166534; }
.salida-deposito-preview .sdp-sub {
font-size: 10.5px; color: var(--gray-600);
margin-top: 4px; line-height: 1.4;
}
@media (max-width: 500px) {
.salida-deposito-preview { grid-template-columns: 1fr; }
}
/* Espacios desocupados (refri, alacena, baño) — checkbox + foto al lado */
.salida-espacios {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 16px;
}
.salida-espacio-row {
display: flex; align-items: center; gap: 10px;
background: #fff; border: 1px solid var(--gray-200);
border-radius: 10px; padding: 8px 10px;
}
.salida-espacio-row label {
flex: 1; display: flex; align-items: center; gap: 8px;
font-size: 13px; cursor: pointer;
margin: 0;
}
.salida-espacio-row label > span > i {
width: 18px; text-align: center; color: var(--ford-blue); font-size: 14px;
}
.salida-espacio-row:has(input:checked) {
background: #f0fdf4; border-color: #86efac;
}
.salida-espacio-row:has(input:checked) label > span > i { color: #16a34a; }
.salida-espacio-row input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #16a34a;
flex-shrink: 0;
}
.salida-foto-mini { width: 56px; flex-shrink: 0; }
.salida-foto-mini .salida-foto-thumb {
aspect-ratio: 1;
font-size: 18px;
background-size: cover; background-position: center;
}
/* Recordatorio áreas comunes */
.salida-recordatorio {
display: flex; gap: 12px;
background: #fef3c7;
border-left: 4px solid #ca8a04;
border-radius: 10px;
padding: 12px 14px;
margin: 14px 0;
}
.salida-recordatorio > i {
color: #ca8a04; font-size: 22px; flex-shrink: 0;
margin-top: 2px;
}
.salida-recordatorio strong { display: block; font-size: 13.5px; color: #713f12; margin-bottom: 4px; }
.salida-recordatorio p {
font-size: 12px; color: #92400e; line-height: 1.5; margin: 0 0 8px;
}
.salida-recordatorio em { font-style: italic; }
.salida-rec-check {
display: flex; gap: 8px; align-items: flex-start;
font-size: 12.5px; color: #713f12;
cursor: pointer;
}
.salida-rec-check input[type="checkbox"] {
width: 17px; height: 17px;
accent-color: #ca8a04; flex-shrink: 0; margin-top: 1px;
}
.salida-recordatorio:has(.salida-rec-check input:checked) {
background: #dcfce7; border-left-color: #16a34a;
}
.salida-recordatorio:has(.salida-rec-check input:checked) > i,
.salida-recordatorio:has(.salida-rec-check input:checked) strong,
.salida-recordatorio:has(.salida-rec-check input:checked) p,
.salida-recordatorio:has(.salida-rec-check input:checked) .salida-rec-check {
color: #166534;
}
/* Compromiso de desocupación + firma */
.salida-compromiso {
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px 16px;
margin: 8px 0 4px;
}
.salida-compromiso-texto {
font-size: 13px; line-height: 1.55; color: #1f2937;
margin: 0 0 10px;
}
.salida-comp-check {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px;
background: #fef3c7; border: 1px solid #fde047;
border-radius: 8px;
cursor: pointer; font-size: 13px;
margin: 0;
}
.salida-comp-check input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #16a34a;
flex-shrink: 0; margin-top: 1px;
}
.salida-comp-check:has(input:checked) {
background: #dcfce7; border-color: #86efac;
}
.salida-firma-wrap {
margin-top: 8px;
background: #fff;
border: 2px dashed var(--gray-300);
border-radius: 10px;
overflow: hidden;
}
.salida-firma-wrap canvas {
width: 100%;
height: 160px;
display: block;
touch-action: none;
cursor: crosshair;
}
.salida-firma-actions {
padding: 6px 10px;
text-align: right;
border-top: 1px solid var(--gray-200);
background: #f9fafb;
}
/* ===== Vista Reportes de Mantenimiento (admin) ===== */
#view-reportes-mtto .rm-body { padding: 12px 16px 80px; max-width: 980px; margin: 0 auto; }
#view-reportes-mtto .rm-filtros {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px;
margin-bottom: 12px;
}
@media (max-width: 600px) {
#view-reportes-mtto .rm-filtros { grid-template-columns: 1fr; }
}
#view-reportes-mtto .rm-filtros input,
#view-reportes-mtto .rm-filtros select {
padding: 9px 12px;
font-size: 13px;
border: 1px solid var(--gray-300);
border-radius: 10px;
background: #fff;
font-family: inherit;
}
#view-reportes-mtto .rm-lista {
display: flex; flex-direction: column; gap: 10px;
}
#view-reportes-mtto .rm-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
padding: 14px 16px;
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
#view-reportes-mtto .rm-card-head {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; font-weight: 700; color: #1f2937;
}
#view-reportes-mtto .rm-card-meta {
font-size: 12px; color: var(--gray-600);
margin-top: 2px; line-height: 1.5;
display: flex; gap: 10px; flex-wrap: wrap;
}
#view-reportes-mtto .rm-card-meta i { color: var(--ford-blue); }
#view-reportes-mtto .rm-card-tarea {
font-size: 13px; color: #1f2937;
margin-top: 6px; line-height: 1.5;
}
#view-reportes-mtto .rm-card-acciones {
display: flex; gap: 6px; flex-wrap: wrap;
align-items: flex-start;
}
#view-reportes-mtto .rm-estado {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px;
border-radius: 100px;
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .3px;
white-space: nowrap;
}
#view-reportes-mtto .rm-estado.nuevo { background: #dbeafe; color: #1e40af; }
#view-reportes-mtto .rm-estado.sin_atender { background: #fef3c7; color: #92400e; }
#view-reportes-mtto .rm-estado.backoffice { background: #f3e8ff; color: #6b21a8; }
#view-reportes-mtto .rm-estado.en_trabajo { background: #fef9c3; color: #854d0e; }
#view-reportes-mtto .rm-estado.terminado { background: #dcfce7; color: #166534; }
#view-reportes-mtto .rm-fotos {
display: flex; gap: 6px; flex-wrap: wrap;
margin-top: 8px;
}
#view-reportes-mtto .rm-foto-thumb {
width: 64px; height: 64px;
border-radius: 8px;
background-size: cover; background-position: center;
border: 1px solid var(--gray-200);
cursor: zoom-in;
}
#view-reportes-mtto .rm-check-resuelto {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 8px;
margin-top: 8px;
font-size: 12.5px;
color: #166534;
}
#view-reportes-mtto .rm-card-acciones select {
padding: 5px 8px;
font-size: 11.5px;
border: 1px solid var(--gray-300);
border-radius: 6px;
background: #fff;
font-family: inherit;
}
/* ===== Vista Centro de Notificaciones (admin) ===== */
#view-centro-notif .cn-body { padding: 16px; max-width: 720px; margin: 0 auto; }
#view-centro-notif .cn-intro {
font-size: 12.5px; color: var(--gray-600);
margin: 0 0 14px; line-height: 1.5;
}
#view-centro-notif .cn-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 18px;
}
@media (min-width: 700px) {
#view-centro-notif .cn-grid { grid-template-columns: 1fr 1fr; }
}
#view-centro-notif .cn-card {
display: flex; align-items: center; gap: 12px;
background: #fff; border: 1px solid var(--gray-200);
border-radius: 14px; padding: 14px 16px;
cursor: pointer; text-align: left; font-family: inherit;
transition: border-color .12s, transform .08s;
}
#view-centro-notif .cn-card:hover { border-color: var(--ford-blue); }
#view-centro-notif .cn-card:active { transform: scale(.98); }
#view-centro-notif .cn-card-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 20px; flex-shrink: 0;
}
#view-centro-notif .cn-card-body { flex: 1; min-width: 0; }
#view-centro-notif .cn-card-title {
font-size: 14px; font-weight: 700; color: #1f2937;
}
#view-centro-notif .cn-card-sub {
font-size: 12px; color: var(--gray-600); margin-top: 3px; line-height: 1.4;
}
#view-centro-notif .cn-arrow { font-size: 14px; color: var(--gray-400); }
#view-centro-notif .cn-section-title {
font-size: 13px; font-weight: 700; color: #1f2937;
margin: 8px 0 8px;
}
#view-centro-notif .cn-list {
display: flex; flex-direction: column; gap: 6px;
}
/* ===== Vista WhatsApp Web (admin only) ===== */
#view-whatsapp-panel .wa-body { padding: 16px; max-width: 720px; margin: 0 auto; }
#view-whatsapp-panel .wa-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 18px 18px 16px;
margin-bottom: 14px;
}
#view-whatsapp-panel .wa-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 12px;
}
#view-whatsapp-panel .wa-icon {
width: 52px; height: 52px;
background: #25D366;
color: #fff;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
flex-shrink: 0;
}
#view-whatsapp-panel .wa-head h2 {
margin: 0; font-size: 17px; font-weight: 800; color: #1f2937;
}
#view-whatsapp-panel .wa-sub {
margin: 4px 0 0; font-size: 12.5px; color: var(--gray-600); line-height: 1.5;
}
#view-whatsapp-panel .wa-sub a { color: var(--ford-blue); font-weight: 600; }
#view-whatsapp-panel .wa-card-title {
font-size: 14px; font-weight: 700; color: #1f2937;
margin: 0 0 6px;
}
#view-whatsapp-panel .wa-card-sub {
font-size: 12.5px; color: var(--gray-600); line-height: 1.55;
margin: 0 0 12px;
}
#view-whatsapp-panel .wa-card-sub a { color: var(--ford-blue); font-weight: 600; }
#view-whatsapp-panel .wa-estado {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-radius: 10px;
font-size: 13px;
background: var(--gray-100);
color: var(--gray-700);
}
#view-whatsapp-panel .wa-estado.ok { background: #dcfce7; color: #166534; }
#view-whatsapp-panel .wa-estado.no { background: #fef3c7; color: #854d0e; }
#view-whatsapp-panel .wa-estado.err { background: #fee2e2; color: #991b1b; }
#view-whatsapp-panel .wa-estado .wa-state-badge {
margin-left: auto;
padding: 2px 9px;
border-radius: 100px;
font-size: 11px; font-weight: 700;
background: rgba(255,255,255,.7);
}
#view-whatsapp-panel .wa-numero {
margin-top: 8px;
padding: 10px 14px;
background: #f0fdf4;
border: 1px solid #86efac;
border-radius: 10px;
font-size: 13px; color: #166534;
display: flex; gap: 8px; align-items: center;
}
#view-whatsapp-panel .wa-numero strong { font-family: monospace; font-size: 14px; }
#view-whatsapp-panel .wa-input {
width: 100%;
padding: 10px 12px;
font-size: 13.5px;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: #fff;
font-family: inherit;
box-sizing: border-box;
}
#view-whatsapp-panel textarea.wa-input { resize: vertical; min-height: 60px; }
#view-whatsapp-panel .wa-secret-wrap { position: relative; }
#view-whatsapp-panel .wa-secret-wrap .wa-input { padding-right: 40px; }
#view-whatsapp-panel .wa-eye {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
background: transparent; border: none; color: var(--gray-500);
cursor: pointer; padding: 6px 8px;
}
#view-whatsapp-panel .wa-eye:hover { color: var(--ford-blue); }
#view-whatsapp-panel .wa-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 14px;
justify-content: flex-end;
}
#view-whatsapp-panel .wa-status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}
#view-whatsapp-panel .wa-status.ok { background: #dcfce7; color: #166534; }
#view-whatsapp-panel .wa-status.err { background: #fee2e2; color: #991b1b; }
#view-whatsapp-panel .wa-status.info{ background: #fef9c3; color: #854d0e; }
#view-whatsapp-panel .wa-qr-box {
width: 280px; height: 280px;
margin: 0 auto;
background: #f9fafb;
border: 2px dashed var(--gray-300);
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
padding: 12px;
}
#view-whatsapp-panel .wa-qr-box img {
max-width: 100%; max-height: 100%;
border-radius: 6px;
}
#view-whatsapp-panel .wa-auto-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
#view-whatsapp-panel .wa-auto-list li {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
background: var(--gray-50);
border-radius: 8px;
font-size: 12.5px; color: #1f2937;
}
#view-whatsapp-panel .wa-auto-list li i { font-size: 14px; width: 20px; text-align: center; }
/* ===== Vista Vincular PayPal (admin only) ===== */
#view-paypal-vincular .pv-body { padding: 16px; max-width: 720px; margin: 0 auto; }
#view-paypal-vincular .pv-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 14px;
padding: 18px 18px 16px;
margin-bottom: 14px;
}
#view-paypal-vincular .pv-head {
display: flex; align-items: center; gap: 14px;
margin-bottom: 12px;
}
#view-paypal-vincular .pv-icon {
width: 52px; height: 52px;
background: #003087;
color: #fff;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 26px;
flex-shrink: 0;
}
#view-paypal-vincular .pv-head h2 {
margin: 0; font-size: 17px; font-weight: 800; color: #1f2937;
}
#view-paypal-vincular .pv-sub {
margin: 4px 0 0; font-size: 12.5px; color: var(--gray-600); line-height: 1.45;
}
#view-paypal-vincular .pv-card-title {
font-size: 14px; font-weight: 700; color: #1f2937;
margin: 0 0 6px;
}
#view-paypal-vincular .pv-card-sub {
font-size: 12.5px; color: var(--gray-600); line-height: 1.5;
margin: 0 0 12px;
}
#view-paypal-vincular .pv-card-sub a { color: var(--ford-blue); font-weight: 600; }
#view-paypal-vincular .pv-estado {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-radius: 10px;
font-size: 13px;
background: var(--gray-100);
color: var(--gray-700);
}
#view-paypal-vincular .pv-estado.ok { background: #dcfce7; color: #166534; }
#view-paypal-vincular .pv-estado.no { background: #fef3c7; color: #854d0e; }
#view-paypal-vincular .pv-estado.err { background: #fee2e2; color: #991b1b; }
#view-paypal-vincular .pv-estado .pv-badge {
margin-left: auto;
padding: 2px 9px;
border-radius: 100px;
font-size: 11px;
font-weight: 700;
background: rgba(255,255,255,.7);
}
#view-paypal-vincular .pv-input {
width: 100%;
padding: 10px 12px;
font-size: 13.5px;
border: 1px solid var(--gray-300);
border-radius: 8px;
background: #fff;
font-family: inherit;
box-sizing: border-box;
}
#view-paypal-vincular .pv-secret-wrap {
position: relative;
}
#view-paypal-vincular .pv-secret-wrap .pv-input { padding-right: 40px; }
#view-paypal-vincular .pv-eye {
position: absolute; right: 8px; top: 50%;
transform: translateY(-50%);
background: transparent; border: none;
color: var(--gray-500);
cursor: pointer;
padding: 6px 8px;
}
#view-paypal-vincular .pv-eye:hover { color: var(--ford-blue); }
#view-paypal-vincular .pv-hint {
display: block;
font-size: 11px;
color: var(--gray-500);
margin-top: 4px;
}
#view-paypal-vincular .pv-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 14px;
justify-content: flex-end;
}
#view-paypal-vincular .pv-status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}
#view-paypal-vincular .pv-status.ok { background: #dcfce7; color: #166534; }
#view-paypal-vincular .pv-status.err { background: #fee2e2; color: #991b1b; }
#view-paypal-vincular .pv-status.info{ background: #fef9c3; color: #854d0e; }
#view-paypal-vincular .pv-prod-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
#view-paypal-vincular .pv-prod-list li {
display: flex; align-items: center; gap: 14px;
padding: 10px 12px;
background: var(--gray-50);
border-radius: 10px;
border: 1px solid var(--gray-200);
}
#view-paypal-vincular .pv-prod-list li i { font-size: 22px; width: 28px; text-align: center; }
#view-paypal-vincular .pv-prod-list li strong { display: block; font-size: 13.5px; color: #1f2937; }
#view-paypal-vincular .pv-prod-list li span { font-size: 12px; color: var(--gray-600); }
/* ===== Vista Reposición de tag (PayPal) — vive en su propio
#view-reposicion-tag, con CSS scopeado para no contaminar otras
pantallas. */
#view-reposicion-tag .rt-view-body { padding: 16px; }
#view-reposicion-tag .rt-card {
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 16px;
padding: 22px 20px 20px;
max-width: 560px;
margin: 0 auto 14px;
}
#view-reposicion-tag .rt-section-title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 800;
color: #1f2937;
}
#view-reposicion-tag .rt-section-sub {
margin: 0 0 14px;
font-size: 12.5px;
color: var(--gray-600);
}
#view-reposicion-tag .rt-conceptos {
display: flex;
flex-direction: column;
gap: 8px;
}
#view-reposicion-tag .rt-concepto {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--gray-200);
border-radius: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: border-color .12s, background .12s, transform .08s;
}
#view-reposicion-tag .rt-concepto:hover {
background: #f9fafb;
border-color: var(--ford-blue);
}
#view-reposicion-tag .rt-concepto:active { transform: scale(.98); }
#view-reposicion-tag .rt-concepto-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
color: #fff;
font-size: 20px;
flex-shrink: 0;
}
#view-reposicion-tag .rt-concepto-body {
flex: 1;
min-width: 0;
}
#view-reposicion-tag .rt-concepto-title {
font-size: 14px; font-weight: 700; color: #1f2937;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#view-reposicion-tag .rt-concepto-sub {
font-size: 12px; color: var(--gray-600);
margin-top: 2px;
line-height: 1.35;
}
#view-reposicion-tag .rt-concepto-price {
font-size: 16px;
font-weight: 800;
color: var(--ford-blue);
white-space: nowrap;
flex-shrink: 0;
}
#view-reposicion-tag .rt-concepto-price small {
font-size: 10px;
font-weight: 600;
color: var(--gray-500);
margin-left: 2px;
}
/* Input dinámico de monto (Pago de renta) */
#view-reposicion-tag .rt-monto-input-wrap label {
display: block; font-size: 12.5px; font-weight: 700;
color: #1f2937; margin-bottom: 4px;
}
#view-reposicion-tag .rt-monto-input {
width: 100%;
padding: 14px 16px;
font-size: 22px;
font-weight: 800;
border: 2px solid #16a34a;
border-radius: 12px;
background: #fff;
text-align: center;
font-family: inherit;
letter-spacing: -.3px;
box-sizing: border-box;
}
#view-reposicion-tag .rt-monto-input:focus {
outline: none; border-color: #15803d;
box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}
/* Desglose monto base + comisión */
#view-reposicion-tag .rt-desglose {
margin: 10px 0 0;
padding: 10px 14px;
background: #f9fafb;
border: 1px solid var(--gray-200);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 4px;
}
#view-reposicion-tag .rt-desglose-row {
display: flex; align-items: center;
justify-content: space-between;
font-size: 12.5px;
color: var(--gray-700);
}
#view-reposicion-tag .rt-desglose-row strong {
color: #1f2937;
font-variant-numeric: tabular-nums;
}
#view-reposicion-tag .rt-desglose-row small {
font-size: 10.5px;
color: var(--gray-500);
font-weight: 600;
}
/* Checkbox pago recurrente */
#view-reposicion-tag .rt-recurrente {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 12px;
background: #fef9c3;
border: 1px solid #fde047;
border-radius: 10px;
margin: 12px 0 0;
cursor: pointer;
}
#view-reposicion-tag .rt-recurrente input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: #16a34a;
flex-shrink: 0; margin-top: 1px;
}
#view-reposicion-tag .rt-recurrente span { display: flex; flex-direction: column; gap: 2px; }
#view-reposicion-tag .rt-recurrente strong { font-size: 13px; color: #713f12; }
#view-reposicion-tag .rt-recurrente small { font-size: 11px; color: #92400e; line-height: 1.4; }
#view-reposicion-tag .rt-recurrente:has(input:checked) {
background: #dcfce7; border-color: #86efac;
}
#view-reposicion-tag .rt-recurrente:has(input:checked) strong { color: #14532d; }
/* Afiliación al cargo automático: estado actual y nota antes del botón */
#view-reposicion-tag .rt-sus-estado {
padding: 12px; margin: 12px 0 0;
background: #ecfdf5; border: 1px solid #86efac; border-radius: 10px;
font-size: 12.5px; color: #14532d; line-height: 1.45;
}
#view-reposicion-tag .rt-sus-estado p { margin: 6px 0 8px; }
#view-reposicion-tag .rt-sus-tit { font-weight: 700; font-size: 13.5px; display: flex; gap: 8px; align-items: center; }
#view-reposicion-tag .rt-sus-alerta { color: #b45309; font-weight: 600; }
#view-reposicion-tag .rt-sus-estado.rt-sus-pausa { background: #fffbeb; border-color: #fcd34d; color: #78350f; }
#view-reposicion-tag .rt-recurrente:has(input:disabled) { opacity: .7; cursor: default; }
#view-reposicion-tag .rt-sus-nota { font-size: 12.5px; color: #374151; line-height: 1.45; margin: 0 0 10px; }
#view-reposicion-tag .rt-recurrente:has(input:checked) small { color: #166534; }
#view-reposicion-tag .rt-head {
text-align: center;
padding: 0 0 14px;
}
#view-reposicion-tag .rt-icon {
width: 64px; height: 64px;
margin: 0 auto 10px;
background: #0ea5e9;
color: #fff;
border-radius: 18px;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
#view-reposicion-tag .rt-head h2 {
margin: 0; font-size: 20px; font-weight: 800; color: #1f2937;
}
#view-reposicion-tag .rt-sub {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--gray-600);
letter-spacing: .3px;
}
#view-reposicion-tag .rt-amount {
display: flex; align-items: baseline; justify-content: space-between;
padding: 14px 16px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 12px;
margin-bottom: 14px;
}
#view-reposicion-tag .rt-amount-label {
font-size: 12.5px; font-weight: 600; color: #075985;
text-transform: uppercase; letter-spacing: .5px;
}
#view-reposicion-tag .rt-amount-value {
font-size: 26px; font-weight: 800; color: #0c4a6e;
letter-spacing: -.5px;
}
#view-reposicion-tag .rt-amount-value small {
font-size: 12px; font-weight: 600; color: #075985;
}
#view-reposicion-tag .rt-puntos {
list-style: none; padding: 0; margin: 0 0 16px;
display: flex; flex-direction: column; gap: 8px;
font-size: 13.5px; color: #374151; line-height: 1.45;
}
#view-reposicion-tag .rt-puntos li {
display: flex; align-items: flex-start; gap: 10px;
}
#view-reposicion-tag .rt-puntos i {
color: var(--ford-blue, #003478);
margin-top: 2px;
font-size: 14px;
width: 18px; text-align: center;
}
#view-reposicion-tag .rt-paypal {
min-height: 50px;
margin-top: 6px;
}
#view-reposicion-tag .rt-status {
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
text-align: center;
}
#view-reposicion-tag .rt-status.ok { background: #dcfce7; color: #166534; }
#view-reposicion-tag .rt-status.err { background: #fee2e2; color: #991b1b; }
#view-reposicion-tag .rt-status.info{ background: #fef9c3; color: #854d0e; }
#view-reposicion-tag .rt-desglose { margin-bottom: 14px; }
#view-reposicion-tag .rt-desglose.sin-comision .rt-desg-com { display: none; }
#view-reposicion-tag .rt-desg-total {
margin-top: 2px; padding-top: 6px;
border-top: 1px dashed var(--gray-200);
font-weight: 700;
}
/* Pantalla grande de "Pago realizado" */
.rt-exito {
position: fixed; inset: 0; z-index: 10050;
background: rgba(15, 23, 42, .55);
display: flex; align-items: center; justify-content: center;
padding: 16px;
animation: rtExitoFade .2s ease-out;
}
.rt-exito-box {
width: 100%; max-width: 380px;
background: #fff; border-radius: 20px;
padding: 32px 22px 22px;
text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,.25);
animation: rtExitoPop .35s cubic-bezier(.2,1.4,.4,1);
}
.rt-exito-check {
width: 96px; height: 96px; margin: 0 auto 16px;
border-radius: 50%; background: #16a34a; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 48px;
box-shadow: 0 0 0 10px #dcfce7;
}
.rt-exito-box h2 { margin: 0; font-size: 30px; font-weight: 800; color: #14532d; }
.rt-exito-monto {
margin-top: 8px; font-size: 24px; font-weight: 800; color: #1f2937;
font-variant-numeric: tabular-nums;
}
.rt-exito-msg { margin: 12px 0 20px; font-size: 14px; line-height: 1.5; color: #374151; }
.rt-exito-btn { width: 100%; font-size: 16px; padding: 12px; }
.rt-exito-fallo .rt-exito-check { background: #dc2626; box-shadow: 0 0 0 10px #fee2e2; }
.rt-exito-fallo .rt-exito-box h2 { color: #991b1b; }
@keyframes rtExitoFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rtExitoPop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (min-width: 700px) {
#view-contabilidad .ctb-content { padding: 16px; }
#view-contabilidad .ctb-kpi-value { font-size: 24px; }
#view-contabilidad .ctb-kpi-label { font-size: 11px; }
#view-contabilidad .ctb-kpi-sub { font-size: 11.5px; }
#view-contabilidad .ctb-card { font-size: 14px; }
}
/* ===== Directorio compacto tipo lista de contactos ===== */
.dir-row { display:flex; align-items:center; gap:11px; padding:9px 12px; background:#fff;
border-bottom:1px solid var(--gray-100); cursor:pointer; transition:background .12s; }
.dir-row:hover, .dir-row:active { background:#f3f6fc; }
/* Residente sin acceso: se ve atenuado pero sigue en el directorio, con todos
sus datos consultables al abrirlo. */
.dir-row-bloq { background:#fafafa; }
.dir-row-bloq .dir-av { opacity:.45; filter:grayscale(1); }
.dir-row-bloq .dir-name { color:var(--gray-600); }
.dir-av { width:42px; height:42px; border-radius:50%; overflow:hidden; flex-shrink:0; background:var(--gray-200); }
.dir-av img { width:100%; height:100%; object-fit:cover; display:block; }
.dir-info { flex:1; min-width:0; }
.dir-name { font-size:14px; font-weight:700; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dir-sub { font-size:12px; color:var(--gray-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.dir-actions { display:flex; gap:4px; flex-shrink:0; }
.dir-act { width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; display:inline-flex;
align-items:center; justify-content:center; background:#eef2f7; color:var(--ford-blue); font-size:14px; text-decoration:none; }
.dir-act.wa { background:#e7f8ed; color:#25D366; }
.dir-act.plat { background:#e8f0ff; color:#1769FF; }
.dir-act:active { transform:scale(.9); }
/* ===== Subir evidencia: selección por ÁREA (auto-tag) ===== */
.ev-areas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:2px 0 8px; }
.ev-area-btn { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:9px 10px;
border:1.5px solid #d1d5db; border-radius:10px; background:#fff; cursor:pointer; font-family:inherit; }
.ev-area-btn.has { border-color:#1769FF; background:#eff6ff; }
.ev-area-btn:active { transform:scale(.97); }
.ev-area-name { font-size:12px; font-weight:700; color:#1f2937; text-align:left; line-height:1.1; }
.ev-area-count { background:#1769FF; color:#fff; font-size:11px; font-weight:800; min-width:18px; height:18px;
border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px; flex-shrink:0; }
.ev-area-add { color:#9ca3af; font-size:11px; flex-shrink:0; }
/* Áreas como TAGS descriptivos (lo que el video de recorrido debe cubrir) */
.ev-areas-tags { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 4px; }
.ev-area-tag { display:inline-flex; align-items:center; gap:5px; padding:6px 11px;
border:1.5px solid #dbe4f0; border-radius:999px; background:#f4f8ff; color:#1f2937;
font-size:12px; font-weight:700; line-height:1; }
.ev-area-tag i { color:#1769FF; font-size:10px; }
/* Listado de recorridos de limpieza */
.ev-rec-item { display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:7px;
border:1px solid #e5e7eb; border-radius:12px; background:#fbfcfe; }
.ev-rec-badge { display:inline-block; font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px;
vertical-align:middle; margin-left:4px; }
.ev-rec-badge.antes { background:#eef2ff; color:#3730a3; }
.ev-rec-badge.despues { background:#e9f9ef; color:#0f5132; }
.ev-rec-ver { font-size:12px; font-weight:800; color:#1769FF; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.ev-rec-del { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; width:32px; height:32px;
border-radius:9px; cursor:pointer; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.ev-rec-del:active { transform:scale(.94); }
/* ===== Scrollbar auto-oculta (aparece solo al desplazar / hover) ===== */
.sb-autohide { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sb-autohide::-webkit-scrollbar { width: 7px; height: 7px; }
.sb-autohide::-webkit-scrollbar-track { background: transparent; }
.sb-autohide::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .25s; }
.sb-autohide:hover::-webkit-scrollbar-thumb { background: rgba(120,120,128,.30); }
.sb-autohide.sb-active { scrollbar-color: rgba(120,120,128,.55) transparent; }
.sb-autohide.sb-active::-webkit-scrollbar-thumb { background: rgba(120,120,128,.55); }
/* ===== Notificaciones: sin scroll horizontal, texto envuelto y más chico ===== */
#notificaciones-body, #notif-drawer-list, .notif-drawer-list { overflow-x: hidden; }
.notif-title { font-size: 12.5px; }
.notif-desc { font-size: 11.5px; overflow-wrap: anywhere; word-break: break-word; }
.notif-drawer-title { font-size: 12px; overflow-wrap: anywhere; word-break: break-word; }
.notif-drawer-msg { font-size: 11px; overflow-wrap: anywhere; word-break: break-word; }
.notif-time, .notif-drawer-time { font-size: 10px; }
.notif-body, .notif-drawer-body-text { min-width: 0; }
/* Itinerario: titulo del depto centrado (sin chevron) */
.itin-depto-col { justify-content: center !important; }
/* Línea azul Ford en el borde superior de la barra (view-toolbar-slot) */
.view-toolbar-slot { border-top: 2px solid var(--ford-blue); }
/* ===== Chat (Blue): se CONSERVA la barra de navegación inferior (pedido del user 2026-10-13).
El #view-chat ya reserva 50px (min-height abajo) para que la barra no tape la mensajería. ===== */
#app-screen.chat-immersive #app-content { padding-bottom: 0 !important; }
/* El chat IA ahora tiene su toolbar en el slot (IA + Nuevo chat) → descontar
también la altura del slot (48px + 2px borde) para que el input llegue al fondo. */
#app-screen.chat-immersive #view-chat.view.active { min-height: calc(100vh - var(--header-h) - var(--nav-h) - env(safe-area-inset-bottom, 0px)); }
#app-screen.chat-immersive #mensajes-window { height: calc(100vh - var(--header-h)); }
#app-screen.chat-immersive .msg-input-bar,
#app-screen.chat-immersive .chat-input-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
/* ===== Drawer notificaciones con tabs (Notificaciones / Mi perfil) — iOS ===== */
.notif-drawer-tabs { display:flex; gap:6px; padding:12px 12px 8px; background: var(--ios-bg,#f2f2f7); flex-shrink:0; }
.ndt-tab { flex:1; padding:8px 10px; border-radius:10px; border:0; background:#e3e3ea; color:var(--gray-700); font-weight:700; font-size:13px; cursor:pointer; }
.ndt-tab.active { background: var(--ford-blue); color:#fff; }
.ndt-pane { display:flex; flex-direction:column; flex:1; min-height:0; }
.ndt-pane.hidden { display:none; }
#ndt-perfil-body { padding:10px; overflow-y:auto; flex:1; background: var(--ios-bg,#f2f2f7); }
.mi-perfil-body { max-width: 640px; margin: 0 auto; }
/* Badge de notificaciones ahora sobre el AVATAR */
.header-avatar-btn { position: relative; }
/* Header del chat IA: "IA" centrado + "Nuevo chat" a la derecha */
.chat-ia-header { position: relative; display: flex; align-items: center; justify-content: center;
padding: 11px 14px; border-top: 3px solid var(--ford-blue); border-bottom: 1px solid var(--gray-200); background: var(--white); flex-shrink: 0; }
.chat-ia-title { font-weight: 700; font-size: 16px; color: var(--ford-blue); }
.chat-ia-nuevo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
background: transparent; border: 0; color: var(--ford-blue); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.chat-ia-nuevo:active { opacity: .6; }
/* ============================================================================
ICONOS ESTILO "APP" v3 (20260605v) — Hommie / Limpieza / Admin / Tickets
- El botón VISIBLE = solo el tile del icono (con volumen). El TEXTO va DEBAJO,
fuera del tile (como apps de iOS).
- Tile del color de fondo de la app (no blanco) + sombra = volumen.
- Pulsación (:active o .is-pressing): el tile se hunde y la sombra casi se
quita. La acción se retrasa ~300ms (ver JS) para apreciar el hundido.
Móvil y web (600/900px). REVERTIR: borrar este bloque completo.
============================================================================ */
/* El