/* ============================================================================ HUB VIBE CODING — Hoja de estilos ============================================================================ Estructura de este archivo (de arriba a abajo): 1. Variables CSS → colores, tamaños y tipografías de los DOS temas 2. Reset & base → tipografía global, normalización 3. Layout → cabecera, menú lateral, main, footer 4. Componentes → tarjetas, tablas, formularios, botones, glosario 5. Mapa → estilos del contenedor de Leaflet 6. Utilidades → skip-link, honeypot, helpers 7. Responsive → ajustes para tablet (768px) y escritorio (1024px) Filosofía: - Mobile-first: lo que ves PRIMERO es la versión móvil. Los @media van AÑADIENDO ancho, no quitando. - Variables CSS: los colores viven en :root y cambian según data-tema. No hay un "@media (prefers-color-scheme)" porque queremos respetar la elección manual del usuario (guardada en localStorage). - BEM naming: bloque, bloque__elemento, bloque--modificador. ============================================================================ */ /* ============================================================================ 1) VARIABLES CSS — los dos temas ============================================================================ Las variables se declaran con --nombre y se leen con var(--nombre). Cuando cambies el atributo data-tema del , todas las variables se actualizan a la vez y todo el sitio cambia de color sin recargar. ============================================================================ */ :root { /* Tipografías. Usar la del sistema es más rápido y nativo en cada SO. */ --fuente-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace; /* Tamaños base */ --tamano-base: 16px; --linea-base: 1.6; /* Espaciados (sistema de 8px). Usar siempre estos en lugar de números sueltos da consistencia visual. */ --esp-1: 0.25rem; /* 4px */ --esp-2: 0.5rem; /* 8px */ --esp-3: 0.75rem; /* 12px */ --esp-4: 1rem; /* 16px */ --esp-5: 1.5rem; /* 24px */ --esp-6: 2rem; /* 32px */ --esp-7: 3rem; /* 48px */ --esp-8: 4rem; /* 64px */ /* Bordes redondeados */ --radio-pequeno: 4px; --radio-mediano: 8px; --radio-grande: 12px; /* Anchos de layout */ --ancho-menu: 240px; --ancho-cabecera: 64px; /* Transiciones */ --transicion-rapida: 150ms ease; --transicion-media: 250ms ease; } /* ----- Tema OSCURO (por defecto) ----- */ :root, [data-tema="dark"] { --color-fondo: #0d1117; /* fondo de toda la página */ --color-superficie: #161b22; /* fondo de tarjetas y bloques */ --color-superficie-alt: #1c2128; /* fondo más elevado (hover, etc.) */ --color-borde: #30363d; /* líneas separadoras */ --color-borde-suave: #21262d; /* bordes sutiles */ --color-texto: #f0f6fc; /* texto principal */ --color-texto-secundario:#8b949e; /* texto secundario / placeholders */ --color-texto-suave: #6e7681; /* texto muy sutil (footer, etc.) */ --color-acento: #d97757; /* color de marca (ámbar Anthropic) */ --color-acento-hover: #e08869; --color-acento-suave: rgba(217, 119, 87, 0.15); --color-exito: #56d364; --color-aviso: #e3b341; --color-error: #f85149; --sombra-pequena: 0 1px 2px rgba(0, 0, 0, 0.4); --sombra-mediana: 0 4px 12px rgba(0, 0, 0, 0.5); --sombra-grande: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ----- Tema CLARO ----- */ [data-tema="light"] { --color-fondo: #ffffff; --color-superficie: #f6f8fa; --color-superficie-alt: #eaeef2; --color-borde: #d1d9e0; --color-borde-suave: #e6ebf1; --color-texto: #1f2328; --color-texto-secundario:#59636e; --color-texto-suave: #818b99; --color-acento: #c2643f; /* algo más oscuro para que contraste con blanco */ --color-acento-hover: #a85432; --color-acento-suave: rgba(194, 100, 63, 0.12); --color-exito: #1a7f37; --color-aviso: #9a6700; --color-error: #cf222e; --sombra-pequena: 0 1px 2px rgba(0, 0, 0, 0.06); --sombra-mediana: 0 4px 12px rgba(0, 0, 0, 0.08); --sombra-grande: 0 12px 32px rgba(0, 0, 0, 0.12); } /* ============================================================================ 2) RESET & BASE ============================================================================ Reset mínimo para que el navegador no aplique márgenes raros por defecto. ============================================================================ */ *, *::before, *::after { /* box-sizing: border-box → el padding y el border SE INCLUYEN dentro del width. Sin esto, "width: 100%" + padding hace que el elemento sea más ancho que su padre y aparezcan scrolls horizontales. */ box-sizing: border-box; } html { font-size: var(--tamano-base); /* Scroll suave al hacer click en enlaces internos (#seccion). */ scroll-behavior: smooth; /* Compensar el alto de la cabecera cuando saltamos a un ancla. */ scroll-padding-top: var(--ancho-cabecera); } body { margin: 0; font-family: var(--fuente-base); font-size: 1rem; line-height: var(--linea-base); color: var(--color-texto); background-color: var(--color-fondo); /* Suavizado de fuente en macOS / iOS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Animación suave al cambiar de tema */ transition: background-color var(--transicion-media), color var(--transicion-media); } /* Texto y enlaces */ h1, h2, h3, h4 { margin: 0 0 var(--esp-3); line-height: 1.25; font-weight: 700; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0 0 var(--esp-4); } a { color: var(--color-acento); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--transicion-rapida), color var(--transicion-rapida); } a:hover, a:focus-visible { color: var(--color-acento-hover); border-bottom-color: currentColor; } code, kbd { font-family: var(--fuente-mono); font-size: 0.9em; background: var(--color-superficie-alt); padding: 0.15em 0.4em; border-radius: var(--radio-pequeno); border: 1px solid var(--color-borde-suave); } kbd { /* kbd se ve más "tecla de teclado" con sombra */ box-shadow: 0 1px 0 var(--color-borde); font-weight: 600; } img, svg { max-width: 100%; height: auto; display: block; } ul, ol { padding-left: var(--esp-5); } li { margin-bottom: var(--esp-2); } /* Resaltado al seleccionar texto con el ratón */ ::selection { background: var(--color-acento-suave); color: var(--color-texto); } /* Foco visible para teclado (accesibilidad importante) */ :focus-visible { outline: 2px solid var(--color-acento); outline-offset: 2px; border-radius: var(--radio-pequeno); } /* ============================================================================ 3) LAYOUT — cabecera, menú lateral, contenido, pie ============================================================================ */ /* ---------- CABECERA SUPERIOR ---------- */ .cabecera { position: sticky; /* se queda pegada arriba al hacer scroll */ top: 0; z-index: 100; /* por encima de todo */ background: var(--color-superficie); border-bottom: 1px solid var(--color-borde); backdrop-filter: blur(8px); } .cabecera__interior { height: var(--ancho-cabecera); max-width: 1400px; margin: 0 auto; padding: 0 var(--esp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); } .logo { display: inline-flex; align-items: center; gap: var(--esp-2); color: var(--color-texto); border: none; font-size: 1.05rem; } .logo:hover { color: var(--color-acento); } .logo__icono { font-size: 1.4rem; } .logo__texto strong { color: var(--color-acento); } /* ---------- BOTÓN HAMBURGUESA (menú móvil) ---------- */ .boton-menu { background: transparent; border: 1px solid var(--color-borde); border-radius: var(--radio-mediano); width: 40px; height: 40px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transicion-rapida); } .boton-menu:hover { background: var(--color-superficie-alt); } .hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 18px; height: 2px; background: var(--color-texto); border-radius: 2px; position: relative; } .hamburguesa::before, .hamburguesa::after { content: ""; position: absolute; left: 0; } .hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; } /* ---------- BOTÓN TEMA (sol/luna) ---------- */ .boton-tema { background: transparent; border: 1px solid var(--color-borde); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; position: relative; overflow: hidden; transition: background var(--transicion-rapida); } .boton-tema:hover { background: var(--color-superficie-alt); } .boton-tema__icono { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.1rem; transition: opacity var(--transicion-media), transform var(--transicion-media); } /* Mostrar SOL en tema dark (porque al pulsar irá al claro = sol), y LUNA en tema light (al pulsar irá al oscuro = luna). */ [data-tema="dark"] .boton-tema__icono--luna { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } [data-tema="dark"] .boton-tema__icono--sol { opacity: 1; } [data-tema="light"] .boton-tema__icono--sol { opacity: 0; transform: translate(-50%, -50%) rotate(180deg); } [data-tema="light"] .boton-tema__icono--luna { opacity: 1; } /* ---------- CONTENEDOR principal (aside + main) ---------- */ .contenedor { max-width: 1400px; margin: 0 auto; display: flex; min-height: calc(100vh - var(--ancho-cabecera)); } /* ---------- MENÚ LATERAL ---------- */ /* En móvil está OCULTO por defecto. Se abre añadiendo la clase .menu-lateral--abierto desde JS al pulsar la hamburguesa. */ .menu-lateral { position: fixed; top: var(--ancho-cabecera); left: 0; bottom: 0; width: var(--ancho-menu); background: var(--color-superficie); border-right: 1px solid var(--color-borde); padding: var(--esp-5) var(--esp-3); z-index: 90; overflow-y: auto; transform: translateX(-100%); transition: transform var(--transicion-media); } .menu-lateral--abierto { transform: translateX(0); } .menu-lateral__lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--esp-1); } .menu-lateral__enlace { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-mediano); color: var(--color-texto-secundario); border: none; font-weight: 500; transition: background var(--transicion-rapida), color var(--transicion-rapida); } .menu-lateral__enlace:hover { background: var(--color-superficie-alt); color: var(--color-texto); } .menu-lateral__enlace--activo { background: var(--color-acento-suave); color: var(--color-acento); font-weight: 600; } .menu-lateral__pie { margin-top: var(--esp-4); padding-top: var(--esp-4); border-top: 1px solid var(--color-borde-suave); color: var(--color-texto-suave); font-size: 0.85rem; text-align: center; } /* Botón de compartir por WhatsApp en el menú lateral */ .menu-lateral__compartir { display: flex; align-items: center; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-5); padding: var(--esp-3) var(--esp-4); background: #25d366; /* verde oficial de WhatsApp */ color: #ffffff !important; /* sobreescribir el color de enlace */ border: none; border-radius: var(--radio-mediano); font-weight: 600; font-size: 0.9rem; text-align: center; transition: background var(--transicion-rapida), transform var(--transicion-rapida); } .menu-lateral__compartir:hover { background: #1ebe57; color: #ffffff !important; transform: translateY(-1px); } .menu-lateral__compartir-icono { font-size: 1.1rem; } /* ---------- CONTENIDO PRINCIPAL ---------- */ .contenido { flex: 1; padding: var(--esp-5) var(--esp-4); min-width: 0; /* evita overflow horizontal */ } .seccion { padding: var(--esp-6) 0; border-bottom: 1px solid var(--color-borde-suave); scroll-margin-top: var(--ancho-cabecera); } .seccion:last-child { border-bottom: none; } .seccion__cabecera { margin-bottom: var(--esp-5); } .seccion__cabecera p { color: var(--color-texto-secundario); font-size: 1.05rem; margin-bottom: 0; } /* ---------- HERO de inicio ---------- */ .seccion--hero { padding-top: var(--esp-7); padding-bottom: var(--esp-6); } .hero { text-align: center; max-width: 800px; margin: 0 auto var(--esp-6); } .hero__saludo { color: var(--color-texto-secundario); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: var(--esp-2); } .hero__titulo { margin-bottom: var(--esp-4); } .hero__subtitulo { color: var(--color-texto-secundario); font-size: 1.1rem; max-width: 600px; margin: 0 auto var(--esp-5); } .hero__acciones { display: flex; gap: var(--esp-3); justify-content: center; flex-wrap: wrap; } .acento { color: var(--color-acento); } /* ---------- TARJETAS RESUMEN (números bajo el hero) ---------- */ .tarjetas-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-4); max-width: 700px; margin: 0 auto; } .tarjeta-resumen { text-align: center; padding: var(--esp-4); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); } .tarjeta-resumen__numero { display: block; font-size: 2rem; font-weight: 700; color: var(--color-acento); line-height: 1; } .tarjeta-resumen__texto { color: var(--color-texto-secundario); font-size: 0.9rem; } /* ---------- PIE DE PÁGINA ---------- */ .pie { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--color-texto-suave); border-top: 1px solid var(--color-borde-suave); background: var(--color-superficie); font-size: 0.9rem; } .pie p { margin: var(--esp-2) 0; } /* ============================================================================ 4) COMPONENTES — tarjetas IA, formularios, tablas, glosario... ============================================================================ */ /* ---------- BOTONES ---------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-5); border-radius: var(--radio-mediano); font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 1px solid transparent; transition: all var(--transicion-rapida); text-decoration: none; } .boton--primario { background: var(--color-acento); color: #ffffff; border-color: var(--color-acento); } .boton--primario:hover, .boton--primario:focus-visible { background: var(--color-acento-hover); border-color: var(--color-acento-hover); color: #ffffff; } .boton--secundario { background: transparent; color: var(--color-texto); border-color: var(--color-borde); } .boton--secundario:hover, .boton--secundario:focus-visible { background: var(--color-superficie-alt); border-color: var(--color-acento); color: var(--color-acento); } .boton:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- REJILLA de tarjetas (IA y recursos) ---------- */ .rejilla-tarjetas { display: grid; grid-template-columns: 1fr; /* 1 columna en móvil */ gap: var(--esp-5); } .tarjeta-ia { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-5); transition: transform var(--transicion-rapida), border-color var(--transicion-rapida); } .tarjeta-ia:hover { transform: translateY(-2px); border-color: var(--color-acento); } .tarjeta-ia__cabecera { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-4); padding-bottom: var(--esp-4); border-bottom: 1px solid var(--color-borde-suave); flex-wrap: wrap; } .tarjeta-ia__cabecera h3 { margin: 0; flex: 1; } .tarjeta-ia__logo { font-size: 1.8rem; width: 44px; height: 44px; background: var(--color-acento-suave); border-radius: var(--radio-mediano); display: inline-flex; align-items: center; justify-content: center; } .tarjeta-ia__empresa { font-size: 0.8rem; color: var(--color-texto-secundario); background: var(--color-superficie-alt); padding: 0.2em 0.6em; border-radius: 999px; } .tarjeta-ia__resumen { color: var(--color-texto-secundario); margin-bottom: var(--esp-4); } .tarjeta-ia__lista { margin-bottom: var(--esp-4); } .tarjeta-ia__lista li { font-size: 0.95rem; } .tarjeta-ia__cuando { background: var(--color-superficie-alt); padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-mediano); border-left: 3px solid var(--color-acento); font-size: 0.95rem; margin: 0; } /* ---------- BLOQUES DE TEXTO (Vibe Coding, Geo) ---------- */ .bloque-texto { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-5); margin-bottom: var(--esp-5); } .bloque-texto h3 { margin-top: 0; color: var(--color-acento); } .bloque-texto p:last-child { margin-bottom: 0; } .rejilla-dos-columnas { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } .bloque-pros, .bloque-contras { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-5); } .bloque-pros h3 { color: var(--color-exito); margin-top: 0; } .bloque-contras h3 { color: var(--color-aviso); margin-top: 0; } .bloque-pros ul, .bloque-contras ul { margin: 0; } /* ---------- TABLAS (Cheat Sheet) ---------- */ .tabla-contenedor { overflow-x: auto; /* scroll horizontal en móvil si la tabla es ancha */ margin-bottom: var(--esp-5); border-radius: var(--radio-grande); border: 1px solid var(--color-borde); background: var(--color-superficie); } .tabla { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tabla caption { text-align: left; padding: var(--esp-4); font-weight: 600; color: var(--color-acento); background: var(--color-superficie-alt); border-bottom: 1px solid var(--color-borde); } .tabla th, .tabla td { padding: var(--esp-3) var(--esp-4); text-align: left; border-bottom: 1px solid var(--color-borde-suave); } .tabla th { background: var(--color-superficie-alt); color: var(--color-texto); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .tabla tbody tr:last-child td { border-bottom: none; } .tabla tbody tr:hover { background: var(--color-superficie-alt); } /* ---------- GLOSARIO ---------- */ .glosario { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } .glosario dt { font-weight: 700; color: var(--color-acento); margin-bottom: var(--esp-1); font-size: 1.05rem; } .glosario dd { margin: 0 0 var(--esp-3); color: var(--color-texto-secundario); padding-left: var(--esp-4); border-left: 2px solid var(--color-borde); } /* ---------- FORMULARIO BITÁCORA ---------- */ .formulario { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-5); margin-bottom: var(--esp-6); display: grid; gap: var(--esp-4); } .formulario__campo { display: flex; flex-direction: column; gap: var(--esp-2); } .formulario__fila { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } .formulario label { font-weight: 600; font-size: 0.9rem; color: var(--color-texto); } .formulario input, .formulario select, .formulario textarea { width: 100%; padding: var(--esp-3); background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-mediano); color: var(--color-texto); font-family: inherit; font-size: 1rem; transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida); } .formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); } .formulario textarea { resize: vertical; min-height: 120px; font-family: var(--fuente-mono); font-size: 0.95rem; } .formulario__contador { color: var(--color-texto-suave); font-size: 0.8rem; text-align: right; } .formulario__acciones { display: flex; align-items: center; gap: var(--esp-4); flex-wrap: wrap; } .formulario__estado { font-size: 0.9rem; } .formulario__estado--exito { color: var(--color-exito); } .formulario__estado--error { color: var(--color-error); } /* ---------- CAMPO CON OJO (toggle mostrar/ocultar contraseña) ---------- */ .campo-con-ojo { position: relative; display: flex; } .campo-con-ojo input { flex: 1; padding-right: 3rem; /* espacio para el ojo */ } .boton-ojo { position: absolute; right: 0; top: 0; bottom: 0; width: 2.75rem; background: transparent; border: none; cursor: pointer; color: var(--color-texto-secundario); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radio-mediano); } .boton-ojo:hover { color: var(--color-acento); } .boton-ojo__icono { font-size: 1.2rem; line-height: 1; } /* Mostrar el icono "ojo" cuando la clave está oculta (por defecto) y el icono "mono tapándose los ojos" cuando está visible. */ .boton-ojo .boton-ojo__icono--ocultar { display: none; } .boton-ojo[aria-pressed="true"] .boton-ojo__icono--mostrar { display: none; } .boton-ojo[aria-pressed="true"] .boton-ojo__icono--ocultar { display: inline; } /* ---------- CHEAT SHEET — selector de IA ---------- */ .cheat-selector { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-5); flex-wrap: wrap; } .cheat-selector label { font-weight: 600; color: var(--color-texto-secundario); font-size: 0.95rem; } .cheat-selector__select { padding: var(--esp-2) var(--esp-4); background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-mediano); color: var(--color-texto); font-family: inherit; font-size: 1rem; cursor: pointer; min-width: 220px; } .cheat-selector__select:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); } /* ---------- LISTA DE NOTAS PUBLICADAS ---------- */ .lista-notas__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--esp-4); flex-wrap: wrap; gap: var(--esp-3); } .lista-notas__cabecera h3 { margin: 0; } .lista-notas__filtros { display: flex; align-items: center; gap: var(--esp-2); font-size: 0.9rem; } .lista-notas__filtros select { padding: var(--esp-2) var(--esp-3); background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-mediano); color: var(--color-texto); font-family: inherit; font-size: 0.9rem; } .lista-notas__contenedor { display: grid; gap: var(--esp-4); /* Mostramos solo ~3 notas a la vez. Si hay más, scroll vertical interno para no estirar la página entera. 75vh = 3/4 de la altura de la pantalla, que cabe ~3 notas medias. */ max-height: 75vh; overflow-y: auto; /* Pequeño padding interno para que el scrollbar no pegue al contenido */ padding-right: var(--esp-2); } /* Scrollbar discreto y consistente con el tema */ .lista-notas__contenedor::-webkit-scrollbar { width: 8px; } .lista-notas__contenedor::-webkit-scrollbar-track { background: var(--color-fondo); border-radius: var(--radio-pequeno); } .lista-notas__contenedor::-webkit-scrollbar-thumb { background: var(--color-borde); border-radius: var(--radio-pequeno); } .lista-notas__contenedor::-webkit-scrollbar-thumb:hover { background: var(--color-acento); } .lista-notas__vacio { text-align: center; color: var(--color-texto-suave); padding: var(--esp-6); background: var(--color-superficie); border: 1px dashed var(--color-borde); border-radius: var(--radio-grande); } .nota { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-4) var(--esp-5); transition: border-color var(--transicion-rapida); } .nota:hover { border-color: var(--color-acento); } .nota__cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3); margin-bottom: var(--esp-2); flex-wrap: wrap; } .nota__titulo { margin: 0; color: var(--color-acento); font-size: 1.1rem; } .nota__meta { display: flex; gap: var(--esp-3); font-size: 0.85rem; color: var(--color-texto-secundario); flex-wrap: wrap; } .nota__categoria { background: var(--color-acento-suave); color: var(--color-acento); padding: 0.15em 0.6em; border-radius: 999px; font-weight: 600; font-size: 0.75rem; } .nota__contenido { margin: 0 0 var(--esp-3); color: var(--color-texto); white-space: pre-wrap; /* respeta saltos de línea del usuario */ } /* Botones editar/eliminar al pie de cada nota (solo visibles para admin tras pulsar). El UX completo lo gestiona el JS. */ .nota__acciones { display: flex; gap: var(--esp-2); justify-content: flex-end; padding-top: var(--esp-3); border-top: 1px solid var(--color-borde-suave); } .nota__accion { background: transparent; border: 1px solid var(--color-borde); color: var(--color-texto-secundario); padding: var(--esp-1) var(--esp-3); border-radius: var(--radio-pequeno); cursor: pointer; font-size: 0.85rem; font-family: inherit; transition: all var(--transicion-rapida); } .nota__accion:hover { border-color: var(--color-acento); color: var(--color-acento); background: var(--color-acento-suave); } .nota__accion--eliminar:hover { border-color: var(--color-error); color: var(--color-error); background: transparent; } /* ---------- AJUSTES PARA LEAFLET en tema oscuro ---------- */ /* El control de capas de Leaflet usa fondo blanco por defecto, lo que choca en modo oscuro. Lo adaptamos a las variables del tema. */ [data-tema="dark"] .leaflet-control-layers, [data-tema="dark"] .leaflet-control-attribution, [data-tema="dark"] .leaflet-bar a { background: var(--color-superficie) !important; color: var(--color-texto) !important; border-color: var(--color-borde) !important; } [data-tema="dark"] .leaflet-control-layers-expanded { color: var(--color-texto); } [data-tema="dark"] .leaflet-control-attribution a { color: var(--color-acento); } [data-tema="dark"] .leaflet-popup-content-wrapper, [data-tema="dark"] .leaflet-popup-tip { background: var(--color-superficie); color: var(--color-texto); } /* ---------- RECURSOS (cards de enlaces) ---------- */ .rejilla-recursos { display: grid; grid-template-columns: 1fr; gap: var(--esp-4); } .recurso { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio-grande); padding: var(--esp-4) var(--esp-5); } .recurso h3 { margin-top: 0; margin-bottom: var(--esp-3); color: var(--color-acento); font-size: 1.05rem; } .recurso ul { list-style: none; padding: 0; margin: 0; } .recurso li { margin-bottom: var(--esp-2); } /* ============================================================================ 5) MAPA (Leaflet) ============================================================================ */ .mapa { width: 100%; height: 400px; border-radius: var(--radio-grande); border: 1px solid var(--color-borde); margin-bottom: var(--esp-3); /* z-index bajo para que no tape al menú lateral */ z-index: 1; } .nota-pequena { color: var(--color-texto-suave); font-size: 0.85rem; } /* ----- BUSCADOR DEL MAPA ----- */ .buscador-mapa { display: flex; gap: var(--esp-2); margin-bottom: var(--esp-3); flex-wrap: wrap; } .buscador-mapa__input { flex: 1; min-width: 200px; padding: var(--esp-3) var(--esp-4); background: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: var(--radio-mediano); color: var(--color-texto); font-family: inherit; font-size: 1rem; transition: border-color var(--transicion-rapida), box-shadow var(--transicion-rapida); } .buscador-mapa__input:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); } .buscador-mapa__boton { padding-left: var(--esp-4); padding-right: var(--esp-4); } /* Ocultar el texto "Buscar" en móvil — solo se ve la lupa para ahorrar espacio */ @media (max-width: 480px) { .buscador-mapa__boton span { display: none; } } .buscador-mapa__estado { min-height: 1.4em; margin: 0 0 var(--esp-3); font-size: 0.9rem; color: var(--color-texto-secundario); } .buscador-mapa__estado--exito { color: var(--color-exito); } .buscador-mapa__estado--error { color: var(--color-error); } .buscador-mapa__estado--cargando { color: var(--color-acento); } /* Utilidad: ocultar visualmente pero accesible para lectores de pantalla */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ 6) UTILIDADES ============================================================================ */ /* Skip link: invisible hasta que recibe foco con teclado */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--color-acento); color: #ffffff; padding: var(--esp-3) var(--esp-4); border-radius: 0 0 var(--radio-mediano) 0; z-index: 200; border: none; } .skip-link:focus { top: 0; color: #ffffff; } /* Honeypot: invisible para humanos pero presente en el HTML para bots */ .honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ============================================================================ 7) RESPONSIVE — tablet y escritorio ============================================================================ Mobile-first significa que TODO lo de arriba aplica a móvil. Aquí solo AÑADIMOS reglas que mejoran la experiencia en pantallas más grandes. ============================================================================ */ /* ----- TABLET y arriba (≥ 768px) ----- */ @media (min-width: 768px) { .rejilla-tarjetas { grid-template-columns: repeat(2, 1fr); } .rejilla-dos-columnas { grid-template-columns: 1fr 1fr; } .rejilla-recursos { grid-template-columns: repeat(2, 1fr); } .formulario__fila { grid-template-columns: 1fr 1fr; } .glosario { grid-template-columns: repeat(2, 1fr); } .mapa { height: 500px; } } /* ----- ESCRITORIO y arriba (≥ 1024px) ----- */ @media (min-width: 1024px) { /* En escritorio el menú lateral está SIEMPRE visible y empuja el contenido */ .menu-lateral { position: sticky; top: var(--ancho-cabecera); bottom: auto; height: calc(100vh - var(--ancho-cabecera)); transform: none; /* anula el translateX(-100%) de móvil */ flex-shrink: 0; } .boton-menu { display: none; } /* el botón hamburguesa ya no hace falta */ .contenido { padding: var(--esp-6) var(--esp-7); } .rejilla-recursos { grid-template-columns: repeat(3, 1fr); } } /* ----- ESCRITORIO ANCHO (≥ 1280px) ----- */ @media (min-width: 1280px) { .rejilla-tarjetas { grid-template-columns: repeat(2, 1fr); } .glosario { grid-template-columns: repeat(3, 1fr); } } /* ----- Respeto a usuarios que prefieren menos animación ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }