/* ====================================================================
theme.css — TEMA OSCURO / CLARO (guia para tocar colores)
--------------------------------------------------------------------
COMO FUNCIONA:
- El tema se activa con un atributo en :
o
- Lo setea automaticamente el script en partials/theme-init.blade.php
(mira localStorage o el prefers-color-scheme del sistema).
- El boton flotante (FAB) en partials/theme-toggle.blade.php
alterna el valor y lo guarda en localStorage.
ORGANIZACION DEL ARCHIVO:
1) Variables CSS — los colores estan aca arriba (light y dark).
SOLO cambiando estas variables ya pintas casi todo el sitio.
2) Boton flotante (FAB).
3) MODO CLARO — no toca nada (deja el diseño original del template).
4) MODO OSCURO — aca esta todo lo que se invierte / oscurece.
==================================================================== */
/* ====================================================================
1) VARIABLES DE COLOR — cambia estos valores y el resto se acomoda
==================================================================== */
/* ----------------------- TEMA CLARO ---------------------------------
El modo claro usa el diseño ORIGINAL del template (azul Bootstrap
en hero/about/footer, gris en navbar). Las variables aca abajo se
declaran por consistencia pero NO se aplican a la mayoria de los
elementos del modo claro — el template ya provee sus propios colores.
-------------------------------------------------------------------- */
html[data-theme="light"] {
--theme-bg: #FFFFFF;
--theme-surface: #132c46;
--theme-text: #FFFFFF;
--theme-text-muted: #808080;
--theme-text-secondary:#000000 ;
/* --theme-border: #808080; */
--theme-accent: #007BFF;
--theme-accent-hover: #0056b3;
--theme-navbar: #191d29;
/* --theme-navbar
NAVBAR del portfolio publico Y el copyright del footer.
Casi negro para diferenciarlo del surface. */
}
/* ----------------------- TEMA OSCURO --------------------------------
Paleta GitHub-Dark. Cada variable se usa en multiples lugares del
sitio (ver la seccion 4 mas abajo para ver donde se aplica cada una).
-------------------------------------------------------------------- */
html[data-theme="dark"] {
/* --theme-bg
FONDO PRINCIPAL del cuerpo de la pagina y secciones "page-section"
claras (Portfolio, Skills, Contact). Tambien es el fondo del admin.
Si lo haces mas oscuro, todo el sitio se pone mas negro. */
--theme-bg: #282828;
/* --theme-surface
SECCIONES "elevadas" del modo oscuro:
- Hero / Masthead (la cabecera con tu avatar y CV)
- Seccion "About"
- Seccion "Experiencia laboral"
- Footer (donde van tus redes y top tecnologias)
- Cards del admin (formularios, paneles)
Es ligeramente mas clara que --theme-bg para crear contraste. */
--theme-surface: #161b22;
/* --theme-surface-2
Variante MAS clara aun. Se usa en:
- Card-header del admin
- Hover de items de dropdown
- Fondo de inputs del admin (los hace destacar dentro del card)
Si la haces mas oscura, los inputs del admin se "esconden" mas. */
--theme-surface-2: #21262d;
/* --theme-navbar
NAVBAR del portfolio publico Y el copyright del footer.
Casi negro para diferenciarlo del surface. */
--theme-navbar: #010409;
/* --theme-text
TEXTO PRINCIPAL: titulos h2/h3, parrafos, links del navbar,
labels de formularios, headings de Portfolio/Skills, etc.
Gris claro (no blanco puro para descansar la vista). */
--theme-text: #c9d1d9;
/* --theme-text-muted
TEXTO SECUNDARIO:
- Placeholders de inputs
- Texto del copyright (parte de abajo del footer)
- Lineas de los "divider-custom"
- Iconos de divisores
Gris medio: visible pero no compite con el texto principal. */
--theme-text-muted: #8b949e;
/* --theme-accent y --theme-accent-hover
AZUL DE ACCION: boton "Enviar" del formulario de contacto,
botones primarios del admin (Crear, Actualizar). El "hover" es
el mismo azul pero un poquito mas claro. */
--theme-accent: #484848;
--theme-accent-hover: #696e79;
}
/* ====================================================================
2) BOTON FLOTANTE (FAB)
--------------------------------------------------------------------
El boton circular abajo a la derecha. Cambia de color segun el tema:
- Modo claro: fondo oscuro + icono luna dorada (invita a oscurecer).
- Modo oscuro: fondo claro + icono sol naranja (invita a aclarar).
Para moverlo de posicion: ajusta `bottom` y `right` (linea 130-131).
Para hacerlo mas grande/chico: ajusta `width` y `height` (linea 132-133).
==================================================================== */
.theme-toggle-fab {
position: fixed;
bottom: 24px; /* distancia desde abajo */
right: 24px; /* distancia desde la derecha */
width: 52px; /* tamaño del boton */
height: 52px;
border-radius: 50%; /* circular */
background: #1f2937; /* fondo en modo claro */
color: #ffd166; /* color del icono luna */
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
cursor: pointer;
z-index: 1050; /* arriba de todo */
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
padding: 0;
line-height: 1;
transition: transform 0.15s ease, background-color 0.25s ease;
}
.theme-toggle-fab:hover {
transform: translateY(-2px); /* sube 2px al hover */
background: #2d3748;
}
.theme-toggle-fab:focus {
outline: 2px solid #ffd166;
outline-offset: 3px;
}
/* En modo oscuro el boton se invierte: fondo claro + icono sol */
html[data-theme="dark"] .theme-toggle-fab {
background: #f0f6fc;
color: #d97706; /* color del icono sol (naranja) */
border-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .theme-toggle-fab:hover {
background: #ffffff;
}
/* Mostrar solo el icono correcto segun el tema */
.theme-toggle-fab .theme-icon-dark { display: inline; } /* luna en modo claro */
.theme-toggle-fab .theme-icon-light { display: none; }
html[data-theme="dark"] .theme-toggle-fab .theme-icon-dark { display: none; }
html[data-theme="dark"] .theme-toggle-fab .theme-icon-light { display: inline; } /* sol en modo oscuro */
/* Transicion suave al alternar tema (afecta a todos los elementos
que cambian color) */
html[data-theme] body,
html[data-theme] .navbar,
html[data-theme] .card,
html[data-theme] .form-control,
html[data-theme] section,
html[data-theme] .footer,
html[data-theme] .copyright,
html[data-theme] .masthead {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* ====================================================================
3) MODO CLARO
--------------------------------------------------------------------
Las reglas de abajo aplican las variables del bloque html[data-theme="light"]
a los mismos elementos que en el modo oscuro. Cambiando las variables
(arriba) se pinta todo lo que esta abajo.
==================================================================== */
/* ---- 3.1 BODY ---- */
html[data-theme="light"] body {
background-color: var(--theme-bg) !important;
color: var(--theme-text) !important;
}
/* ---- 3.2 NAVBAR del portfolio publico ---- */
html[data-theme="light"] .navbar.bg-secondary {
background-color: var(--theme-navbar) !important;
border-bottom: 1px solid var(--theme-border);
}
html[data-theme="light"] .navbar .nav-link,
html[data-theme="light"] .navbar-brand {
color: var(--theme-text) !important;
}
/* ---- 3.3 SECCIONES "bg-primary" (Hero, About, Experiencia) ---- */
html[data-theme="light"] .bg-primary,
html[data-theme="light"] header.masthead,
html[data-theme="light"] section.bg-primary {
background-color: var(--theme-surface) !important;
color: var(--theme-text) !important;
}
/* ---- 3.4 OTRAS SECCIONES (Portfolio, Skills, Contact) ---- */
html[data-theme="light"] section.page-section:not(.bg-primary) {
background-color: var(--theme-bg);
color: var(--theme-text);
}
/* ---- 3.5 TITULOS Y TEXTOS ---- */
/* Headings .text-secondary / .page-section-heading en secciones de fondo claro → negro */
html[data-theme="light"] section.page-section:not(.bg-primary) .text-secondary,
html[data-theme="light"] section.page-section:not(.bg-primary) h2.text-secondary,
html[data-theme="light"] section.page-section:not(.bg-primary) .page-section-heading.text-secondary {
color: #000 !important;
}
/* Los mismos headings dentro de secciones azules → blanco */
html[data-theme="light"] header.masthead .text-secondary,
html[data-theme="light"] header.masthead .page-section-heading,
html[data-theme="light"] section.bg-primary .text-secondary,
html[data-theme="light"] section.bg-primary .page-section-heading {
color: #fff !important;
}
/* En secciones de fondo claro (Portfolio, Skills, Contact) → texto oscuro */
html[data-theme="light"] section.page-section:not(.bg-primary) .lead,
html[data-theme="light"] section.page-section:not(.bg-primary) .text-justify,
html[data-theme="light"] section.page-section:not(.bg-primary) h3 {
color: #000;
}
/* En secciones de fondo azul/oscuro (Hero, About, Experiencia) → texto blanco */
html[data-theme="light"] header.masthead .lead,
html[data-theme="light"] header.masthead .text-justify,
html[data-theme="light"] header.masthead h2,
html[data-theme="light"] header.masthead h3,
html[data-theme="light"] header.masthead .masthead-heading,
html[data-theme="light"] header.masthead .masthead-subheading,
html[data-theme="light"] section.bg-primary .lead,
html[data-theme="light"] section.bg-primary .text-justify,
html[data-theme="light"] section.bg-primary h2,
html[data-theme="light"] section.bg-primary h3 {
color: #fff;
}
/* ---- 3.6 DIVISORES ---- */
/* Divisores en secciones de fondo claro → oscuro */
html[data-theme="light"] section.page-section:not(.bg-primary) .divider-custom-line {
background-color: #2c3e50 !important;
}
html[data-theme="light"] section.page-section:not(.bg-primary) .divider-custom-icon {
color: #2c3e50 !important;
}
/* Divisores en secciones azules (Hero, About, Experiencia) → blanco */
html[data-theme="light"] header.masthead .divider-custom-line,
html[data-theme="light"] section.bg-primary .divider-custom-line {
background-color: #fff !important;
}
html[data-theme="light"] header.masthead .divider-custom-icon,
html[data-theme="light"] section.bg-primary .divider-custom-icon {
color: #fff !important;
}
/* ---- 3.7 FOOTER ---- */
html[data-theme="light"] .footer {
background-color: var(--theme-surface) !important;
color: var(--theme-text);
}
html[data-theme="light"] .footer a,
html[data-theme="light"] .footer .text-white {
color: var(--theme-text) !important;
}
html[data-theme="light"] .copyright {
background-color: var(--theme-navbar) !important;
color: var(--theme-text-muted) !important;
}
/* ---- 3.8 ITEMS DEL PORTFOLIO ---- */
html[data-theme="light"] .portfolio-item {
background-color: var(--theme-surface) !important;
}
/* ---- 3.9 FORMULARIO DE CONTACTO ---- */
/* ---- 3.10 CARDS DE SKILLS / TECNOLOGIAS ----
En modo claro el hereda --theme-text (blanco) y queda invisible
sobre el fondo blanco del card. Lo forzamos a negro. */
html[data-theme="light"] .transition-hover h6 {
color: #000;
}
/* ---- 3.11 MODAL DE PROYECTOS ----
El texto del modal hereda --theme-text (blanco en modo claro) y queda
invisible sobre el fondo blanco del modal. Lo forzamos a negro. */
html[data-theme="light"] .portfolio-modal .modal-content,
html[data-theme="light"] .portfolio-modal .modal-content p,
html[data-theme="light"] .portfolio-modal .modal-content h2 {
color: #000;
}
/* ---- 3.12 LIST-GROUP-ITEM (experiencias por año) ----
Los
en la seccion Experiencia tienen fondo
blanco por defecto de Bootstrap, pero el texto hereda --theme-text
(blanco en modo claro). Forzamos a negro para que se lea.
Selector extra-especifico (incluye section.bg-primary) porque la regla
global de "texto blanco en secciones azules" tendria mas prioridad. */
html[data-theme="light"] section.bg-primary .list-group-item,
html[data-theme="light"] section.bg-primary .list-group-item p,
html[data-theme="light"] section.bg-primary .list-group-item strong,
html[data-theme="light"] section.bg-primary .list-group-item .text-justify {
color: #000;
}
/* ====================================================================
4) MODO OSCURO — todas las reglas que se aplican cuando
--------------------------------------------------------------------
Cada bloque indica QUE area del sitio afecta para que sepas donde
tocar si queres ajustar algo puntual.
==================================================================== */
/* ---- 4.1 BODY: fondo general y color base del texto ---- */
html[data-theme="dark"] body {
background-color: var(--theme-bg) !important;
color: var(--theme-text) !important;
}
/* ---- 4.2 NAVBAR del portfolio publico (template.blade.php) ----
La barra de arriba con el menu (Proyectos, Skills, About, etc).
En el template original usa .bg-secondary (gris). En oscuro la
ponemos casi negra. */
html[data-theme="dark"] .navbar.bg-secondary {
background-color: var(--theme-navbar) !important;
border-bottom: 1px solid var(--theme-border);
}
html[data-theme="dark"] .navbar .nav-link,
html[data-theme="dark"] .navbar-brand {
color: var(--theme-text) !important;
}
html[data-theme="dark"] .navbar .nav-link:hover {
color: var(--theme-accent-hover) !important;
}
/* ---- 4.3 SECCIONES "bg-primary" ----
Son las secciones que en el modo claro tienen fondo AZUL:
- Hero / Masthead (cabecera con avatar y botones de CV/WhatsApp)
- Seccion "About"
- Seccion "Experiencia laboral"
En oscuro las pasamos al surface (gris oscuro). */
html[data-theme="dark"] .bg-primary,
html[data-theme="dark"] header.masthead,
html[data-theme="dark"] section.bg-primary {
background-color: var(--theme-surface) !important;
color: var(--theme-text) !important;
}
/* ---- 4.4 OTRAS SECCIONES (Portfolio, Skills, Contact) ----
Las que en el modo claro tienen fondo blanco. */
html[data-theme="dark"] section.page-section:not(.bg-primary) {
background-color: var(--theme-bg);
color: var(--theme-text);
}
/* ---- 4.5 TITULOS Y TEXTOS ----
Headings con .text-secondary (los titulos "Proyectos", "Tecnologias")
y bloques de texto largo (.lead, .text-justify). */
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] h2.text-secondary,
html[data-theme="dark"] .page-section-heading.text-secondary {
color: var(--theme-text) !important;
}
html[data-theme="dark"] .lead,
html[data-theme="dark"] .text-justify,
html[data-theme="dark"] h3 {
color: var(--theme-text);
}
/* ---- 4.6 BOTONES OUTLINE (descargar CV, WhatsApp, LinkedIn) ----
Los botones grandes con borde blanco en el hero. */
html[data-theme="dark"] .btn-outline-light {
color: var(--theme-text);
border-color: var(--theme-border);
}
html[data-theme="dark"] .btn-outline-light:hover {
background-color: var(--theme-surface-2);
border-color: var(--theme-text-muted);
color: var(--theme-text);
}
/* ---- 4.7 DIVISORES (las lineas + icono que separan secciones) ----
Los "divider-custom" arriba/abajo de cada titulo de seccion. */
html[data-theme="dark"] .divider-custom-line {
background-color: var(--theme-text-muted) !important;
}
html[data-theme="dark"] .divider-custom-icon {
color: var(--theme-text-muted) !important;
}
/* ---- 4.8 FOOTER ----
La parte de abajo con redes sociales y top tecnologias. */
html[data-theme="dark"] .footer {
background-color: var(--theme-surface) !important;
color: var(--theme-text);
}
html[data-theme="dark"] .footer a,
html[data-theme="dark"] .footer .text-white {
color: var(--theme-text) !important;
}
/* Copyright (la franja de la base con "Copyright 2021 DevPess") */
html[data-theme="dark"] .copyright {
background-color: var(--theme-navbar) !important;
color: var(--theme-text-muted) !important;
}
/* ---- 4.9 ITEMS DEL PORTFOLIO (cards de cada proyecto) ---- */
html[data-theme="dark"] .portfolio-item {
background-color: var(--theme-surface) !important;
}
/* ---- 4.10 FORMULARIO DE CONTACTO ----
Los inputs/textarea/labels del form en la seccion #contact. */
/* ---- 4.11 CARDS DE SKILLS / TECNOLOGIAS ----
Cada dentro de la seccion Skills (welcome.blade.php @section tecnologias).
En modo oscuro las ponemos blancas con texto negro para que resalten
sobre el fondo oscuro de la seccion. */
html[data-theme="dark"] .transition-hover {
background-color: #fff;
color: #000;
}
html[data-theme="dark"] .transition-hover h6 {
color: #000;
}
html[data-theme="dark"] .transition-hover:hover {
background-color: #696e79;
color: #fff;
}
html[data-theme="dark"] .transition-hover:hover h6 {
color: #fff;
}
/* ---- 4.12 CARDS DE PROYECTOS (seccion #portfolio) ----
Las cards de cada proyecto en welcome.blade.php usan .card (Bootstrap).
En modo oscuro las dejamos blancas con texto negro, igual que las de
skills. Selector con #portfolio para NO pisar las cards del admin. */
html[data-theme="dark"] #portfolio .card {
background-color: #fff !important;
color: #000 !important;
border-color: var(--theme-border) !important;
}
html[data-theme="dark"] #portfolio .card .card-title,
html[data-theme="dark"] #portfolio .card .text-secondary {
color: #000 !important;
}
/* ---- 4.13 MODAL DE PROYECTOS ----
El modal que se abre al clickear la imagen de un proyecto.
En modo oscuro le damos un gris oscuro propio para no chocar
con las cards blancas de la grilla. */
html[data-theme="dark"] .portfolio-modal .modal-content {
background-color: #282828;
color: var(--theme-text);
}
html[data-theme="dark"] .portfolio-modal .modal-content .text-secondary,
html[data-theme="dark"] .portfolio-modal .modal-content p,
html[data-theme="dark"] .portfolio-modal .modal-content h2 {
color: #fff !important;
}
html[data-theme="dark"] .portfolio-modal .btn-close {
filter: invert(1) grayscale(100%) brightness(200%);
}
/* ---- 4.14 LIST-GROUP-ITEM en modo oscuro ----
Los items de las experiencias por año. Bootstrap les pone fondo blanco
por defecto, lo que rompe el look del dark mode. Les damos fondo oscuro
(#3b3b3f, mismo que el modal) y texto claro. */
html[data-theme="dark"] .list-group-item {
background-color: #3b3b3f !important;
border-color: var(--theme-border) !important;
color: var(--theme-text) !important;
}
html[data-theme="dark"] .list-group-item p,
html[data-theme="dark"] .list-group-item strong,
html[data-theme="dark"] .list-group-item .text-justify,
html[data-theme="dark"] .list-group-item .text-muted {
color: var(--theme-text) !important;
}
/* ====================================================================
ADMIN (app.blade.php) — modo oscuro
--------------------------------------------------------------------
La parte autenticada: navbar blanca, cards de Proyectos/Tecnologias/
Experiencia, formularios de crear/editar.
==================================================================== */
/* Contenedor general del admin */
html[data-theme="dark"] #app {
background-color: var(--theme-bg);
color: var(--theme-text);
min-height: 100vh;
}
/* Navbar del admin (originalmente .bg-white) */
html[data-theme="dark"] .navbar.bg-white {
background-color: var(--theme-surface) !important;
border-bottom: 1px solid var(--theme-border);
}
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-light .navbar-brand {
color: var(--theme-text) !important;
}
/* Cards (los paneles que envuelven los formularios y listados) */
html[data-theme="dark"] .card {
background-color: var(--theme-surface) !important;
color: var(--theme-text) !important;
border-color: var(--theme-border) !important;
}
html[data-theme="dark"] .card-header {
/*background-color: var(--theme-surface-2) !important;*/
border-color: var(--theme-border) !important;
color: var(--theme-text) !important;
}
/* Tablas (listado de proyectos, tecnologias, experiencia) */
html[data-theme="dark"] .table {
color: var(--theme-text);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td {
border-color: var(--theme-border) !important;
color: var(--theme-text);
}
/* Dropdown del usuario logueado (arriba a la derecha) */
html[data-theme="dark"] .dropdown-menu {
background-color: var(--theme-surface);
border-color: var(--theme-border);
}
html[data-theme="dark"] .dropdown-item {
color: var(--theme-text);
}
html[data-theme="dark"] .dropdown-item:hover {
background-color: var(--theme-surface-2);
color: var(--theme-text);
}
/* ====================================================================
ADMIN (app.blade.php) — modo CLARO
--------------------------------------------------------------------
Como --theme-text es blanco en modo claro, el texto del admin se
queda invisible sobre fondos blancos. Forzamos todo a negro acá.
==================================================================== */
html[data-theme="light"] #app {
color: #000;
}
html[data-theme="light"] .navbar-light .navbar-nav .nav-link,
html[data-theme="light"] .navbar-light .navbar-brand {
color: #000 !important;
}
html[data-theme="light"] .card,
html[data-theme="light"] .card-header,
html[data-theme="light"] .card-body {
color: #000 !important;
}
html[data-theme="light"] .table,
html[data-theme="light"] .table th,
html[data-theme="light"] .table td {
color: #000;
}
html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .dropdown-item {
color: #000;
}
/* ====================================================================
BOTONES DE FILTRO POR CATEGORIA (welcome.blade.php)
Blanco/negro segun tema. Activo invierte los colores.
==================================================================== */
.filtro-btn {
padding: 0.4rem 1rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.9rem;
border: 1px solid currentColor;
background-color: transparent;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
html[data-theme="light"] .filtro-btn {
color: #000;
background-color: #fff;
border-color: #000;
}
html[data-theme="light"] .filtro-btn:hover {
background-color: #f1f1f1;
}
html[data-theme="light"] .filtro-btn.active {
background-color: #000;
color: #fff;
}
html[data-theme="dark"] .filtro-btn {
color: #fff;
background-color: transparent;
border-color: #fff;
}
html[data-theme="dark"] .filtro-btn:hover {
background-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .filtro-btn.active {
background-color: #fff;
color: #000;
}
/* ====================================================================
SECCION PROCESO — layout "snake" (serpenteado)
Grid 5 columnas x 3 filas:
[1][>][2][>][3]
[v]
[6][<][5][<][4]
En movil cae a una sola columna y los conectores se ocultan.
==================================================================== */
.proc-snake {
display: grid;
grid-template-columns: 1fr 56px 1fr 56px 1fr;
grid-template-rows: auto 56px auto;
gap: 16px;
align-items: stretch;
}
.proc-step {
position: relative;
border-radius: 14px;
padding: 24px 22px;
border: 1px solid transparent;
border-top: 3px solid var(--sc, #888);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
gap: 10px;
}
.proc-step:hover {
transform: translateY(-3px);
}
.proc-step-num {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--sc, #888);
color: #000;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
}
.proc-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.proc-tag {
font-size: 0.72rem;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid var(--sc, #888);
color: var(--sc, #888);
background-color: transparent;
font-weight: 500;
line-height: 1.4;
}
.proc-title {
font-size: 1.15rem;
font-weight: 700;
margin: 4px 0 0;
}
.proc-desc {
font-size: 0.92rem;
line-height: 1.5;
margin: 0;
}
.proc-conn {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
opacity: 0.55;
}
/* --- Tema claro --- */
html[data-theme="light"] .proceso-section {
background-color: #f8f9fa;
}
html[data-theme="light"] .proc-step {
background-color: #ffffff;
border-color: #e5e7eb;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
color: #000;
}
html[data-theme="light"] .proc-step:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .proc-desc {
color: #4b5563;
}
html[data-theme="light"] .proc-conn {
color: #6b7280;
}
html[data-theme="light"] .proceso-intro {
color: #4b5563;
}
/* --- Tema oscuro --- */
html[data-theme="dark"] .proceso-section {
background-color: var(--theme-bg);
}
html[data-theme="dark"] .proc-step {
background-color: var(--theme-surface);
border-color: #30363d;
color: var(--theme-text);
}
html[data-theme="dark"] .proc-step:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .proc-desc {
color: var(--theme-text-muted);
}
html[data-theme="dark"] .proc-conn {
color: var(--theme-text-muted);
}
html[data-theme="dark"] .proceso-intro {
color: var(--theme-text-muted);
}
/* --- Responsive: en pantallas chicas, una sola columna --- */
@media (max-width: 768px) {
.proc-snake {
grid-template-columns: 1fr;
grid-template-rows: none;
gap: 18px;
}
.proc-step {
grid-column: 1 !important;
grid-row: auto !important;
}
.proc-conn {
display: none;
}
}
/* --- Boton CTA "Trabajemos juntos" --- */
.proc-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: 2px solid currentColor;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.proc-cta-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
html[data-theme="light"] .proc-cta-btn {
background-color: #000;
color: #fff;
border-color: #000;
}
html[data-theme="light"] .proc-cta-btn:hover {
background-color: #fff;
color: #000;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
html[data-theme="dark"] .proc-cta-btn {
background-color: #fff;
color: #000;
border-color: #fff;
}
html[data-theme="dark"] .proc-cta-btn:hover {
background-color: transparent;
color: #fff;
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.12);
}
/* ---- Boton CTA del hero (Trabajemos juntos) ---- */
.hero-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85rem 2rem;
border-radius: 999px;
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
border: 2px solid #fff;
background-color: #fff;
color: var(--theme-accent, #007BFF);
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta-btn:hover {
transform: translateY(-2px);
text-decoration: none;
background-color: transparent;
color: #fff;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
html[data-theme="dark"] .hero-cta-btn {
background-color: #fff;
color: #000;
border-color: #fff;
}
html[data-theme="dark"] .hero-cta-btn:hover {
background-color: transparent;
color: #fff;
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.14);
}
/* ---- Chips de info del footer en grilla 2x2 uniforme ---- */
.footer-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
.footer-info-chip {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0.55rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 12px;
font-size: 0.9rem;
line-height: 1.2;
color: #fff;
min-height: 56px;
}
.footer-info-chip i {
opacity: 0.85;
flex-shrink: 0;
}
@media (max-width: 575.98px) {
.footer-info-grid { grid-template-columns: 1fr; max-width: 280px; }
}
/* ====================================================================
SECCION ABOUT — quote impactante + 3 valores diferenciales
Diferenciada del masthead: sin foto, sin tags de stack, foco en
"como trabajo" y por que elegirme.
==================================================================== */
.about-photo-wrap {
display: block;
width: 100%;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.about-photo {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 14px;
display: block;
}
.about-quote {
max-width: 720px;
text-align: center;
}
.about-intro { max-width: 720px; }
.about-quote {
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
font-weight: 700;
line-height: 1.25;
color: #ffffff;
margin: 0 auto;
max-width: 820px;
letter-spacing: -0.01em;
}
.about-intro {
font-size: 1.05rem;
line-height: 1.7;
color: #ffffff;
opacity: 0.9;
max-width: 720px;
}
/* Tarjetas de valores */
.about-valores {
margin-top: 2rem;
}
.about-valor-card {
padding: 28px 22px;
border-radius: 14px;
background-color: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.18);
transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.about-valor-card:hover {
transform: translateY(-4px);
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
}
.about-valor-icon {
width: 56px;
height: 56px;
border-radius: 50%;
margin: 0 auto 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background-color: #ffffff;
color: #007bff;
}
.about-valor-titulo {
font-size: 1.1rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 8px;
}
.about-valor-desc {
font-size: 0.95rem;
line-height: 1.55;
color: #ffffff;
opacity: 0.85;
margin: 0;
}
/* Botón */
.about-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.8rem;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
border: 2px solid #ffffff;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.about-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
.about-btn-primary {
background-color: #ffffff;
color: #007bff;
}
.about-btn-primary:hover {
background-color: transparent;
color: #ffffff;
box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}
/* ====================================================================
PAGINA SOLICITUD DE PROYECTO (project-request/create.blade.php)
Formulario multi-paso. Bi-tema usando variables del navbar/surface.
==================================================================== */
.solicitud-page {
padding: 110px 16px 60px;
min-height: 100vh;
}
.solicitud-container {
max-width: 880px;
margin: 0 auto;
}
.form-intro {
text-align: center;
margin-bottom: 32px;
}
.form-intro h1 {
font-size: clamp(1.8rem, 4vw, 2.4rem);
font-weight: 700;
margin-bottom: 8px;
}
.form-intro p {
opacity: 0.75;
font-size: 1rem;
}
/* Honeypot */
.bot-trap {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
opacity: 0;
}
/* Progreso */
.form-progress {
margin-bottom: 32px;
}
.progress-steps {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.step-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 60px;
}
.step {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border: 2px solid currentColor;
background-color: transparent;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.step.active {
transform: scale(1.05);
}
.step-label {
font-size: 0.75rem;
font-weight: 600;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.step-line {
flex: 1 1 auto;
height: 3px;
border-radius: 999px;
overflow: hidden;
margin-top: -22px;
background-color: rgba(128, 128, 128, 0.25);
align-self: flex-start;
margin-top: 22px;
}
.step-line-fill {
height: 100%;
width: 0%;
transition: width 0.3s ease;
}
/* Form container */
.plan-form-container {
border-radius: 14px;
padding: 28px;
border: 1px solid;
}
/* Steps */
.form-step { display: none; }
.form-step.active { display: block; animation: fadeStep 0.25s ease; }
@keyframes fadeStep {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.step-header { margin-bottom: 20px; }
.step-header h2 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 4px;
}
.step-header h2 span {
opacity: 0.45;
margin-right: 6px;
}
.step-header p {
opacity: 0.7;
margin: 0;
font-size: 0.95rem;
}
/* Grids */
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
margin-bottom: 16px;
}
.option-card {
border: 2px solid;
border-radius: 12px;
padding: 20px 16px;
cursor: pointer;
text-align: center;
transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.option-card:hover { transform: translateY(-3px); }
.option-icon {
font-size: 1.8rem;
margin-bottom: 10px;
}
.option-card h3 {
font-size: 1rem;
font-weight: 700;
margin: 6px 0;
}
.option-card p {
font-size: 0.85rem;
opacity: 0.7;
margin: 0;
line-height: 1.4;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group.full-width { grid-column: 1 / -1; }
.form-group label {
font-weight: 600;
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 10px 12px;
border-radius: 8px;
border: 1px solid;
font-size: 0.95rem;
background-color: transparent;
color: inherit;
font-family: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.18);
}
.field-hint {
font-size: 0.8rem;
opacity: 0.65;
margin: 0 0 8px;
}
.select-wrapper { position: relative; }
.select-wrapper select { width: 100%; appearance: none; padding-right: 36px; }
.select-arrow {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
opacity: 0.6;
}
.textarea-wrapper { position: relative; }
.char-counter {
position: absolute;
bottom: 8px;
right: 12px;
font-size: 0.75rem;
opacity: 0.55;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.checkbox-card {
display: flex;
align-items: center;
gap: 10px;
border: 1px solid;
border-radius: 10px;
padding: 10px 12px;
cursor: pointer;
font-size: 0.9rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checkbox-card input { display: none; }
.checkbox-card .check-icon {
width: 20px;
height: 20px;
border-radius: 4px;
border: 1.5px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
opacity: 0;
}
.checkbox-card input:checked ~ .check-icon { opacity: 1; }
.consent-checks {
margin: 22px 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.checkbox-label {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 0.9rem;
cursor: pointer;
}
.checkbox-label input { margin-top: 3px; }
.step-actions {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 24px;
flex-wrap: wrap;
}
.cta-button, .secondary-button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0.7rem 1.4rem;
border-radius: 999px;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
border: 2px solid currentColor;
background-color: transparent;
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.cta-button:hover, .secondary-button:hover { transform: translateY(-2px); text-decoration: none; }
#summaryGrid {
display: grid;
gap: 8px;
margin-bottom: 8px;
}
.summary-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid;
}
.summary-row strong { font-size: 0.85rem; opacity: 0.75; }
.summary-row span { font-size: 0.95rem; word-break: break-word; }
.error-message {
color: #dc3545;
font-size: 0.85rem;
margin-top: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.error-message.hidden { display: none; }
.hidden { display: none !important; }
.alert-success-box, .alert-error-box {
padding: 14px 18px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.alert-success-box {
background-color: #d1e7dd;
color: #0f5132;
border: 1px solid #badbcc;
}
.alert-error-box {
background-color: #f8d7da;
color: #842029;
border: 1px solid #f5c2c7;
}
/* --- Tema claro --- */
html[data-theme="light"] .solicitud-page {
background-color: #f8f9fa;
color: #111;
}
html[data-theme="light"] .plan-form-container,
html[data-theme="light"] .option-card,
html[data-theme="light"] .checkbox-card,
html[data-theme="light"] .summary-row {
background-color: #fff;
border-color: #e5e7eb;
color: #111;
}
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group select,
html[data-theme="light"] .form-group textarea {
border-color: #d1d5db;
background-color: #fff;
color: #111;
}
html[data-theme="light"] .step { color: #6b7280; }
html[data-theme="light"] .step.active { background-color: #111; color: #fff; border-color: #111; }
html[data-theme="light"] .step-line-fill { background-color: #111; }
html[data-theme="light"] .option-card.selected {
border-color: #111;
background-color: #f3f4f6;
}
html[data-theme="light"] .checkbox-card input:checked + .check-icon {
background-color: #111;
color: #fff;
}
html[data-theme="light"] .cta-button {
background-color: #111;
color: #fff;
border-color: #111;
}
html[data-theme="light"] .cta-button:hover {
background-color: #fff;
color: #111;
}
html[data-theme="light"] .secondary-button { color: #111; }
html[data-theme="light"] .secondary-button:hover { background-color: #111; color: #fff; }
/* --- Tema oscuro --- */
html[data-theme="dark"] .solicitud-page {
background-color: var(--theme-bg);
color: var(--theme-text);
}
html[data-theme="dark"] .plan-form-container,
html[data-theme="dark"] .option-card,
html[data-theme="dark"] .checkbox-card,
html[data-theme="dark"] .summary-row {
background-color: var(--theme-surface);
border-color: #30363d;
color: var(--theme-text);
}
html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea {
border-color: #30363d;
background-color: var(--theme-surface-2);
color: var(--theme-text);
}
html[data-theme="dark"] .step { color: var(--theme-text-muted); }
html[data-theme="dark"] .step.active { background-color: #fff; color: #000; border-color: #fff; }
html[data-theme="dark"] .step-line-fill { background-color: #fff; }
html[data-theme="dark"] .option-card.selected {
border-color: #fff;
background-color: var(--theme-surface-2);
}
html[data-theme="dark"] .checkbox-card input:checked + .check-icon {
background-color: #fff;
color: #000;
}
html[data-theme="dark"] .cta-button {
background-color: #fff;
color: #000;
border-color: #fff;
}
html[data-theme="dark"] .cta-button:hover {
background-color: transparent;
color: #fff;
}
html[data-theme="dark"] .secondary-button { color: var(--theme-text); }
html[data-theme="dark"] .secondary-button:hover { background-color: #fff; color: #000; }
/* Responsive */
@media (max-width: 640px) {
.form-grid { grid-template-columns: 1fr; }
.options-grid { grid-template-columns: 1fr; }
.summary-row { grid-template-columns: 1fr; }
.step-label { font-size: 0.65rem; }
.step { width: 38px; height: 38px; font-size: 0.85rem; }
}