:root { --azul: #2563eb; --azul-oscuro: #1d4ed8; --verde: #16a34a; --rojo: #dc2626; --gris-950: #0f172a; --gris-800: #1e293b; --gris-600: #475569; --gris-300: #cbd5e1; --gris-100: #f1f5f9; --blanco: #ffffff; --radio: 8px; } /* ── Tema oscuro ────────────────────────────────────────────── Se activa con [data-theme="oscuro"] en (ver btn-tema en app.js). Al reusar las mismas variables que ya consume el resto del CSS (--blanco, --gris-100, --gris-950...) casi toda la interfaz cambia sola, sin tener que duplicar reglas por componente. */ :root[data-theme="oscuro"] { --gris-950: #f1f5f9; --gris-800: #e2e8f0; --gris-600: #94a3b8; --gris-300: #334155; --gris-100: #0f172a; --blanco: #1e293b; } * { box-sizing: border-box; } html { font-size: 16px; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--gris-100); color: var(--gris-950); } .oculto { display: none !important; } /* ── Login ────────────────────────────────────────────────── */ .pantalla-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--gris-950), var(--azul-oscuro)); } .tarjeta-login { background: var(--blanco); padding: 2.5rem; border-radius: var(--radio); width: 100%; max-width: 380px; box-shadow: 0 20px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: .9rem; } .tarjeta-login h1 { margin: 0; font-size: 1.3rem; } .subtitulo { margin: 0 0 .5rem; color: var(--gris-600); font-size: .9rem; } label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--gris-800); } input, select, textarea { font: inherit; padding: .55rem .7rem; border: 1px solid var(--gris-300); border-radius: 6px; background: var(--blanco); color: var(--gris-950); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } textarea { min-height: 70px; resize: vertical; } input:disabled { background: var(--gris-100); color: var(--gris-600); } button { font: inherit; cursor: pointer; border: none; border-radius: 6px; } .btn-primario { background: var(--azul); color: var(--blanco); padding: .6rem 1rem; font-weight: 600; transition: background .15s; } .btn-primario:hover { background: var(--azul-oscuro); } .btn-secundario { background: var(--gris-100); color: var(--gris-800); padding: .5rem .9rem; font-weight: 600; border: 1px solid var(--gris-300); } .btn-secundario:hover { background: var(--gris-300); } .btn-tabla { background: var(--blanco); color: var(--azul); padding: .3rem .6rem; font-size: .8rem; border: 1px solid var(--azul); border-radius: var(--radio); } .btn-tabla:hover { background: var(--azul); color: var(--blanco); } :root[data-theme="oscuro"] .btn-tabla { background: transparent; color: #60a5fa; border-color: #60a5fa; } :root[data-theme="oscuro"] .btn-tabla:hover { background: #60a5fa; color: var(--gris-100); } .btn-icono { background: transparent; font-size: 1.1rem; color: var(--gris-600); padding: .2rem .5rem; } .error { color: var(--rojo); font-size: .85rem; } .exito { color: var(--verde); font-size: .85rem; } /* Flotante y por encima de cualquier modal (z-index 50) — si no, un error que ocurre con un modal abierto (ej. "Generar plantilla") queda escondido detrás y parece que el botón no hizo nada. */ .mensaje-estado { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; max-width: 90vw; padding: .7rem 1.2rem; border-radius: var(--radio); font-weight: 600; box-shadow: 0 4px 12px rgba(0,0,0,.25); } .mensaje-estado.exito { background: var(--verde); color: #fff; } .mensaje-estado.error { background: var(--rojo); color: #fff; } .cargando, .vacio { color: var(--gris-600); padding: 1rem 0; } /* ── Layout de la app ─────────────────────────────────────── */ .app { display: flex; min-height: 100vh; } .barra-lateral { width: 240px; flex-shrink: 0; /* Fijo (no usa las variables --gris-950/--gris-100): la barra lateral siempre es oscura, tanto en tema claro como oscuro — el toggle de tema solo cambia el contenido principal. */ background: #0f172a; color: #f1f5f9; display: flex; flex-direction: column; padding: 1.2rem 0; /* Pegada arriba y con su propio alto de pantalla completo — antes se desplazaba junto con el contenido principal, así que al entrar a un módulo largo (ej. con muchas filas) tocaba subir de nuevo para ver el menú o los controles de arriba. Solo #nav-modulos hace scroll interno (ver flex:1 arriba), el resto de la barra queda fijo. */ position: sticky; top: 0; height: 100vh; overflow: hidden; } .marca { font-weight: 700; font-size: 1.05rem; padding: 0 1.2rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: .8rem; } .selector-portal { display: flex; flex-direction: column; gap: .3rem; padding: 0 .8rem .8rem; } .selector-portal:empty { padding: 0; } .btn-portal { text-align: left; background: transparent; color: #cbd5e1; padding: .5rem .6rem; font-size: .82rem; font-weight: 600; border-radius: 6px; } .btn-portal:hover { background: rgba(255,255,255,.06); } .btn-portal.activo { background: var(--azul); color: #f1f5f9; } #nav-modulos { flex: 1; overflow-y: auto; } .titulo-grupo { text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; color: #94a3b8; padding: .8rem 1.2rem .3rem; } .enlace-nav { display: block; width: 100%; text-align: left; background: transparent; color: #cbd5e1; padding: .5rem 1.2rem; font-size: .88rem; border-left: 3px solid transparent; } .enlace-nav:hover { background: rgba(255,255,255,.06); } .enlace-nav.activo { background: rgba(37,99,235,.2); color: #f1f5f9; border-left-color: var(--azul); font-weight: 600; } .controles-accesibilidad { padding: .8rem 1.2rem 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; } .controles-accesibilidad .btn-tabla { background: rgba(255,255,255,.06); color: var(--gris-100); border-color: rgba(255,255,255,.15); } .controles-accesibilidad .btn-tabla:hover { background: rgba(255,255,255,.12); } #btn-tema { width: 100%; } .control-fuente { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: #cbd5e1; } .control-fuente span { flex: 1; } .control-fuente button { flex: 0 0 auto; padding: .3rem .6rem; } .usuario-actual { padding: 1rem 1.2rem 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: .8rem; } #usuario-info { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .6rem; font-size: .85rem; } .etiqueta-rol { align-self: flex-start; background: rgba(37,99,235,.25); color: #bfdbfe; padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; text-transform: uppercase; } .contenido { flex: 1; padding: 1.8rem 2.2rem; overflow-y: auto; } /* Título y botones de acción (ej. "+ Nuevo") apilados a la izquierda, en vez de uno a cada extremo — así el botón queda visible arriba del todo, encima de la barra con el nombre del conjunto, sin tener que mirar hacia la esquina derecha para encontrarlo. */ .encabezado { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1rem; gap: .7rem; } .encabezado h2 { margin: 0; } .acciones-encabezado { display: flex; gap: .6rem; flex-wrap: wrap; } .acciones-encabezado .btn-accion-destacada { font-size: 1rem; padding: .7rem 1.3rem; } /* El botón primario del encabezado (normalmente "+ Nuevo") es la acción más importante de la página — más grande y con sombra para que resalte del resto de botones secundarios que lo acompañan. */ .acciones-encabezado .btn-primario { font-size: 1.05rem; padding: .8rem 1.5rem; font-weight: 700; box-shadow: 0 3px 10px rgba(37,99,235,.35); } .btn-flotante-nuevo { position: fixed; right: 2rem; bottom: 2rem; z-index: 40; height: 56px; border-radius: 999px; padding: 0 1.3rem 0 0; background: var(--azul); color: var(--blanco); display: flex; align-items: center; gap: .6rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); transition: background .15s, transform .1s; } .btn-flotante-nuevo:hover { background: var(--azul-oscuro); transform: scale(1.03); } .btn-flotante-nuevo-icono { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 600; flex-shrink: 0; } .btn-flotante-nuevo-texto { font-size: 1rem; font-weight: 600; white-space: nowrap; } .barra-contexto { display: flex; align-items: center; gap: .8rem; background: #eff6ff; border: 1px solid #bfdbfe; color: var(--azul-oscuro); padding: .5rem .9rem; border-radius: 6px; font-size: .85rem; font-weight: 600; margin-bottom: 1rem; } .barra-contexto:empty { display: none; margin: 0; } .nombre-conjunto-activo { font-weight: 800; letter-spacing: .03em; font-size: 1.05rem; } /* El fondo celeste fijo de arriba no se ajustaba al tema oscuro — quedaba un texto claro casi invisible sobre un fondo también claro dentro de una página oscura. */ :root[data-theme="oscuro"] .barra-contexto { background: rgba(37,99,235,.18); border-color: rgba(96,165,250,.4); color: #bfdbfe; } /* "Cambiar conjunto" es la única forma de volver a elegir otro conjunto (para superadmin) — con el estilo genérico de .btn-tabla se perdía dentro de la barra celeste (texto y fondo casi del mismo tono). Se le da su propio color sólido, igual en claro y oscuro, para que se vea siempre como un botón, no como más texto de la barra. */ .barra-contexto .btn-tabla { background: #1d4ed8; color: #ffffff; border: 2px solid #1e3a8a; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: .45rem .9rem; } .barra-contexto .btn-tabla:hover { background: #1e3a8a; border-color: #1e3a8a; } .barra-filtros { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; } .filtro-input { max-width: 220px; } /* ── Tabla ────────────────────────────────────────────────── */ .tabla { width: 100%; border-collapse: collapse; background: var(--blanco); border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); } .tabla th, .tabla td { padding: .6rem .8rem; text-align: left; font-size: .85rem; border-bottom: 1px solid var(--gris-100); } .tabla th { background: var(--gris-100); font-weight: 700; color: var(--gris-800); text-transform: capitalize; } /* rgba en vez de un gris fijo: encima de --blanco funciona tanto en tema claro (se ve gris clarito) como oscuro (se ve gris oscurito), sin quedar más claro que el texto como pasaba con #f8fafc fijo. */ .tabla tbody tr:hover { background: rgba(100, 116, 139, .12); } .celda-acciones { display: flex; gap: .35rem; flex-wrap: wrap; } /* Insignias de estado: fondo sólido + texto blanco en vez de "tinte claro + texto de color", que en el tema oscuro quedaba con muy poco contraste (texto rojo/verde apenas visible sobre fondo oscuro). Un fondo sólido con blanco garantiza buen contraste en cualquier tema. */ .estado-autorizacion { font-weight: 700; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; color: #fff; } .estado-autorizacion.estado-Autorizado { background: #16a34a; } .estado-autorizacion.estado-Rechazado { background: #dc2626; } .estado-autorizacion.estado-Pendiente { background: #b45309; } /* ── Modal ────────────────────────────────────────────────── */ .modal-fondo { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; } .modal { background: var(--blanco); border-radius: var(--radio); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px rgba(0,0,0,.35); } .modal.modal-ancho { max-width: 680px; } .modal-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--gris-100); } .modal-cabecera h3 { margin: 0; } .modal-cuerpo { padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; } #form-modal { display: flex; flex-direction: column; gap: .8rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; align-items: start; } .form-grid .campo-completo { grid-column: 1 / -1; } .form-grid .campo-medio { grid-column: span 1; } .form-grid .acciones-modal, .form-grid #form-modal-error { grid-column: 1 / -1; } @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } .form-grid .campo-medio { grid-column: 1 / -1; } } /* Campos más grandes para tocar con el dedo — solo en los formularios de uso más frecuente en tablet/portería (registrar visitante, recibir paquete), no en toda la app. */ .form-tactil label { font-size: .95rem; } .form-tactil input, .form-tactil select, .form-tactil textarea { padding: .8rem .9rem; font-size: 1rem; } .form-tactil .campo-checkbox { font-size: 1rem; } .form-tactil .campo-checkbox input { width: 22px; height: 22px; } .campo-checkbox { flex-direction: row; align-items: center; gap: .5rem; } .campo-checkbox input { width: auto; } .campo-con-sufijo { display: flex; align-items: center; gap: .5rem; } .campo-con-sufijo input { flex: 1; } .campo-con-sufijo span { color: var(--gris-600); font-weight: 700; } .campo-con-prefijo { display: flex; align-items: center; gap: .4rem; } .campo-con-prefijo input { flex: 1; } .campo-con-prefijo span { color: var(--gris-600); font-weight: 700; } .lista-telefonos { display: flex; flex-direction: column; gap: .5rem; } .btn-telefono { width: 100%; text-align: left; padding: .75rem 1rem; } .campo-con-boton { display: flex; gap: .5rem; } .campo-con-boton select { flex: 1; } .campo-con-boton button { flex-shrink: 0; white-space: nowrap; } .fila-grupo-serie { display: flex; gap: .5rem; align-items: flex-start; } .fila-grupo-serie .campo-con-boton { flex: 2; } .fila-grupo-serie .campo-con-boton input[type="text"] { flex: 1; } .fila-grupo-serie input[type="number"] { flex: 1; min-width: 0; } .acciones-modal { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; } .lista-catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin: .8rem 0; } .opcion-catalogo { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--gris-300); border-radius: var(--radio); cursor: pointer; } .nota-formulario { background: #fff7e6; border: 1px solid #f0c36d; border-radius: var(--radio); padding: .7rem .9rem; font-size: .9rem; color: #7a5b00; margin: 0 0 .6rem; } .calendario-reservas { margin-top: .8rem; } .cal-encabezado { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .5rem; } .cal-leyenda { display: flex; gap: 1rem; align-items: center; font-size: .85rem; margin-bottom: .5rem; color: var(--gris-600, #666); } .cal-punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .25rem; vertical-align: middle; } .cal-punto.cal-libre { background: #e2e8f0; } .cal-punto.cal-pendiente { background: #f0c36d; } .cal-punto.cal-ocupado { background: #e0685f; } .cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; } .cal-celda { text-align: center; padding: .5rem 0; border-radius: var(--radio); font-size: .85rem; } .cal-dia-semana { font-weight: 600; color: var(--gris-600, #666); } .cal-vacia { background: transparent; } .cal-libre { background: #f1f5f9; color: #1e293b; cursor: pointer; } .cal-pendiente { background: #f0c36d; cursor: pointer; color: #5c4400; } .cal-ocupado { background: #e0685f; cursor: pointer; color: #fff; } #cal-detalle-dia { margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--gris-300); } /* Asistente de reserva paso a paso: botones grandes y claros, pensados para que sean fáciles de tocar también en celular y para residentes mayores que prefieren pocas cosas por pantalla a la vez. */ .lista-resultado-plantilla { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: .3rem; } .lista-resultado-plantilla li { padding: .4rem .7rem; background: var(--gris-100); border-radius: var(--radio); } .asistente-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; margin: .8rem 0; } .btn-grande { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; padding: 1rem 1.1rem; border: 2px solid var(--gris-300); border-radius: var(--radio); background: var(--blanco); cursor: pointer; font-size: 1rem; text-align: left; } .btn-grande:hover { border-color: var(--azul, #2563eb); } .btn-grande strong { font-size: 1.05rem; } .btn-grande span { color: var(--gris-600, #666); font-size: .9rem; } .btn-grande-deshabilitado, .btn-grande:disabled { opacity: .45; cursor: not-allowed; } .cal-clicable { cursor: pointer; } .cal-deshabilitada { color: var(--gris-300); } /* Plantilla de generación de unidades: filas dinámicas de torres y grupos de parqueadero, más la tarjeta-resumen del conjunto. */ .fila-plantilla { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; } .fila-plantilla input[type="text"] { flex: 2; min-width: 140px; } .fila-plantilla input[type="number"] { flex: 1; min-width: 80px; } .fila-plantilla select { flex: 1; min-width: 160px; } .fila-plantilla-encabezado span { flex: 1; min-width: 80px; font-size: .8rem; font-weight: 600; color: var(--gris-600, #666); } .fila-plantilla-encabezado span:first-child { flex: 2; min-width: 140px; } .ayuda-plantilla { font-size: .85rem; color: var(--gris-600, #666); margin: .2rem 0 .6rem; } .tarjeta-grupo-parqueo { border: 1px solid var(--gris-300); border-radius: var(--radio); padding: .9rem 1rem; margin-bottom: .8rem; background: var(--gris-100); display: flex; flex-direction: column; gap: .6rem; } .tarjeta-grupo-parqueo label { font-size: .85rem; font-weight: 600; color: var(--gris-800); display: flex; flex-direction: column; gap: .25rem; } .tarjeta-grupo-parqueo input, .tarjeta-grupo-parqueo select { font-weight: 400; } .tarjeta-grupo-parqueo-cabecera { display: flex; justify-content: space-between; align-items: center; } .grupo-torre-piso-apto { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .8rem; } .grupo-torre-piso-apto label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; color: var(--gris-800); } @media (max-width: 480px) { .grupo-torre-piso-apto { grid-template-columns: 1fr; } } .grupo-torre-piso-apto-filtro { display: flex; gap: .4rem; margin-bottom: 0; } .grupo-torre-piso-apto-filtro select { min-width: 130px; } .campo-foto { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; } .campo-foto-botones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .campo-foto input[type="file"] { font-size: .82rem; } .foto-estado { font-size: .8rem; color: var(--verde); } .foto-preview { max-width: 120px; max-height: 120px; border-radius: var(--radio); border: 1px solid var(--gris-300); object-fit: cover; } .captura-camara { display: flex; flex-direction: column; gap: .8rem; align-items: center; } .captura-camara video { width: 100%; max-width: 480px; border-radius: var(--radio); background: #000; } .aviso-guarda-sesion { width: 100%; background: var(--azul); color: #fff; border-radius: var(--radio); padding: .6rem 1rem; font-size: .95rem; margin-bottom: .5rem; } .aviso-guarda-sesion strong { font-size: 1.05rem; } .lista-turno { display: flex; flex-direction: column; gap: .5rem; } .fila-turno-guardia { display: flex; align-items: center; gap: .8rem; background: var(--blanco); border: 1px solid var(--azul); border-radius: var(--radio); padding: .7rem 1rem; } .fila-turno-guardia div { display: flex; flex-direction: column; gap: .15rem; } .fila-turno-guardia span { font-size: .82rem; color: var(--gris-600); } .foto-guardia { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .foto-guardia-vacia { display: flex; align-items: center; justify-content: center; background: var(--gris-100); font-size: 1.4rem; } .fila-turno { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: .7rem 1rem; } .fila-turno div:first-child { display: flex; flex-direction: column; gap: .15rem; } .fila-turno div:first-child span { font-size: .82rem; color: var(--gris-600); } .fila-turno-acciones { display: flex; gap: .4rem; } .fila-accesos-porteria { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .9rem; margin-bottom: 1.4rem; } .tarjeta-acceso { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1.2rem .5rem; font-weight: 600; color: var(--gris-950); cursor: pointer; } .tarjeta-acceso span:first-child { font-size: 1.8rem; } .tarjeta-acceso:hover { border-color: var(--azul); background: var(--gris-100); } .tarjeta-acceso .badge-pendiente { position: absolute; top: -.5rem; right: -.5rem; background: #dc2626; color: #fff; border-radius: 999px; min-width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; padding: 0 .3rem; } .resumen-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .8rem; margin-bottom: 1rem; } .resumen-stat { text-align: center; padding: 1rem; border: 1px solid var(--gris-300); border-radius: var(--radio); background: var(--gris-100); } .resumen-stat strong { display: block; font-size: 1.3rem; color: var(--gris-950); word-break: break-word; } .resumen-stat span { color: var(--gris-600, #666); font-size: .85rem; } .resumen-stat-alerta { background: rgba(220,38,38,.1); border-color: rgba(220,38,38,.35); } .resumen-stat-alerta strong { color: #b91c1c; } .resumen-stat-alerta-naranja { background: rgba(217,119,6,.1); border-color: rgba(217,119,6,.35); } .resumen-stat-alerta-naranja strong { color: #92400e; } /* En tema oscuro el mismo rojo/naranja "oscuro" se pierde sobre fondos oscuros — se usa una versión más clara para mantener buen contraste. */ :root[data-theme="oscuro"] .resumen-stat-alerta strong { color: #f87171; } :root[data-theme="oscuro"] .resumen-stat-alerta-naranja strong { color: #fb923c; } /* Bloque completo resaltado (no solo el número) cuando hay algo urgente pendiente de autorizar — para que sea imposible no verlo al entrar. */ .bloque-alerta-roja { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.25); border-radius: var(--radio); padding: .6rem; } /* Visitas que llevan mucho tiempo dentro sin salida registrada — suele ser que se les olvidó cerrarla, se resalta para revisar en la conciliación de fin de turno. */ .fila-turno-alerta-naranja { border-color: rgba(217,119,6,.5); background: rgba(217,119,6,.06); } .fila-turno-alerta-roja { border-color: rgba(220,38,38,.5); background: rgba(220,38,38,.06); } .tarjeta-torre, .tarjeta-zona-comun { background: var(--blanco); color: var(--gris-950); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1rem; display: flex; flex-direction: column; gap: .35rem; text-align: left; width: 100%; } .tarjeta-torre { cursor: pointer; transition: border-color .15s, box-shadow .15s; } .tarjeta-torre:hover { border-color: var(--azul); box-shadow: 0 4px 12px rgba(37,99,235,.12); } .tarjeta-torre span, .tarjeta-zona-comun span { color: var(--gris-600, #666); font-size: .82rem; } .barra-ocupacion { height: 6px; border-radius: 999px; background: var(--gris-300); overflow: hidden; margin-top: .2rem; } .barra-ocupacion div { height: 100%; background: var(--azul); } .acciones-tarjeta-zona { display: flex; gap: .5rem; margin-top: .5rem; } .acciones-tarjeta-zona .btn-tabla { font-size: .78rem; padding: .3rem .6rem; } .btn-tabla-peligro { color: var(--rojo); border-color: var(--rojo); } .btn-tabla-peligro:hover { background: var(--rojo); color: #fff; } /* La regla de tema oscuro para .btn-tabla (línea ~106) tiene más especificidad que .btn-tabla-peligro sola (usa :root[data-theme] + clase) y ganaría el azul por defecto — se repite aquí con el mismo nivel de especificidad para que el rojo de peligro sí se imponga. */ :root[data-theme="oscuro"] .btn-tabla-peligro { color: #f87171; border-color: #f87171; } :root[data-theme="oscuro"] .btn-tabla-peligro:hover { background: #f87171; color: var(--gris-950); } /* ── Vista rápida en tarjetas (ej. Visitas) ──────────────────── */ .lista-tarjetas-vista { display: flex; flex-direction: column; gap: .6rem; } .tarjeta-vista-rapida { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--blanco); color: var(--gris-950); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: .9rem 1.1rem; } .tarjeta-vista-rapida-info { display: flex; flex-direction: column; gap: .3rem; } .tarjeta-vista-rapida-info strong { font-size: 1.05rem; } .tarjeta-vista-rapida-info span { font-size: .85rem; color: var(--gris-600); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; } .tarjeta-vista-rapida-acciones { display: flex; gap: .5rem; flex-wrap: wrap; } .tarjeta-vista-rapida-acciones .btn-tabla { padding: .55rem 1rem; font-size: .9rem; } /* ── Mapa de ocupación de una torre ──────────────────────────── */ .leyenda-mapa-torre { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .85rem; color: var(--gris-600); } .casilla-leyenda { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: .35rem; vertical-align: middle; } .fila-piso-mapa { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; } .etiqueta-piso-mapa { flex: 0 0 auto; width: 70px; font-size: .82rem; font-weight: 700; color: var(--gris-600); } .grid-mapa-torre { display: flex; flex-wrap: wrap; gap: .4rem; } .casilla-apto { min-width: 46px; height: 40px; padding: 0 .4rem; border-radius: 6px; border: 1px solid transparent; font-weight: 700; font-size: .8rem; cursor: pointer; color: #fff; } .casilla-apto-ocupado { background: #16a34a; } .casilla-apto-ocupado:hover { background: #15803d; } .casilla-apto-mora { background: #dc2626; } .casilla-apto-mora:hover { background: #b91c1c; } .casilla-apto-vacio { background: var(--gris-300); color: var(--gris-800); } .casilla-apto-vacio:hover { background: var(--gris-600); color: #fff; } .paginacion { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .8rem 0; } .tarjeta-formulario { background: var(--blanco); border-radius: var(--radio); padding: 1.2rem; display: flex; flex-direction: column; gap: .8rem; max-width: 480px; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 1rem; } .rejilla-conjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem; } .tarjeta-conjunto { background: var(--blanco); color: var(--gris-950); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1rem; text-align: left; display: flex; flex-direction: column; gap: .3rem; transition: border-color .15s, box-shadow .15s; } .tarjeta-conjunto:hover { border-color: var(--azul); box-shadow: 0 4px 12px rgba(37,99,235,.12); } .tarjeta-conjunto strong { font-size: 1rem; } .tarjeta-conjunto span { color: var(--gris-600); font-size: .82rem; } /* ── Consulta legal ───────────────────────────────────────────── */ .tarjeta-busqueda-legal { background: var(--blanco); border-radius: var(--radio); padding: 1rem 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin-bottom: 1rem; } .ayuda-legal { color: var(--gris-600); font-size: .85rem; margin: 0 0 .7rem; } .fila-busqueda-legal { display: flex; gap: .6rem; flex-wrap: wrap; } .fila-busqueda-legal input[type="text"] { flex: 1 1 320px; padding: .6rem .8rem; border: 1px solid var(--gris-300); border-radius: var(--radio); background: var(--blanco); color: var(--gris-950); font-size: .95rem; } .fila-busqueda-legal select { padding: .6rem .8rem; border: 1px solid var(--gris-300); border-radius: var(--radio); background: var(--blanco); color: var(--gris-950); } .aviso-legal-permanente { display: flex; gap: 1.1rem; align-items: flex-start; background: #eff6ff; border: 2px solid var(--azul); border-left: 8px solid var(--azul); border-radius: var(--radio); padding: 1.3rem 1.6rem; margin-bottom: 1.2rem; } .aviso-legal-icono { font-size: 1.9rem; line-height: 1; } .aviso-legal-permanente strong { color: var(--gris-950); display: block; margin-bottom: .5rem; font-size: 1.15rem; } .aviso-legal-permanente p { color: var(--gris-800); font-size: 1rem; line-height: 1.6; margin: 0 0 .6rem; } .aviso-legal-permanente p:last-child { margin-bottom: 0; } .aviso-legal-destacado { background: rgba(37,99,235,.1); border-radius: 6px; padding: .6rem .8rem; font-weight: 700; color: var(--azul-oscuro) !important; } /* Nota: strong/p ya usan var(--gris-950)/var(--gris-800), que se invierten solos al claro/oscuro — no hay que redeclararlos aquí. Redeclararlos con --gris-100/--gris-300 (variables pensadas para FONDOS, no para texto) fue el bug: en oscuro esas dos se invierten hacia valores oscuros, dejando texto casi negro sobre fondo oscuro. */ :root[data-theme="oscuro"] .aviso-legal-permanente { background: #0c2a52; border-color: #60a5fa; } :root[data-theme="oscuro"] .aviso-legal-destacado { background: rgba(96,165,250,.18); color: #93c5fd !important; } .nota-fuente-publica { color: var(--gris-600); font-size: .8rem; font-style: italic; margin: .7rem 0 0; border-top: 1px dashed var(--gris-300); padding-top: .5rem; } .bloque-alerta-legal { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .fila-alerta-legal { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #fef3c7; border: 1px solid #f59e0b; color: #78350f; border-radius: var(--radio); padding: .7rem 1rem; font-size: .88rem; } :root[data-theme="oscuro"] .fila-alerta-legal { background: #451a03; border-color: #b45309; color: #fde68a; } .fila-situaciones-legal { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; } .btn-situacion-legal { background: var(--gris-100); color: var(--gris-950); border: 1px solid var(--gris-300); border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; cursor: pointer; transition: background .15s; } .btn-situacion-legal:hover { background: var(--azul); color: #fff; border-color: var(--azul); } .btn-situacion-legal.btn-situacion-activo { background: var(--azul); color: #fff; border-color: var(--azul); } /* ── Unidades: chips de acceso rápido + resumen ──────────────── */ .fila-chips-unidades { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; } .fila-filtros-finos-unidades { display: flex; flex-wrap: wrap; gap: .6rem; padding-top: .6rem; border-top: 1px dashed var(--gris-300); } /* ── Unidades: grupos por torre + tarjetas compactas ─────────── */ .grupo-torre-unidades { margin-bottom: 1rem; } .grupo-torre-unidades summary { cursor: pointer; font-weight: 700; font-size: 1rem; color: var(--gris-950); padding: .6rem .8rem; background: var(--gris-100); border-radius: var(--radio); list-style: none; display: flex; align-items: center; gap: .6rem; } .grupo-torre-unidades summary::-webkit-details-marker { display: none; } .grupo-torre-unidades summary::before { content: '▸'; transition: transform .15s; } .grupo-torre-unidades[open] summary::before { transform: rotate(90deg); } .conteo-grupo-torre { color: var(--gris-600); font-size: .82rem; font-weight: 400; } .grilla-tarjetas-unidad { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; padding: .7rem .2rem; } .tarjeta-unidad-compacta { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .4rem; } .tarjeta-unidad-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .4rem; } .tarjeta-unidad-cabecera strong { color: var(--gris-950); font-size: 1rem; } .tarjeta-unidad-detalle { color: var(--gris-600); font-size: .78rem; } .tarjeta-unidad-acciones { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; } .tarjeta-unidad-acciones .btn-tabla { font-size: .74rem; padding: .25rem .5rem; } .etiqueta-mora { background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap; } .etiqueta-inactiva { background: var(--gris-300); color: var(--gris-600); font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; white-space: nowrap; } .tarjeta-unidad-inactiva { opacity: .6; } .tarjeta-unidad-mora { border-color: var(--rojo); } .lista-resultados-legal { display: flex; flex-direction: column; gap: .8rem; } .tarjeta-articulo-legal { background: var(--blanco); border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1rem 1.2rem; box-shadow: 0 1px 3px rgba(0,0,0,.06); } .cabecera-articulo-legal { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; } .etiqueta-ley { background: var(--azul); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: .15rem .5rem; border-radius: 4px; } .cabecera-articulo-legal strong { color: var(--gris-950); } .seccion-articulo-legal { color: var(--gris-600); font-size: .78rem; margin-bottom: .5rem; } .texto-articulo-legal { color: var(--gris-950); line-height: 1.5; white-space: pre-line; margin: 0; } .texto-articulo-legal mark { background: #fde047; color: #422006; padding: 0 .15rem; border-radius: 3px; } :root[data-theme="oscuro"] .texto-articulo-legal mark { background: #ca8a04; color: #fffbeb; } .texto-articulo-legal.oculto { display: none; } .btn-ver-completo-legal { background: none; border: none; color: var(--azul); font-weight: 600; font-size: .85rem; cursor: pointer; padding: .4rem 0; margin-top: .2rem; } .btn-ver-completo-legal:hover { text-decoration: underline; } /* Botón hamburguesa y fondo oscuro del menú móvil: existen en el DOM siempre, pero solo se muestran por debajo de 780px (ver media query). */ .btn-menu-movil { display: none; position: fixed; top: .7rem; left: .7rem; z-index: 210; width: 2.6rem; height: 2.6rem; border-radius: var(--radio); border: 1px solid var(--gris-300); background: var(--blanco); font-size: 1.3rem; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .fondo-menu-movil { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 190; } .fondo-menu-movil.visible { display: block; } @media (max-width: 780px) { .app { flex-direction: column; } .btn-menu-movil { display: block; } /* Antes la barra lateral quedaba apilada arriba del contenido, obligando a hacer scroll para llegar a lo que se quiere usar. Ahora vive fuera de pantalla (izquierda) y solo entra como panel deslizable cuando se abre con el botón hamburguesa. */ .barra-lateral { position: fixed; top: 0; left: 0; height: 100vh; width: 82%; max-width: 320px; overflow-y: auto; z-index: 200; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 2px 0 12px rgba(0,0,0,.25); } .barra-lateral.abierta { transform: translateX(0); } .contenido { padding: 1.2rem; padding-top: 4.2rem; } }