/** * Interfaz de la aplicación. * * Sin frameworks ni CDN: el hosting no los admite y la app tiene que cargar * rápido en el celular de un operador con datos móviles. */ /* * Las variables van en :root y no en .agi-app porque los diálogos se insertan * en , fuera de la aplicación. Definidas ahí adentro, un modal quedaba * sin fondo, sin tipografía y con los campos desbordados: todos los var() * caían a vacío y el box-sizing no lo alcanzaba. */ :root { --agi-fondo: #f1f3f6; --agi-tarjeta: #fff; --agi-tinta: #15181e; --agi-suave: #5a6470; --agi-tenue: #8b939d; --agi-linea: #dde2e8; --agi-acento: #0b5d51; --agi-acento-claro: #d7e8e4; --agi-alerta: #a32017; --agi-alerta-fondo: #f6e3e1; --agi-ambar: #8a5510; --agi-ambar-fondo: #f7ecd8; --agi-tipo: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .agi-app { background: var(--agi-fondo); color: var(--agi-tinta); font-family: var(--agi-tipo); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; box-sizing: border-box; } .agi-app *, .agi-app *::before, .agi-app *::after, .agi-modal-fondo, .agi-modal-fondo *, .agi-modal-fondo *::before, .agi-modal-fondo *::after, .agi-toast { box-sizing: border-box; } .agi-app h1, .agi-app h2, .agi-app h3 { margin: 0; letter-spacing: -0.015em; } .agi-app p { margin: 0 0 .6rem; } .agi-app a { color: var(--agi-acento); } .agi-app :focus-visible { outline: 2px solid var(--agi-acento); outline-offset: 2px; } /* ---------- Carga ---------- */ .agi-cargando { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 60vh; color: var(--agi-suave); } .agi-spinner { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--agi-linea); border-top-color: var(--agi-acento); animation: agi-giro .8s linear infinite; } @keyframes agi-giro { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .agi-spinner { animation: none; } } .agi-error-js { color: var(--agi-alerta); } /* ---------- Login ---------- */ .agi-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; } .agi-login-caja { background: var(--agi-tarjeta); border: 1px solid var(--agi-linea); border-radius: 10px; padding: 2rem 1.75rem; width: 100%; max-width: 380px; box-shadow: 0 2px 20px rgba(16, 24, 40, .06); } .agi-login-logo { font-size: 2.2rem; text-align: center; margin-bottom: .5rem; } .agi-login-caja h1 { font-size: 1.3rem; text-align: center; } .agi-login-sub { text-align: center; color: var(--agi-tenue); font-size: .85rem; margin-bottom: 1.5rem; } .agi-login-caja label { display: block; font-size: .82rem; font-weight: 600; margin: .9rem 0 .25rem; } .agi-login-caja input[type="text"], .agi-login-caja input[type="password"] { width: 100%; padding: .65rem .75rem; border: 1px solid var(--agi-linea); border-radius: 6px; font-size: 1rem; font-family: inherit; background: #fff; color: var(--agi-tinta); } .agi-check { display: flex; align-items: center; gap: .45rem; font-weight: 400 !important; margin: 1rem 0 !important; } .agi-check input { margin: 0; } .agi-login-error { background: var(--agi-alerta-fondo); color: var(--agi-alerta); padding: .6rem .75rem; border-radius: 6px; font-size: .85rem; margin-top: .9rem; } /* ---------- Estructura ---------- */ .agi-cab { background: var(--agi-tarjeta); border-bottom: 1px solid var(--agi-linea); padding: .7rem 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 20; } .agi-cab-marca { font-weight: 700; font-size: 1rem; letter-spacing: -.02em; } .agi-cab-yo { margin-left: auto; font-size: .8rem; color: var(--agi-suave); text-align: right; } .agi-cab-yo b { display: block; color: var(--agi-tinta); } .agi-nav { display: flex; gap: .15rem; overflow-x: auto; padding: 0 .5rem; background: var(--agi-tarjeta); border-bottom: 1px solid var(--agi-linea); position: sticky; top: 52px; z-index: 19; } .agi-nav button { background: none; border: none; border-bottom: 2px solid transparent; padding: .7rem .85rem; font: inherit; font-size: .88rem; color: var(--agi-suave); cursor: pointer; white-space: nowrap; } .agi-nav button[aria-current="true"] { color: var(--agi-acento); border-bottom-color: var(--agi-acento); font-weight: 600; } .agi-globo { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: .35rem; background: var(--agi-alerta); color: #fff; border-radius: 9px; font-size: .7rem; line-height: 18px; text-align: center; font-weight: 700; } .agi-cuerpo { padding: 1rem; } /* ---------- Piezas ---------- */ .agi-caja { background: var(--agi-tarjeta); border: 1px solid var(--agi-linea); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1rem; } .agi-caja > h2 { font-size: .95rem; margin-bottom: .75rem; } .agi-caja > h3 { font-size: .85rem; margin: 1.1rem 0 .5rem; color: var(--agi-suave); } .agi-fila { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .agi-entre { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .agi-sub { color: var(--agi-suave); font-size: .82rem; } .agi-tenue { color: var(--agi-tenue); font-size: .8rem; } .agi-der { margin-left: auto; } .agi-btn { background: var(--agi-acento); color: #fff; border: 1px solid var(--agi-acento); padding: .5rem .9rem; border-radius: 6px; font: inherit; font-size: .87rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; } .agi-btn:hover { filter: brightness(1.08); } .agi-btn:disabled { opacity: .55; cursor: default; } .agi-btn-sec { background: #fff; color: var(--agi-acento); } .agi-btn-peligro { background: #fff; color: var(--agi-alerta); border-color: var(--agi-alerta); } .agi-btn-peligro:hover { background: var(--agi-alerta); color: #fff; } .agi-btn-chico { padding: .3rem .6rem; font-size: .78rem; } .agi-btn-ancho { width: 100%; } .agi-btn-link { background: none; border: none; color: var(--agi-suave); cursor: pointer; font: inherit; font-size: .8rem; text-decoration: underline; padding: 0; } .agi-pill { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .2rem .45rem; border-radius: 3px; background: #eef0f3; color: var(--agi-suave); white-space: nowrap; } .agi-pill-disponible { background: var(--agi-acento-claro); color: var(--agi-acento); } .agi-pill-reservado { background: #dde7f7; color: #1b4b80; } .agi-pill-suspendido { background: var(--agi-ambar-fondo); color: var(--agi-ambar); } .agi-pill-alquilado { background: #e2dcf5; color: #443089; } .agi-pill-humano { background: var(--agi-ambar-fondo); color: var(--agi-ambar); } .agi-pill-alerta { background: var(--agi-alerta-fondo); color: var(--agi-alerta); } /* ---------- Formularios ---------- */ .agi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; } .agi-campo { display: flex; flex-direction: column; gap: .25rem; } .agi-campo.agi-ancho { grid-column: 1 / -1; } .agi-campo label { font-size: .78rem; font-weight: 600; color: var(--agi-suave); } .agi-campo input, .agi-campo select, .agi-campo textarea { padding: .5rem .6rem; border: 1px solid var(--agi-linea); border-radius: 5px; font: inherit; font-size: .9rem; background: #fff; color: var(--agi-tinta); width: 100%; } .agi-campo textarea { resize: vertical; min-height: 60px; } /* La ayuda va en su propia línea: pegada al final del texto se lee como una sola oración corrida y confunde. */ .agi-campo .agi-ayuda { display: block; font-size: .75rem; color: var(--agi-tenue); font-weight: 400; margin-top: .2rem; } /* Un checkbox no se estira: la regla de ancho completo es para los campos de texto. */ .agi-campo input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: .2rem 0 0; } .agi-campo-check { flex-direction: row; align-items: flex-start; gap: .5rem; } .agi-campo-check label { font-weight: 400; color: var(--agi-tinta); font-size: .85rem; } /* ---------- Tablas ---------- */ .agi-scroll { overflow-x: auto; margin: 0 -.3rem; } .agi-tabla { width: 100%; border-collapse: collapse; font-size: .87rem; } .agi-tabla th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--agi-tenue); font-weight: 600; padding: .5rem .6rem; border-bottom: 1px solid var(--agi-linea); white-space: nowrap; } .agi-tabla td { padding: .6rem; border-bottom: 1px solid #f0f2f4; vertical-align: top; } .agi-tabla tr:last-child td { border-bottom: none; } .agi-tabla tbody tr.agi-click { cursor: pointer; } .agi-tabla tbody tr.agi-click:hover { background: #f7f9fa; } .agi-num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Métricas ---------- */ .agi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--agi-linea); border: 1px solid var(--agi-linea); border-radius: 8px; overflow: hidden; } .agi-tile { background: var(--agi-tarjeta); padding: .85rem 1rem; } .agi-tile b { display: block; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; color: var(--agi-acento); font-variant-numeric: tabular-nums; } .agi-tile span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--agi-tenue); margin-top: .35rem; } .agi-tile i { display: block; font-style: normal; font-size: .78rem; color: var(--agi-suave); margin-top: .2rem; } .agi-tile-alerta b { color: var(--agi-alerta); } /* ---------- Agenda ---------- */ .agi-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--agi-linea); border: 1px solid var(--agi-linea); border-radius: 8px; overflow: hidden; } .agi-dia { background: var(--agi-tarjeta); padding: .6rem .7rem; min-height: 110px; } .agi-dia-hoy { background: #f5fbf9; box-shadow: inset 3px 0 0 var(--agi-acento); } .agi-dia h4 { margin: 0 0 .5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--agi-tenue); display: flex; justify-content: space-between; } .agi-turno { border-top: 1px solid #f0f2f4; padding: .45rem 0; font-size: .8rem; } .agi-turno:first-of-type { border-top: none; } .agi-turno-hora { font-weight: 700; color: var(--agi-acento); font-variant-numeric: tabular-nums; } .agi-turno-cancelado { opacity: .5; text-decoration: line-through; } /* ---------- Conversación ---------- */ .agi-dos { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; } @media (min-width: 980px) { .agi-dos { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); } } .agi-hilo { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding-right: .2rem; } .agi-msg { border-radius: 8px; padding: .55rem .7rem; font-size: .87rem; max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; } .agi-msg-persona { background: #eef2f6; align-self: flex-start; border-bottom-left-radius: 3px; } .agi-msg-ia { background: var(--agi-acento-claro); align-self: flex-end; border-bottom-right-radius: 3px; } .agi-msg-operador { background: var(--agi-ambar-fondo); align-self: flex-end; border-bottom-right-radius: 3px; } .agi-msg-sistema { background: #f5f6f7; align-self: center; font-style: italic; color: var(--agi-suave); font-size: .8rem; max-width: 100%; } .agi-msg-meta { display: block; font-size: .68rem; color: var(--agi-tenue); margin-top: .25rem; font-style: normal; } .agi-lista-datos { list-style: none; margin: 0; padding: 0; font-size: .85rem; } .agi-lista-datos li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid #f0f2f4; } .agi-lista-datos li:last-child { border-bottom: none; } .agi-lista-datos b { color: var(--agi-suave); font-weight: 600; } /* ---------- Tareas ---------- */ .agi-tarea-msg { background: var(--agi-fondo); border-radius: 6px; padding: .65rem .75rem; font-size: .87rem; white-space: pre-wrap; margin: .6rem 0; } .agi-tarea-vencida { border-left: 3px solid var(--agi-ambar); } /* ---------- Avisos ---------- */ .agi-aviso { padding: .7rem .9rem; border-radius: 6px; font-size: .87rem; margin-bottom: 1rem; } .agi-aviso-ok { background: var(--agi-acento-claro); color: var(--agi-acento); } .agi-aviso-error { background: var(--agi-alerta-fondo); color: var(--agi-alerta); } .agi-aviso-atencion { background: var(--agi-ambar-fondo); color: var(--agi-ambar); } /* Vive en , igual que los diálogos: lleva su tipografía explícita para no heredar la del tema del sitio. */ .agi-toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); background: var(--agi-tinta); color: #fff; padding: .65rem 1.1rem; border-radius: 6px; font-family: var(--agi-tipo); font-size: .87rem; line-height: 1.45; z-index: 100001; max-width: 90vw; box-shadow: 0 6px 24px rgba(12, 18, 28, .3); } .agi-toast-error { background: var(--agi-alerta); } .agi-vacio { color: var(--agi-tenue); font-size: .87rem; padding: 1rem 0; text-align: center; } /* ---------- Diálogos ---------- */ .agi-modal-fondo { position: fixed; inset: 0; background: rgba(12, 18, 28, .62); display: flex; align-items: center; justify-content: center; padding: 1.25rem; z-index: 100000; /* por encima de la barra de admin de WordPress */ font-family: var(--agi-tipo); font-size: 15px; line-height: 1.5; color: var(--agi-tinta); -webkit-font-smoothing: antialiased; } .agi-modal { background: var(--agi-tarjeta); border-radius: 10px; width: 100%; max-width: 620px; max-height: min(88vh, 760px); box-shadow: 0 18px 50px rgba(12, 18, 28, .28); /* El encabezado y el pie quedan fijos; sólo el cuerpo se desplaza. */ display: flex; flex-direction: column; overflow: hidden; } .agi-modal > h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; margin: 0; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--agi-linea); flex: 0 0 auto; } .agi-modal form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } /* Sólo el cuerpo se desplaza: el título y los botones quedan siempre visibles. */ .agi-modal-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; } .agi-modal-cuerpo > p { margin: 0; } .agi-modal-pie { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; padding: .9rem 1.4rem; border-top: 1px solid var(--agi-linea); background: var(--agi-fondo); flex: 0 0 auto; } /* Los campos del diálogo repiten los estilos de la aplicación: aquéllos están acotados al contenedor .agi-app y no llegan hasta acá. */ .agi-modal-fondo .agi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .95rem; } .agi-modal-fondo .agi-campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .agi-modal-fondo .agi-campo.agi-ancho { grid-column: 1 / -1; } .agi-modal-fondo .agi-campo label { font-size: .78rem; font-weight: 600; color: var(--agi-suave); } .agi-modal-fondo .agi-campo input, .agi-modal-fondo .agi-campo select, .agi-modal-fondo .agi-campo textarea { width: 100%; max-width: 100%; padding: .55rem .65rem; border: 1px solid var(--agi-linea); border-radius: 5px; font: inherit; font-size: .92rem; background: #fff; color: var(--agi-tinta); } .agi-modal-fondo .agi-campo textarea { resize: vertical; min-height: 66px; } .agi-modal-fondo .agi-campo input[type="checkbox"] { width: auto; flex: 0 0 auto; } .agi-modal-fondo .agi-ayuda { display: block; font-size: .75rem; color: var(--agi-tenue); font-weight: 400; } .agi-modal-fondo .agi-sub { color: var(--agi-suave); font-size: .85rem; } .agi-modal-fondo :focus-visible { outline: 2px solid var(--agi-acento); outline-offset: 2px; } .agi-modal-fondo .agi-btn { background: var(--agi-acento); color: #fff; border: 1px solid var(--agi-acento); padding: .5rem .95rem; border-radius: 6px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; } .agi-modal-fondo .agi-btn:hover { filter: brightness(1.08); } .agi-modal-fondo .agi-btn:disabled { opacity: .55; cursor: default; } .agi-modal-fondo .agi-btn-sec { background: #fff; color: var(--agi-acento); } @media (max-width: 560px) { .agi-modal-fondo { padding: 0; align-items: stretch; } .agi-modal { max-width: none; max-height: 100vh; border-radius: 0; } } /* ---------- Código ---------- */ .agi-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; background: var(--agi-fondo); border: 1px solid var(--agi-linea); border-radius: 5px; padding: .45rem .6rem; width: 100%; word-break: break-all; } /* --- Aviso listo para copiar -------------------------------------------- */ /* El texto se lee y se copia, no se edita: fuente pareja y algo más chica para que la descripción entera entre sin tener que desplazarse. */ .agi-copiable textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; line-height: 1.5; background: var(--agi-fondo); white-space: pre-wrap; } .agi-copiable .agi-entre { align-items: center; margin-bottom: .25rem; } .agi-copiable label { margin: 0; } /* --- Fotos del inmueble -------------------------------------------------- */ .agi-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; } .agi-foto { margin: 0; position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--agi-linea); border-radius: 6px; overflow: hidden; background: var(--agi-fondo); } .agi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* La portada se marca sola: es la que sale en el catálogo y en Marketplace. */ .agi-foto[data-portada] { border-color: var(--agi-acento); border-width: 2px; } .agi-foto[data-portada]::before { content: "Portada"; position: absolute; left: .3rem; top: .3rem; background: var(--agi-acento); color: #fff; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .35rem; border-radius: 3px; } .agi-foto-acciones { position: absolute; right: .3rem; top: .3rem; display: flex; gap: .25rem; opacity: 0; transition: opacity .15s; } .agi-foto:hover .agi-foto-acciones, .agi-foto:focus-within .agi-foto-acciones { opacity: 1; } /* En un celular no hay hover: los botones quedan siempre a la vista. */ @media (hover: none) { .agi-foto-acciones { opacity: 1; } } .agi-foto-acciones button { border: none; background: rgba(0, 0, 0, .65); color: #fff; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; font-size: .8rem; line-height: 1; font-family: inherit; } .agi-foto-acciones button:hover, .agi-foto-acciones button:focus-visible { background: rgba(0, 0, 0, .85); }