/* ---- MyPortfolio: tema oscuro minimalista, acento naranja Claude ---- */

:root {
    /* Acento naranja Claude sobre Radzen Material Dark */
    --rz-primary: #d97757;
    --rz-primary-dark: #c15f3c;
    --rz-primary-light: #e3a088;
    --rz-primary-lighter: rgba(217, 119, 87, 0.16);

    --pf-bg: #121212;
    --pf-surface: #1c1c1f;
    --pf-border: #2a2a2e;
    --pf-text: #e6e6e8;
    --pf-text-soft: #cfcfd3;
    --pf-text-muted: #9a9a9f;
    --pf-accent: #d97757;
    --pf-header-bg: #161618;
    --pf-tag-bg: #232327;
    --pf-tag-text: #d7d7db;

    /* El header de Radzen usa estas variables; asi sigue el tema en vez del primario naranja */
    --rz-header-background-color: var(--pf-header-bg);
    --rz-header-border: 1px solid var(--pf-border);
    --rz-header-shadow: none;
}

/* ---- Modo claro (activado con el switch del header; default: oscuro) ---- */
[data-theme="light"] {
    --pf-bg: #ffffff;
    --pf-surface: #f5f5f7;
    --pf-border: #dcdce1;
    --pf-text: #1f1f23;
    --pf-text-soft: #3c3c43;
    --pf-text-muted: #6a6a71;
    --pf-header-bg: #f8f8fa;
    --pf-tag-bg: #ececef;
    --pf-tag-text: #3c3c43;

    /* El tema Material claro de Radzen asume un header de color primario y pinta
       el menu superior con --rz-on-primary (blanco) en reposo Y en hover. Sobre
       nuestro header gris claro eso lo vuelve invisible; se retoman las mismas
       variables que ya usa el tema oscuro (texto normal, acento naranja al hover). */
    --rz-menu-top-item-color: var(--pf-text);
    --rz-menu-top-item-icon-color: var(--pf-text);
    --rz-menu-top-item-hover-color: var(--pf-accent);
    --rz-menu-top-item-icon-hover-color: var(--pf-accent);
    --rz-menu-top-item-selected-color: var(--pf-accent);

    /* Mismo problema en el titulo del header ("Administracion") y el boton de
       colapsar el sidebar del panel admin: ambos usan --rz-on-primary (blanco). */
    --rz-header-color: var(--pf-text);
    --rz-sidebar-toggle-color: var(--pf-text);
    --rz-sidebar-toggle-hover-color: var(--pf-accent);
}

/* Switch de tema (estilo VS Code: sol en modo oscuro, luna en modo claro).
   Global porque lo comparten el header publico y el del panel admin. */
.pf-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--pf-text);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pf-theme-toggle:hover {
    background: var(--pf-tag-bg);
    color: var(--pf-accent);
}

.pf-theme-toggle .rzi,
.pf-theme-toggle i {
    font-size: 1.3rem;
}

html, body {
    background: var(--pf-bg);
    color: var(--pf-text);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    scroll-behavior: smooth;
}

a {
    color: var(--pf-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Contenedor centrado para el contenido de cada página */
.pf-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* Encabezado de sección (centrado, estilo opencode) */
.pf-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-align: center;
}

.pf-section-subtitle {
    color: var(--pf-text-muted);
    margin-bottom: 1.75rem;
    text-align: center;
}

/* Tarjetas con bordes finos en vez de sombras pesadas */
.pf-card {
    background: var(--pf-surface);
    border: 1px solid var(--pf-border);
    border-radius: 10px;
    height: 100%;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.pf-card:hover {
    border-color: var(--pf-accent);
    transform: translateY(-2px);
}

/* Acento naranja Claude para chips/badges primarios */
.rz-chip.rz-chip-primary,
.rz-badge.rz-primary {
    background-color: var(--pf-accent) !important;
    color: #1a1a1a !important;
}

/* Resalta en el menu superior la pagina activa (mismo acento que el hover).
   RadzenMenuItem ya marca el link de la ruta actual con la clase "active" (Blazor
   NavLink), pero el CSS base de Radzen solo pinta el "seleccionado" cuando la clase
   esta en el wrapper (.rz-navigation-item-wrapper-active), no en el link; por eso
   se reutiliza aqui la misma variable ya definida (--rz-menu-top-item-selected-color). */
.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link.active {
    color: var(--rz-menu-top-item-selected-color, var(--pf-accent));
}
.rz-menu:not(.rz-profile-menu) .rz-navigation-item-link.active .rzi:not(.rz-navigation-item-icon-children) {
    color: var(--rz-menu-top-item-selected-color, var(--pf-accent));
}

/* Imagen de portada en cards de proyecto/cliente */
.pf-cover {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    background: #000;
}

/* Logos de cliente: mostrarlos completos (sin recortar ni ampliar), con letterboxing
   que se adapta al tema, en vez del "cover" pensado para capturas de proyecto. */
.pf-cover-logo {
    object-fit: contain;
    background: var(--pf-surface);
    padding: 1rem;
}

/* Hero del perfil (columna centrada, estilo opencode) */
.pf-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

.pf-hero-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--pf-accent);
}

.pf-hero-name {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
}

.pf-hero-realname {
    color: var(--pf-text-muted);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.35rem;
}

.pf-hero-headline {
    color: var(--pf-accent);
    font-size: 1.15rem;
    margin: 0.5rem 0 1rem;
}

.pf-hero-about {
    color: var(--pf-text-soft);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

.pf-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

/* Enlaces sociales: solo icono, naranja Claude y más grande */
.pf-social a {
    color: var(--pf-accent);
    display: inline-flex;
    transition: transform 0.15s ease, color 0.15s ease;
}

.pf-social a:hover {
    color: var(--rz-primary-light);
    transform: translateY(-2px);
    text-decoration: none;
}

.pf-social a .rzi,
.pf-social a .notranslate,
.pf-social a i {
    font-size: 1.9rem;
}

/* Logos de marca (SVG) al mismo tamaño que los iconos de fuente */
.pf-social a .pf-social-svg {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
}

/* Estado de carga centrado */
.pf-loading {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

/* Grid responsivo de tarjetas */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Cuerpo interno de una card */
.pf-card-body {
    padding: 1.25rem;
}

.pf-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.pf-card-text {
    color: var(--pf-text-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.9rem;
}

.pf-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.pf-chip-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pf-text-muted);
    margin: 0.6rem 0 0.3rem;
}

/* Tag minimalista (chip propio, sin depender de estilos Radzen) */
.pf-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--pf-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--pf-tag-text);
    background: var(--pf-tag-bg);
}

.pf-tag-accent {
    border-color: var(--pf-accent);
    color: var(--pf-accent);
}

/* Bloque de categoría en la página de Stack */
.pf-cat {
    margin-bottom: 2.5rem;
}

.pf-cat-title {
    font-size: 1.2rem;
    font-weight: 600;
    border-left: 3px solid var(--pf-accent);
    padding-left: 0.6rem;
    margin-bottom: 1rem;
}

.pf-tool {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
}

.pf-tool img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.pf-tool-name {
    font-weight: 600;
}

.pf-tool-desc {
    color: var(--pf-text-muted);
    font-size: 0.82rem;
    line-height: 1.4;
}

.pf-meta {
    color: var(--pf-text-muted);
    font-size: 0.85rem;
}

.pf-card-actions {
    padding: 0 1.25rem 1.1rem;
}

/* Tarjetas de proyecto: altura fija + descripción truncada, el resto vive en el modal de detalle */
.pf-project-card {
    display: flex;
    flex-direction: column;
    height: 460px;
    cursor: pointer;
}

.pf-project-card .pf-card-body {
    flex: 1 1 auto;
    overflow: hidden;
}

.pf-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal de detalle de proyecto */
.pf-dialog-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    background: #000;
    margin-bottom: 1rem;
}

.pf-dialog-body {
    max-height: 55vh;
    overflow-y: auto;
}

.pf-dialog-actions {
    margin-top: 1rem;
}

/* Forzar monoespaciado en toda la UI, incluidos los componentes Radzen */
.rz-body, .rz-button, .rz-menu, .rz-menu-item, .rz-chip, .rz-badge,
button, input, select, textarea {
    font-family: inherit;
}