/* Panel operativo — paleta y componentes definidos en PROMPT_DISENO_PWA_PANEL_OPERATIVO.md */ :root { --verde-principal: #0C3527; --verde-secundario: #1F6B4E; --verde-suave: #DFF3EA; --menta-pastel: #EAF8F1; --crema-clara: #FFF8EA; --celeste-suave: #EAF3FF; --lavanda-suave: #F1ECFF; --rosa-suave: #FFEDEF; --amarillo-suave: #FFF4CC; --gris-texto: #26312D; --gris-secundario: #6B7772; --fondo-general: #F6F8F5; --blanco-panel: #FFFFFF; --color-error: #D64545; --color-exito: #2E9D62; --color-advertencia: #D99A18; --color-info: #2978B5; --color-naranja: #C2570C; --naranja-suave: #FFE7D2; --naranja-borde: rgba(194, 87, 12, .3); --escala-fuente: 1; --densidad: 1; /* --- Pares semánticos color + fondo suave + borde (Fase 1 rediseño) --- Reusan los mismos hex de arriba, solo les suman una variante de fondo pastel y un borde tenue para badges/chips/callouts. */ --exito-suave: var(--verde-suave); --exito-borde: rgba(46, 157, 98, .28); --advertencia-suave: var(--amarillo-suave); --advertencia-borde: rgba(217, 154, 24, .3); --peligro: var(--color-error); --peligro-suave: var(--rosa-suave); --peligro-borde: rgba(214, 69, 69, .28); --info-suave: var(--celeste-suave); --info-borde: rgba(41, 120, 181, .28); --radio-tarjeta: 1.5rem; --radio-pastilla: 9999px; --sombra-tarjeta: 0 1px 2px rgba(12, 53, 39, .04), 0 8px 24px -18px rgba(12, 53, 39, .22); } /* --- Preferencias visuales (pantalla "Preferencias", apps/operativo/views.preferencias) --- Todo vive en atributos data-* sobre , leídos de localStorage en base.html antes del primer render. No hay persistencia en el servidor a propósito: es una preferencia de dispositivo/navegador, tal como lo pide PROMPT_DISENO_PWA_PANEL_OPERATIVO.md. */ html[data-tipografia="chico"] { --escala-fuente: 0.9; } html[data-tipografia="grande"] { --escala-fuente: 1.15; } html[data-tipografia="muy-grande"] { --escala-fuente: 1.3; } html[data-densidad="compacta"] { --densidad: 0.65; } html[data-tema="menta"] { --verde-principal: #1F6B4E; --verde-secundario: #2E9D62; } html[data-tema="azul"] { --verde-principal: #0B3D66; --verde-secundario: #2978B5; } html[data-tema="lavanda"] { --verde-principal: #4B3B87; --verde-secundario: #7C5FD1; } html[data-tema="arena"] { --verde-principal: #6B4F2A; --verde-secundario: #A97C42; } html[data-modo="alto-contraste"] { --gris-texto: #000000; --gris-secundario: #333333; } html[data-modo="alto-contraste"] .card-custom, html[data-modo="alto-contraste"] .btn-modulo, html[data-modo="alto-contraste"] .auth-card, html[data-modo="alto-contraste"] .card-familia { border-width: 2px; border-color: #000; } body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: var(--fondo-general); color: var(--gris-texto); font-size: calc(1rem * var(--escala-fuente)); } /* --- Sin flechitas de subir/bajar en campos numéricos (importes, cantidades): se prestan a cambiar el valor por accidente con un clic o con el scroll del mouse. El campo sigue siendo type="number" (teclado numérico en celular, valida que sea un número), solo se le saca el widget nativo. --- */ input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } a { text-decoration: none; color: inherit; } /* --- Tipografía de títulos (Fase 1 rediseño): Plus Jakarta Sans para encabezados, Inter para texto. Todo multiplica por --escala-fuente para respetar la preferencia de tamaño de fuente del usuario. --- */ h1, h2, h3, h4, .card-custom h2, .card-custom h3, .pagina-titulo, .seccion-titulo, .stat-numero { font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.015em; } .pagina-titulo { font-size: calc(1.5rem * var(--escala-fuente)); font-weight: 800; color: var(--verde-principal); margin-bottom: .25rem; } .seccion-titulo { font-size: calc(1.125rem * var(--escala-fuente)); font-weight: 700; color: var(--verde-principal); margin-bottom: .5rem; } .stat-numero { font-size: calc(1.875rem * var(--escala-fuente)); font-weight: 800; line-height: 1.1; } .etiqueta-micro { font-size: calc(.75rem * var(--escala-fuente)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-secundario); } /* --- Shell de la app: topbar + contenido + nav inferior --- */ .app-shell { padding-bottom: 5.5rem; min-height: 100vh; } .app-topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; background: var(--verde-principal); color: white; position: sticky; top: 0; z-index: 20; } .app-topbar__marca { display: flex; align-items: center; gap: .6rem; min-width: 0; } .app-topbar__marca strong { display: block; font-size: .95rem; } .app-topbar__marca small { display: block; color: #cfe7dc; font-size: .75rem; } .app-topbar__logo { width: 2.6rem; height: 2.6rem; border-radius: .65rem; background: #fff; padding: .3rem; object-fit: contain; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .app-topbar__acciones { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } /* Botón-ícono circular del header (hoy solo notificaciones). SVG en vez de emoji: el emoji de campana se renderiza distinto según el teléfono (en algunos Android/Samsung aparece con un fondo propio tipo "sticker"), un trazo con currentColor se ve igual en todos lados. */ .app-topbar__boton-icono { position: relative; display: flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex-shrink: 0; background: rgba(255,255,255,.14); border: 0; color: white; cursor: pointer; line-height: 1; } .app-topbar__boton-icono:hover { background: rgba(255,255,255,.22); } .app-topbar__icono-svg { display: block; } .app-topbar__punto { position: absolute; top: .3rem; right: .35rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--peligro); border: 2px solid var(--verde-principal); } .app-layout { display: block; } .app-contenido { max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem 2rem; min-width: 0; } .app-mensajes { margin-bottom: .75rem; } /* --- Navegación: mismo link (_nav_link.html) en dos contenedores distintos. .bottom-nav lo muestra en fila fija abajo (mobile/tablet); .side-nav lo muestra en columna fija a la izquierda (desktop, ver media query). --- */ .nav-link { display: flex; align-items: center; color: var(--gris-secundario); border-radius: .7rem; } .nav-link.active { color: var(--verde-principal); font-weight: 600; background: var(--menta-pastel); } .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; background: var(--blanco-panel); border-top: 1px solid #e3e9e4; padding: .4rem 0 calc(.4rem + env(safe-area-inset-bottom)); z-index: 30; } .bottom-nav .nav-link { flex-direction: column; gap: .1rem; font-size: .7rem; padding: .3rem .6rem; } .bottom-nav .nav-link__icono { font-size: 1.2rem; line-height: 1; } .side-nav { display: none; } @media (min-width: 992px) { .bottom-nav { display: none; } .app-shell { padding-bottom: 0; } .app-layout { display: flex; align-items: flex-start; gap: 2rem; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .app-contenido { max-width: none; margin: 0; padding: 2.25rem 0 2.5rem; flex: 1; } .side-nav { display: flex; flex-direction: column; gap: .3rem; position: sticky; top: 5rem; align-self: flex-start; width: 14rem; flex-shrink: 0; padding-top: 1.75rem; } .side-nav .nav-link { gap: .8rem; padding: .75rem 1rem; font-size: .95rem; font-weight: 600; } .side-nav .nav-link__icono { font-size: 1.3rem; } } /* --- Pantallas de autenticación / selección de perfil --- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--verde-principal), var(--verde-secundario)); padding: 1.5rem; } .auth-card { background: var(--blanco-panel); border-radius: 1.25rem; padding: 2rem 1.75rem; width: 100%; max-width: 400px; box-shadow: 0 20px 45px rgba(12,53,39,.25); text-align: center; } .auth-card--ancha { max-width: 460px; } .auth-card__logo { display: block; width: 5rem; height: 5rem; object-fit: contain; margin: 0 auto 1rem; } .auth-card__marca { font-weight: 700; color: var(--verde-principal); font-size: 1.4rem; margin-bottom: .25rem; } .auth-card__frase { color: var(--gris-secundario); margin-bottom: 1.75rem; } .btn-google { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .75rem 1rem; border-radius: .75rem; background: white; border: 1px solid #d6dcd8; color: var(--gris-texto); font-weight: 600; font-size: .95rem; } .btn-google:hover { background: var(--menta-pastel); } .auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--gris-secundario); font-size: .8rem; margin: 1.25rem 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e3e9e4; } .auth-volver { display: inline-block; margin-top: 1.5rem; font-size: .85rem; color: var(--gris-secundario); text-decoration: underline; } .auth-volver:hover { color: var(--verde-principal); } /* --- Botones grandes de módulo (home) --- */ .modulo-grid { display: grid; gap: .9rem; } .btn-modulo { display: flex; align-items: center; gap: 1rem; background: var(--blanco-panel); border-radius: var(--radio-tarjeta); padding: calc(1.25rem * var(--densidad)) calc(1.25rem * var(--densidad)); box-shadow: var(--sombra-tarjeta); border: 1px solid #eef2ef; transition: box-shadow .15s ease, transform .15s ease; } a.btn-modulo:hover { box-shadow: 0 1px 2px rgba(12,53,39,.04), 0 10px 28px -16px rgba(12,53,39,.3); transform: translateY(-1px); } .btn-modulo__icono { font-size: 1.8rem; } .btn-modulo__titulo { font-weight: 700; color: var(--verde-principal); display: block; } .btn-modulo__detalle { color: var(--gris-secundario); font-size: .85rem; } /* Variante