/* ===== Ajustes propios sobre el template "Developer" ===== */

/* --- Header: foto más chica (no más grande que el título) --- */
/* Foto + título/subtítulo alineados verticalmente al centro (Opción 2) */
.header .profile-head {
    display: flex;
    align-items: center;
}
.header .profile-image {
    width: 104px;
    height: 104px;
    object-fit: cover;
    margin: 0 1.1rem 0 0;
    flex: 0 0 auto;
}
.header .profile-titles { min-width: 0; }
.header .name { margin-top: 0; margin-bottom: .15rem; }   /* el template le ponía margin-top:30px */
.header .desc { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .header .profile-image { width: 72px; height: 72px; }
}

/* Iconos sociales (webfont, no SVG-JS): centrado y contraste */
.header .profile-content .social a i {
    font-size: 18px;
    line-height: 36px;
    vertical-align: middle;
}
body[data-theme="dark"] .header .profile-content .social a { color: rgba(255, 255, 255, 0.85); }
body[data-theme="dark"] .header .profile-content .social a:hover { color: #fff; }

/* Menú bajo el título */
.site-nav a {
    font-weight: 700;
    margin-right: 1.25rem;
    white-space: nowrap;
}
.site-nav a:last-child { margin-right: 0; }
.site-nav a.active { text-decoration: underline; }

/* Acciones del header (modo oscuro + contáctame) alineadas a la derecha */
.header-actions .dark-mode-switch { justify-content: flex-end; }
.header-actions .btn-cta-primary { display: inline-block; }

/* --- Formularios oscuros (comentarios / contacto) sobre tema dark --- */
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
    background-color: #2b2f36;
    border-color: #3a3f47;
    color: #e6e6e6;
}
body[data-theme="dark"] .form-control::placeholder { color: #8b9197; }
body[data-theme="dark"] .form-control:focus,
body[data-theme="dark"] .form-select:focus {
    background-color: #2b2f36;
    color: #fff;
    border-color: #5b6470;
    box-shadow: none;
}

/* --- Espacio icono↔texto en listas del aside --- */
.aside .content li i,
.info .content li i {
    margin-right: 0.6rem;
    width: 1rem;
    text-align: center;
}

/* --- GitHub: el chart es claro por naturaleza → panel claro para que se vea nítido --- */
.github-panel { background: #ffffff; }
.github-panel .heading { color: #24292f; border-bottom-color: #e1e4e8; }
.github-full .github-chart {
    width: 100%;
    max-width: 860px;
    display: block;
    margin: 0.5rem auto 0;
}

/* --- Mini mapa de ubicación en el aside --- */
.location-map {
    width: 100%;
    height: 140px;
    border: 0;
    border-radius: 0.4rem;
    margin-top: 0.5rem;
}

/* --- Layout limpio del blog: contenido legible --- */
.blog-body .pb-article { max-width: 820px; margin: 0 auto; }
.project-image, .card-img-top.pb-cover { object-fit: cover; }

/* Contraste de lectura del blog (el template deja el texto muy apagado en dark) */
body[data-theme="dark"] .blog-body .pb-article,
body[data-theme="dark"] .pb-content,
body[data-theme="dark"] .pb-content p,
body[data-theme="dark"] .pb-content li,
body[data-theme="dark"] .pb-content td,
body[data-theme="dark"] .pb-content blockquote {
    color: #dde3ea;
    font-size: 1.06rem;
    line-height: 1.75;
}
body[data-theme="dark"] .pb-content h1,
body[data-theme="dark"] .pb-content h2,
body[data-theme="dark"] .pb-content h3,
body[data-theme="dark"] .pb-content h4,
body[data-theme="dark"] .pb-article > header h1 { color: #f4f7fa; }
body[data-theme="dark"] .pb-content strong { color: #ffffff; }
body[data-theme="dark"] .pb-content a { color: #5cc795; }
body[data-theme="dark"] .pb-content code {
    color: #ff9bb3; background: #1b2230; padding: .1rem .35rem; border-radius: .3rem;
}
body[data-theme="dark"] .pb-content pre {
    background: #11151c; color: #d7e0ea; border: 1px solid #232a35; padding: 1rem; border-radius: .5rem; overflow-x: auto;
}
body[data-theme="dark"] .pb-content pre code { color: #d7e0ea; background: transparent; padding: 0; }
body[data-theme="dark"] .pb-content blockquote {
    border-left: 3px solid #2e8b57; padding-left: 1rem; color: #c4ccd4; font-style: italic;
}
body[data-theme="dark"] .pb-meta { color: #9aa3ad; }

/* Imágenes del post: que se ajusten al ancho del texto y no dominen (cap de alto) */
.pb-article .pb-cover {
    width: 100%;
    max-height: 56vh;
    object-fit: cover;
    border-radius: .5rem;
}
.pb-content img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    margin: 1.4rem auto;
    border-radius: .4rem;
}
.pb-content figure { margin: 1.4rem 0; text-align: center; }
.pb-content figure img { margin: 0 auto .4rem; }

/* ===== Panel de administración (oscuro, layout propio) ===== */
body.admin-body { background: #14171c; color: #d7dbe0; }
.admin-nav { background: #1b1f26; border: 1px solid #2a2f37; }
.admin-nav .navbar-brand { color: #e9edf1; font-weight: 700; }
.admin-nav .nav-link { color: #cfd4da; }
.admin-nav .nav-link:hover { color: #3fb27f; }
.admin-nav .btn-outline-secondary { color: #cfd4da; border-color: #3a4049; }
.admin-nav .btn-outline-secondary:hover { background: #2a2f37; color: #fff; }
.admin-body .card { background: #1b1f26; border: 1px solid #262b33; color: #d7dbe0; }
.admin-body .card a { color: #e2e6ea; }
.admin-body h1, .admin-body h2, .admin-body h3 { color: #f0f3f6; }
.admin-body .table { color: #d7dbe0; --bs-table-bg: transparent; }
.admin-body .table > :not(caption) > * > * { background-color: transparent; color: #d7dbe0; border-color: #2a2f37; }
.admin-body .table thead th { color: #9aa3ad; border-color: #2a2f37; }
.admin-body .table-hover > tbody > tr:hover > * { background-color: #232830; color: #fff; }
.admin-body .list-group-item { background: #1b1f26; border-color: #2a2f37; color: #d7dbe0; }
.admin-body .form-text { color: #8b9299; }
.admin-body .text-muted { color: #9aa3ad !important; }

/* ===== Header minimal de login/registro (solo menú) ===== */
.auth-nav { border-bottom: 1px solid rgba(255,255,255,.08); background: #16191f; }
.auth-brand { font-weight: 700; font-size: 1.1rem; color: #e9edf1; text-decoration: none; }
.auth-brand:hover { color: #fff; }
.auth-links a { color: #cfd4da; text-decoration: none; font-weight: 600; margin-left: 1.25rem; }
.auth-links a:hover { color: #3fb27f; }
@media (max-width: 575.98px) { .auth-links a { margin-left: .8rem; font-size: .9rem; } }

/* ===== Encabezado de página (Blog / Proyectos) ===== */
.pb-page-title { font-weight: 700; letter-spacing: -.5px; }

/* ===== Tarjetas en tema oscuro ===== */
body[data-theme="dark"] .card { background: #20242b; color: #d7dbe0; }
body[data-theme="dark"] .pagination .page-link { background:#20242b; border-color:#333a43; color:#cfd4da; }
body[data-theme="dark"] .pagination .page-item.disabled .page-link { background:#1a1d22; color:#6b7178; }

/* ===== PORTAFOLIO (estilo grid tipo SB UI Kit) ===== */
.pb-portfolio-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.pb-portfolio-card:hover { transform: translateY(-4px); box-shadow: 0 .9rem 1.6rem rgba(0,0,0,.45) !important; }
.pb-portfolio-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background:#171a1f; }
.pb-portfolio-media img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.pb-portfolio-card:hover .pb-portfolio-media img { transform: scale(1.06); }
.pb-portfolio-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#3a4049; }
.pb-portfolio-ribbon { position:absolute; top:.6rem; left:.6rem; background:#f0ad4e; color:#1b1f24; font-size:.7rem; font-weight:700; padding:.15rem .55rem; border-radius:.3rem; }
.pb-portfolio-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-end; padding:.8rem; opacity:0; background:linear-gradient(to top, rgba(0,0,0,.55), transparent 60%); transition:opacity .2s ease; }
.pb-portfolio-card:hover .pb-portfolio-overlay { opacity:1; }
.pb-portfolio-overlay span { color:#fff; font-weight:600; font-size:.85rem; }
.pb-portfolio-title { color:#e9edf1; margin-bottom:.35rem; }
.pb-portfolio-outcome { color:#3fb27f; font-weight:600; font-size:.85rem; margin-bottom:.4rem; }
.pb-portfolio-summary { font-size:.85rem; }
.pb-portfolio-tech { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; }
.pb-portfolio .pb-chip { background:#2a2f37; color:#aeb6bf; border:1px solid #3a4049; font-size:.72rem; padding:.12rem .5rem; border-radius:1rem; }
.pb-portfolio--compact .pb-portfolio-media { aspect-ratio: 16/9; }

/* ===== BLOG (overview tipo cards) ===== */
.pb-postcard { overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.pb-postcard:hover { transform: translateY(-4px); box-shadow:0 .9rem 1.6rem rgba(0,0,0,.45) !important; }
.pb-postcard-media { display:block; aspect-ratio:16/9; overflow:hidden; background:#171a1f; }
.pb-postcard-media img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.pb-postcard:hover .pb-postcard-media img { transform:scale(1.05); }
.pb-postcard-meta { font-size:.75rem; color:#8b9299; margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.pb-cat { background:#2e8b57; color:#fff; padding:.1rem .5rem; border-radius:1rem; font-weight:600; font-size:.72rem; }
.pb-postcard-title a { color:#e9edf1; text-decoration:none; }
.pb-postcard-title a:hover { color:#3fb27f; }
.pb-postcard-excerpt { font-size:.9rem; }
.pb-readmore { font-weight:600; font-size:.85rem; color:#3fb27f; text-decoration:none; align-self:flex-start; }
.pb-readmore:hover { color:#5cc795; }

/* ===== "Del blog" en el home: destacado grande + filas ===== */
.blog-latest .content, .latest .content { margin-top: 1.1rem; }   /* separa la imagen del título de la sección */
.pb-feature-media { display:block; border-radius:.55rem; overflow:hidden; }
.pb-feature-media img { width:100%; max-height:360px; object-fit:cover; display:block; transition:transform .4s ease; }
.pb-feature-media:hover img { transform:scale(1.03); }
.pb-feature-body { padding-top:.9rem; }
.pb-feature-title { font-size:1.45rem; font-weight:700; letter-spacing:-.3px; margin:.25rem 0 .55rem; }
.pb-feature-title a { color:#e9edf1; text-decoration:none; }
.pb-feature-title a:hover { color:#3fb27f; }
.pb-feature-abstract { color:#aeb6bf; }

.pb-row { display:flex; gap:1.1rem; padding:1.15rem 0; border-top:1px solid rgba(255,255,255,.07); }
.pb-row-thumb { flex:0 0 180px; max-width:180px; border-radius:.45rem; overflow:hidden; align-self:flex-start; }
.pb-row-thumb img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .4s ease; }
.pb-row-thumb:hover img { transform:scale(1.05); }
.pb-row-body { min-width:0; }
.pb-row-title { font-size:1.08rem; font-weight:600; margin:.15rem 0 .35rem; }
.pb-row-title a { color:#e2e6ea; text-decoration:none; }
.pb-row-title a:hover { color:#3fb27f; }
.pb-row-abstract { color:#9aa1a9; font-size:.9rem; margin-bottom:.4rem; }
@media (max-width: 575.98px) {
    .pb-row { flex-direction:column; }
    .pb-row-thumb { flex-basis:auto; max-width:100%; }
}

/* ===== Contraste base en modo oscuro =====
   El template deja el body en #434343 (rgb 67,67,67), ilegible sobre el fondo oscuro.
   Subimos el piso: todo el texto sin override más específico hereda un gris claro legible
   (#c9ced4 sobre #17191c ≈ 11:1, AAA). Las .section-inner y otras reglas más específicas mandan. */
body[data-theme="dark"] {
    color: #c9ced4;
}
body[data-theme="dark"] .lead,
body[data-theme="dark"] .pb-page-head .lead {
    color: #b6bdc5;
}
/* dt/dd de la ficha de proyecto y small sueltos */
body[data-theme="dark"] dt { color: #aeb6bf; }
body[data-theme="dark"] dd { color: #d3d9e0; }

/* ===== Accesibilidad: skip link "Saltar al contenido" ===== */
.skip-link {
    position:absolute; top:.5rem; left:.5rem; z-index:2000;
    background:#2e8b57; color:#fff; padding:.5rem .9rem; border-radius:.4rem;
    font-weight:600; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,.4);
}
.skip-link:hover, .skip-link:focus { color:#fff; }

/* ============================================================
   RESPONSIVIDAD (auditoría 2026-06-17)
   ============================================================ */

/* P1 — Header: menú hamburguesa en móvil */
.site-nav-toggler {
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    color: #cfd4da;
    border-radius: .4rem;
    padding: .4rem .8rem;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
}
.site-nav-toggler:hover { color:#fff; border-color: rgba(255,255,255,.45); }
@media (max-width: 767.98px) {
    .site-nav-links a {
        display: block;
        margin: 0;
        padding: .55rem .1rem;
        white-space: normal;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .site-nav-links a:last-child { border-bottom: 0; }
}

/* P2 — Header: escalar nombre y subtítulo en pantallas chicas */
@media (max-width: 767.98px) {
    .header .profile-content .desc, .header .desc { font-size: 16px; line-height: 1.4; }
    .header .profile-content .name, .header .name { font-size: 26px; }
}
@media (max-width: 575.98px) {
    .header .profile-content .desc, .header .desc { font-size: 14px; }
}

/* P3 — Padding lateral consistente en móvil */
@media (max-width: 575.98px) {
    .sections-wrapper.container { padding-left: 1rem; padding-right: 1rem; }
}

/* P4 — Gráfico de GitHub contenido (sin scroll horizontal) */
.github-panel { overflow-x: hidden; }
.github-full .github-chart { height: auto; }

/* P5 — Mapa de ubicación: más alto cuando el aside se apila */
.location-map { width: 100%; height: 140px; border: 0; border-radius: .4rem; }
@media (max-width: 991.98px) {
    .location-map { height: 200px; }
}

/* P6 — Tipografía del blog con escala fluida */
body[data-theme="dark"] .pb-content p,
body[data-theme="dark"] .pb-content li {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.15rem);
    line-height: 1.75;
}

/* P7 — Admin: toggler visible en tema oscuro */
.admin-nav .navbar-toggler {
    border-color: rgba(255,255,255,.2);
    color: #cfd4da;
    padding: .35rem .6rem;
}
.admin-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(63,178,127,.35); }
.admin-nav .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

/* P9 — Admin: truncar títulos largos en móvil dentro de la tabla */
@media (max-width: 767.98px) {
    .admin-body .table td:first-child {
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* .text-muted legible en modo oscuro.
   Bootstrap fuerza .text-muted con !important vía --bs-secondary-color (en dark queda casi negro).
   Se redefine la variable (cubre cualquier uso) + override directo con !important. */
body[data-theme="dark"] {
    --bs-secondary-color: rgba(174, 182, 191, .9);
    --bs-secondary-color-rgb: 174, 182, 191;
}
body[data-theme="dark"] .text-muted { color: #aeb6bf !important; }

/* ===== EasyMDE — tema oscuro para el admin (su CSS del CDN trae fondo blanco hardcodeado) ===== */
.admin-body .EasyMDEContainer .CodeMirror {
    background: #1e2229 !important;
    color: #d7dbe0 !important;
    border-color: #2a2f37 !important;
}
.admin-body .EasyMDEContainer .CodeMirror-cursor { border-left-color: #d7dbe0 !important; }
.admin-body .EasyMDEContainer .CodeMirror-activeline-background { background: rgba(255,255,255,.04) !important; }
.admin-body .EasyMDEContainer .CodeMirror-selected,
.admin-body .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: rgba(63,178,127,.25) !important; }

.admin-body .editor-toolbar { background: #1b1f26 !important; border-color: #2a2f37 !important; }
.admin-body .editor-toolbar button,
.admin-body .editor-toolbar .fa,
.admin-body .editor-toolbar i { color: #cfd4da !important; }
.admin-body .editor-toolbar button:hover,
.admin-body .editor-toolbar button.active {
    background: #2a2f37 !important; border-color: #3a4049 !important; color: #fff !important;
}
.admin-body .editor-toolbar i.separator { border-left-color: #2a2f37 !important; border-right-color: transparent !important; }

.admin-body .editor-preview {
    background: #1e2229 !important; color: #d7dbe0 !important; border-color: #2a2f37 !important;
}
.admin-body .editor-preview h1,
.admin-body .editor-preview h2,
.admin-body .editor-preview h3 { color: #f0f3f6; }
.admin-body .editor-preview a { color: #3fb27f; }
.admin-body .editor-preview code { background: #11151c; color: #ff9bb3; }
.admin-body .editor-preview pre { background: #11151c; color: #d7e0ea; }

.admin-body .editor-statusbar { color: #8b9299 !important; border-top-color: #2a2f37 !important; }

/* Colisión de clases: el botón "tabla" de EasyMDE es <button class="table">, y la .table de
   Bootstrap le aplica width:100% + margin-bottom → lo estiraba a todo el ancho rompiendo la toolbar.
   Se restaura el layout inline propio de EasyMDE. */
.admin-body .editor-toolbar button.table {
    width: auto !important;
    min-width: 30px;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle;
}