/* estilos.css - Tema PHP Actualizado */

:root {
    --php-purple: #777BB4;
    --php-dark-purple: #4F5B93;
    --php-bg-dark: #222437;
    --text-color: #333;
    --bg-color: #f0f2f5;
}

body {
    font-family: 'Fira Sans', 'Segoe UI', Tahoma, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
}

/* --- BARRA DE NAVEGACIÓN SUPERIOR --- */
nav {
    background-color: var(--php-bg-dark);
    padding: 0 20px;
    height: 70px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex; /* Flexbox para alinear los 3 elementos */
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* 1. LOGO PHP PURE CSS */
/* estilos.css */

/* ... resto del código ... */

/* 1. LOGO TIPO TEXTO (Modificado para texto largo) */
.php-logo-css {
    font-family: 'Segoe UI', sans-serif; /* Fuente más legible para frases */
    font-weight: 700;
    font-style: normal; /* Quitamos itálica para que se lea mejor */
    color: white;
    background: linear-gradient(to bottom, #777BB4, #4F5B93);
    padding: 8px 20px; /* Un poco más de espacio */
    border-radius: 50px; /* Forma de pastilla perfecta */
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
    font-size: 0.95rem; /* Tamaño ajustado para que quepa bien */
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    cursor: default;
    user-select: none;
    margin-right: 20px;
    white-space: nowrap; /* Evita que el texto se parta en dos líneas */
}

/* ... resto del código ... */
/* 2. MENÚ CENTRAL */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

nav li {
    margin-right: 5px;
}

nav a.menu-link {
    text-decoration: none;
    color: #cbd0d8;
    font-weight: 500;
    padding: 10px 15px;
    display: block;
    border-radius: 4px;
    transition: all 0.3s ease;
}

nav a.menu-link:hover, nav a.menu-link.active {
    color: white;
    background-color: rgba(255,255,255,0.1);
}

/* 3. BOTÓN DOCUMENTACIÓN OFICIAL (DERECHA) */
.btn-doc-oficial {
    background-color: #ffad1b; /* Color naranja de contraste */
    color: #222;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-doc-oficial:hover {
    background-color: #ffc15e;
    transform: translateY(-2px);
}

.btn-doc-oficial::after {
    content: "↗"; /* Flechita unicode */
    font-size: 1.2em;
}

/* --- CONTENEDOR PRINCIPAL --- */
.container {
    max-width: 1000px;
    margin: 30px auto;
    background: #fff;
    padding: 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-radius: 4px;
    border-top: 5px solid var(--php-purple);
}

/* --- FIX CÓDIGO BLANCO --- */
/* Esto asegura que el bloque tenga fondo oscuro si el tema falla o tarda en cargar */
pre[class*="language-"] {
    background: #2d2d2d !important; /* Forzamos fondo gris oscuro */
    color: #ccc; /* Texto gris claro por defecto */
    text-shadow: none !important;
    border-radius: 6px;
    border: 1px solid #444;
}

/* --- TIPOGRAFÍA --- */
h1 { color: var(--php-bg-dark); }
h2 { 
    color: var(--php-dark-purple); 
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.file-name {
    font-family: 'Consolas', monospace;
    background: #eef0f8;
    color: var(--php-dark-purple);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #dde0ea;
}
footer {
    text-align: center;
    color: #888;
    margin-bottom: 30px;
}
/* --- FORZAR FONDO NEGRO EN EL CÓDIGO --- */
pre, code, pre[class*="language-"] {
    background-color: #282a36 !important; /* Gris muy oscuro / Negro */
    text-shadow: none !important;
}

/* Color del texto base dentro del código (por si acaso) */
code[class*="language-"], pre[class*="language-"] {
    color: #f8f8f2 !important;
}