/* ═══════════════════════════════════════════════════════════
   SUPERGUAY.COM - Estilo retro Y2K
   ═══════════════════════════════════════════════════════════ */

:root {
    --bg: #f2efe9;
    --panel: #ffffff;
    --panel-alt: #efe9df;
    --border: #8a76c9;
    --purple: #4a2d9e;
    --purple-dark: #2d1b6e;
    --purple-mid: #6b3fc0;
    --pink: #e0406a;
    --teal: #0fa8a0;
    --yellow: #f0c020;
    --orange: #f07020;
    --text: #241d3a;
    --text-mid: #3a3a5c;
    --text-light: #6868a0;
    --muted: #6b6584;
    --bg2: #e8e4de;
    --shadow: rgba(45, 27, 110, 0.15);
    --pixel: 'Press Start 2P', monospace;
    --body: Verdana, Tahoma, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.5;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--pink); text-decoration: underline; }

.px { image-rendering: pixelated; }

/* ── Cabecera superior ─────────────────────────────────────── */
.top { background: #fbf9f5; border-bottom: 2px solid var(--border); }

.top-inner {
    max-width: 1240px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}

.logo img { height: 58px; display: block; }

.nav-icons {
    display: flex; gap: 20px; flex: 1; justify-content: center; flex-wrap: wrap;
}

.nav-icons a {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-family: var(--pixel); font-size: 0.58rem; color: var(--purple-dark);
    letter-spacing: 1px;
}

.nav-icons a img { width: 40px; height: 40px; }
.nav-icons a:hover { color: var(--pink); text-decoration: none; }

/* ── Caja MI CUENTA ────────────────────────────────────────── */
.cuenta { width: 260px; margin: 0; }
.cuenta .win-body { padding: 10px 12px; background: var(--panel-alt); }

.cuenta-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cuenta-field label { width: 78px; font-size: 11px; }
.cuenta-field input {
    flex: 1; padding: 5px 6px; border: 1px solid #9a8bd0;
    background: #fff; font-size: 12px;
}

.cuenta-btn { width: 100%; margin-top: 4px; }

.cuenta-links { margin-top: 8px; font-size: 11px; line-height: 1.7; }

.cuenta-user { font-size: 12px; }
.cuenta-user strong { color: var(--purple-dark); }
.cuenta-links-row { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Barra de búsqueda ─────────────────────────────────────── */
.buscar-bar { background: linear-gradient(180deg, #3b2585, #2d1b6e); padding: 14px 0; }

.buscar-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

.buscar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.buscar-label {
    font-family: var(--pixel); color: var(--yellow); font-size: 0.72rem;
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
}

.buscar-label img { width: 34px; height: 34px; }

.buscar-row input[type=text] {
    flex: 1; min-width: 220px; padding: 10px;
    border: 2px solid var(--border); border-radius: 4px;
    font-family: var(--body); font-size: 13px;
}

.buscar-row select { padding: 9px; border: 2px solid var(--border); border-radius: 4px; }

.btn-buscar {
    background: var(--teal); color: #fff; border: 2px solid #0b8a83;
    border-radius: 4px; padding: 10px 24px;
    font-family: var(--pixel); font-size: 0.62rem; cursor: pointer;
}
.btn-buscar:hover { background: #0b8a83; }

.buscar-ejemplos { color: #cfc6ea; font-size: 11px; margin-top: 8px; }
.buscar-ejemplos a { color: #fff; text-decoration: underline; }

/* ── Ventanas estilo Y2K ───────────────────────────────────── */
.win {
    background: var(--panel); border: 2px solid var(--border);
    border-radius: 4px; box-shadow: 3px 3px 0 var(--shadow);
    margin-bottom: 18px;
}

.win-title {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    background: linear-gradient(180deg, var(--purple-mid), var(--purple-dark));
    color: #fff; font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 1px;
}

.win-title img { width: 16px; height: 16px; }

.win-title .win-link { margin-left: auto; color: var(--yellow); font-size: 0.55rem; }
.win-title .win-link:hover { color: #fff; text-decoration: none; }

.win-btns { display: flex; gap: 3px; }
.win-title .win-link + .win-btns { margin-left: 8px; }
.win-btns i {
    width: 14px; height: 14px; background: #e9e4da; border: 1px solid #9a8bd0;
    color: var(--purple-dark); font-style: normal; font-size: 9px;
    line-height: 12px; text-align: center; font-family: var(--body);
}
.win-title .win-link ~ .win-btns { margin-left: 0; }
.win-title .win-btns:last-child { margin-left: 8px; }

.win-body { padding: 12px; }

.win-teal .win-title { background: linear-gradient(180deg, #12c2b9, #0b8a83); }
.win-gold .win-title { background: linear-gradient(180deg, #f0c020, #d9a404); color: #241d3a; }
.win-gold .win-btns i { border-color: #b98f0a; }

/* ── Columnas de la portada ────────────────────────────────── */
.cols {
    display: grid; grid-template-columns: 250px 1fr 300px;
    gap: 18px; align-items: start;
}

@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } }

/* ── Listas de directorio / explorar ───────────────────────── */
.dir-list a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 4px; border-bottom: 1px dashed #d8d2e8; font-size: 12px;
}
.dir-list a:last-child { border-bottom: 0; }
.dir-list img { width: 16px; height: 16px; }
.dir-list .badge-new { margin-left: auto; }

/* ── Bienvenido ────────────────────────────────────────────── */
.bienvenido { display: flex; gap: 12px; align-items: center; }
.bienvenido img { width: 72px; height: 72px; }
.bienvenido p { font-size: 12px; }

/* ── Noticias destacadas ───────────────────────────────────── */
.noticia-main img { width: 100%; border: 2px solid var(--border); border-radius: 4px; }
.noticia-main h3 {
    font-family: var(--pixel); font-size: 0.78rem; line-height: 1.5;
    margin: 10px 0 6px; color: var(--purple-dark);
}
.noticia-main .extracto { font-size: 12px; color: var(--text-mid); }
.noticia-main .fecha { color: var(--muted); font-size: 11px; margin-top: 6px; }

.noticia-mini { display: flex; gap: 10px; padding: 9px 0; border-top: 1px dashed #d8d2e8; align-items: flex-start; }
.noticia-mini img { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 4px; }
.noticia-mini h4 { font-size: 12px; line-height: 1.4; }
.noticia-mini h4 a { color: var(--text); }
.noticia-mini h4 a:hover { color: var(--pink); }
.noticia-mini .fecha { color: var(--muted); font-size: 11px; }

/* ── Aplicaciones ──────────────────────────────────────────── */
.apps { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 14px; padding: 10px 0; }
.apps a { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 0.58rem; }
.apps a img { width: 56px; height: 56px; }
.apps a:hover { text-decoration: none; }
.apps .c-fotolog { color: var(--orange); }
.apps .c-foros { color: var(--purple); }
.apps .c-preguntas { color: var(--purple-dark); }
.apps .c-chat { color: var(--teal); }
.apps .c-juegos { color: var(--pink); }

/* ── Banner sitio genial ───────────────────────────────────── */
.banner {
    background: linear-gradient(90deg, #2d1b6e, #4a2d9e);
    border: 2px solid var(--border); border-radius: 6px;
    padding: 14px 16px; display: flex; align-items: center; gap: 14px;
    margin-bottom: 18px;
}
.banner img { width: 46px; height: 46px; }
.banner .txt { flex: 1; font-family: var(--pixel); font-size: 0.58rem; line-height: 1.9; color: #fff; }
.banner .txt .rosa { color: var(--pink); }
.banner .txt .amarillo { color: var(--yellow); }
.btn-add {
    background: var(--teal); border: 2px solid #0b8a83; color: #fff;
    font-family: var(--pixel); font-size: 0.58rem; padding: 12px 16px;
    border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.btn-add:hover { background: #0b8a83; color: #fff; text-decoration: none; }

/* ── Fotolog destacado ─────────────────────────────────────── */
.fotolog-logo { text-align: center; margin-bottom: 10px; }
.fotolog-logo img { max-width: 100%; }
.fotolog-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.fotolog-tiles a {
    border: 1px solid var(--border); border-radius: 4px; background: #fff;
    display: flex; align-items: center; justify-content: center; padding: 8px 4px;
}
.fotolog-tiles img { width: 34px; height: 34px; }
.fotolog-linea { font-size: 11px; color: var(--text-mid); }
.fotolog-linea a { font-weight: bold; }

/* ── Estadísticas en línea ─────────────────────────────────── */
.stats { width: 100%; font-size: 12px; border-collapse: collapse; }
.stats td { padding: 3px 0; }
.stats td:last-child { text-align: right; font-weight: bold; color: var(--purple); }

/* ── Encuesta ──────────────────────────────────────────────── */
.encuesta .q { font-weight: bold; font-size: 12px; margin-bottom: 8px; }
.encuesta label { display: flex; gap: 6px; align-items: center; padding: 3px 0; font-size: 12px; }
.encuesta .fila { margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { border-top: 2px solid var(--border); background: var(--panel-alt); margin-top: 30px; padding: 16px 0; }
.footer-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer-links a { margin-right: 14px; font-size: 12px; }
.footer-right { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.footer-right .corazon { color: #d00; }
.footer-social { display: flex; gap: 8px; }
.footer-social img { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════
   Clases de utilidad (páginas internas y admin)
   ═══════════════════════════════════════════════════════════ */

.sg-main { max-width: 1240px; margin: 0 auto; padding: 24px 20px; min-height: calc(100vh - 260px); }

.page-title {
    font-family: var(--pixel); font-size: 1rem; color: var(--purple-dark);
    margin: 6px 0 18px; padding-bottom: 10px;
    border-bottom: 3px solid var(--pink); display: inline-block;
}

.sg-box {
    background: #fff; border: 2px solid var(--border); border-radius: 4px;
    padding: 16px; margin-bottom: 16px; box-shadow: 3px 3px 0 var(--shadow);
}
.sg-box h2, .sg-box h3 { color: var(--purple-dark); margin-bottom: 12px; font-family: var(--pixel); font-size: 0.75rem; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 4px; font-size: 12px; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 8px; border: 2px solid var(--border); border-radius: 4px;
    font-family: var(--body); font-size: 13px; background: #fff;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--purple);
}
.form-group textarea { min-height: 100px; resize: vertical; }

.btn {
    display: inline-block; background: var(--purple); border: 2px solid var(--purple-dark);
    color: #fff; font-family: var(--pixel); font-size: 0.6rem;
    padding: 10px 16px; border-radius: 4px; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--purple-dark); color: #fff; text-decoration: none; }
.btn-pink { background: var(--pink); border-color: #b52a52; }
.btn-pink:hover { background: #c02050; }
.btn-teal { background: var(--teal); border-color: #0b8a83; }
.btn-teal:hover { background: #0b8a83; }
.btn-danger { background: #cc2233; border-color: #991122; }
.btn-danger:hover { background: #991122; }
.btn-sm { padding: 6px 10px; font-size: 0.55rem; }

.msg-ok { background: #e2f7e9; border: 2px solid #28c060; color: #155724; padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; font-size: 12px; }
.msg-error { background: #fde8ec; border: 2px solid #d00; color: #721c24; padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; font-size: 12px; }

.tabla { width: 100%; border-collapse: collapse; background: #fff; border: 2px solid var(--border); }
.tabla th { background: var(--purple); color: #fff; padding: 8px; text-align: left; font-size: 10px; font-family: var(--pixel); }
.tabla td { padding: 8px; border-bottom: 1px solid #e2dcf2; font-size: 12px; }
.tabla tr:hover { background: var(--bg); }

.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: bold; }
.badge-ok { background: #d4edda; color: #155724; }
.badge-warn { background: #fff3cd; color: #856404; }
.badge-error { background: #f8d7da; color: #721c24; }
.badge-new { background: var(--pink); color: #fff; }

.paginacion { display: flex; gap: 5px; justify-content: center; margin: 20px 0; flex-wrap: wrap; }
.paginacion a, .paginacion span { padding: 6px 10px; border: 2px solid var(--border); border-radius: 4px; font-size: 12px; }
.paginacion .pag-actual { background: var(--purple); color: #fff; }

.grid-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.noticia-card { background: #fff; border: 2px solid var(--border); border-radius: 4px; overflow: hidden; }
.noticia-card:hover { border-color: var(--purple); }
.noticia-card .imagen { height: 140px; background-size: cover; background-position: center; }
.noticia-card .contenido { padding: 12px; }
.noticia-card h3 { font-size: 13px; margin-bottom: 6px; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card { background: #fff; border: 2px solid var(--border); border-radius: 4px; padding: 16px; text-align: center; }
.stat-card .numero { font-size: 2rem; font-weight: 900; color: var(--purple); font-family: var(--pixel); }
.stat-card .etiqueta { color: var(--text-mid); font-size: 0.85rem; margin-top: 6px; }

/* Alineación de cabecera */
.top-inner { align-items: flex-start; }
.logo { padding-top: 10px; }
.nav-icons { padding-top: 8px; }

/* Noticias destacadas en dos columnas */
.noticias-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.ng-right { border-left: 1px dashed #d8d2e8; padding-left: 14px; }
.ng-right .noticia-mini:first-child { border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
    .noticias-grid { grid-template-columns: 1fr; }
    .ng-right { border-left: 0; padding-left: 0; }
}

/* Barra de inicio Windows 98 */
body { padding-bottom: 46px; }
.w98-bar {
    position: fixed; left: 0; right: 0; bottom: 0; height: 42px;
    background: #c0c0c0; border-top: 2px solid #fff;
    box-shadow: 0 -2px 0 #808080;
    display: flex; align-items: center; gap: 6px;
    padding: 4px 6px; z-index: 999; font-family: var(--body);
}
.w98-start {
    display: flex; align-items: center; gap: 7px;
    background: #c0c0c0; border: 2px solid; border-color: #fff #404040 #404040 #fff;
    padding: 4px 12px; font-weight: bold; font-size: 12px; cursor: pointer;
}
.w98-start:active { border-color: #404040 #fff #fff #404040; }
.w98-logo { display: grid; grid-template-columns: 8px 8px; grid-auto-rows: 8px; gap: 1px; }
.w98-logo i:nth-child(1) { background: #d00; }
.w98-logo i:nth-child(2) { background: #0a0; }
.w98-logo i:nth-child(3) { background: #00f; }
.w98-logo i:nth-child(4) { background: #f0c020; }
.w98-sep { width: 2px; height: 28px; border-left: 1px solid #808080; border-right: 1px solid #fff; }
.w98-task {
    flex: 0 1 240px; display: flex; align-items: center; gap: 7px;
    background: #c0c0c0; background-image: repeating-conic-gradient(#d6d6d6 0 25%, #c0c0c0 0 50%);
    background-size: 2px 2px;
    border: 2px solid; border-color: #404040 #fff #fff #404040;
    padding: 4px 10px; font-size: 12px; font-weight: bold; cursor: default;
}
.w98-task img { width: 16px; height: 16px; }
.w98-tray {
    margin-left: auto; display: flex; align-items: center; gap: 8px;
    border: 2px solid; border-color: #808080 #fff #fff #808080;
    padding: 4px 12px; font-size: 12px;
}

/* Botón Entrar del panel MI CUENTA */
.cuenta a.cuenta-btn { display: block; text-align: center; margin-top: 8px; }

/* ── Panel MI CUENTA compacto ──────────────────────────────── */
.cuenta { width: 225px; }
.cuenta .win-title { font-size: 0.55rem; padding: 5px 7px; }
.cuenta .win-body { padding: 10px 12px 12px; }
.cuenta a.cuenta-btn {
    display: block; text-align: center;
    padding: 9px 10px; font-size: 0.62rem; margin-top: 0;
}
.cuenta-links { margin-top: 9px; font-size: 10.5px; line-height: 1.7; }
.cuenta-user { font-size: 11.5px; }
.cuenta-links-row { gap: 5px; }
.cuenta-links-row .btn-sm { font-size: 0.5rem; padding: 5px 8px; }

/* Botones de ventana siempre a la derecha */
.win-title .win-btns { margin-left: auto; }

/* MI CUENTA compacto con avatar */
.cuenta { width: 215px; }
.cuenta .win-body { padding: 10px 12px 12px; }
.cuenta-row { display: flex; align-items: center; gap: 8px; }
.cuenta-avatar { width: 26px; height: 26px; }
.cuenta a.cuenta-btn { flex: 1; display: block; text-align: center; padding: 8px 6px; font-size: .6rem; margin-top: 0; }
.cuenta-links { margin-top: 9px; font-size: 10.5px; line-height: 1.7; }

/* Noticias: dos columnas en escritorio, una en movil */
.noticias-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 14px; }
.noticias-grid .noticia-main { grid-column: 1; grid-row: 1 / span 12; align-self: start; }
.noticias-grid .noticia-mini { grid-column: 2; }
@media (max-width: 900px) {
    .noticias-grid { display: block; }
}

/* ── Encabezado compacto ───────────────────────────────────── */
.top-inner { padding: 10px 20px; gap: 16px; }
.logo img { height: 46px; }
.nav-icons { gap: 14px; }
.nav-icons a { gap: 4px; font-size: 0.52rem; }
.nav-icons a img { width: 34px; height: 34px; }

.cuenta { width: 200px; }
.cuenta .win-title { font-size: 0.5rem; padding: 4px 7px; }
.cuenta .win-body { padding: 8px 10px 10px; }
.cuenta-avatar { width: 20px; height: 20px; }
.cuenta a.cuenta-btn { padding: 7px 6px; font-size: 0.55rem; }
.cuenta-links { margin-top: 7px; font-size: 10px; }

.buscar-bar { padding: 10px 0; }
.buscar-label { font-size: 0.65rem; }
.buscar-label img { width: 28px; height: 28px; }
.buscar-row input[type=text] { padding: 8px; }
.btn-buscar { padding: 8px 18px; font-size: 0.58rem; }

/* ── Ajustes finales ───────────────────────────────────────── */

/* Botones de ventana siempre pegados a la derecha */
.win-title .win-btns:last-child { margin-left: auto; }

/* Cabecera: logo e iconos centrados verticalmente */
.top-inner { align-items: center; }

/* Panel MI CUENTA más estrecho */
.cuenta { width: 190px; }

/* Checkboxes y radios con tamaño natural (no al 100%) */
.form-group input[type="checkbox"],
.form-group input[type="radio"] { width: auto; }

/* ── Correcciones definitivas ──────────────────────────────── */
.cuenta { width: 190px !important; max-width: 190px !important; }

.win-title .win-btns,
.win-title .win-btns:last-child { margin-left: auto !important; }

.form-group input[type="checkbox"],
.form-group input[type="radio"],
label input[type="checkbox"],
label input[type="radio"] { width: auto !important; flex: 0 0 auto !important; }

/* ── Logo más grande ───────────────────────────────────────── */
.logo img { height: 64px; }

/* ── Botón de menú móvil ───────────────────────────────────── */
.menu-btn { display: none; }

/* ── Móvil ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    .logo img { height: 52px; }

    .top-inner { flex-direction: column; align-items: center; gap: 12px; position: relative; padding-top: 14px; }
    .menu-btn {
        display: block; position: absolute; top: 10px; right: 10px;
        background: var(--purple); color: #fff; border: 2px solid var(--purple-dark);
        font-family: var(--pixel); font-size: 0.55rem; padding: 8px 10px; cursor: pointer;
    }
    .nav-icons { display: none; width: 100%; }
    .nav-icons.abierto { display: flex; }

    .cuenta { width: 100%; max-width: 320px; }

    /* Buscador apilado */
    .buscar-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .buscar-label { justify-content: center; font-size: 0.6rem; }
    .buscar-row select { width: 100%; }
    .btn-buscar { width: 100%; padding: 10px; }
    .buscar-ejemplos { text-align: center; }

    /* Noticias primero, justo después del buscador */
    .cols > section { order: 1; }
    .cols > aside:first-child { order: 2; }
    .cols > aside:last-child { order: 3; }

    /* Categorías: 2 columnas, 4 por columna, aleatorias */
    .dir-desktop { display: none; }
    .dir-mobile-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
    .dir-mobile-cats a {
        display: flex; align-items: center; gap: 6px;
        padding: 7px 2px; font-size: 12px; border-bottom: 1px dashed #d8d2e8;
    }
    .dir-mobile-cats img { width: 14px; height: 14px; }
    .dir-mas { display: block; width: 100%; text-align: center; margin-top: 12px; }
}

@media (min-width: 1001px) {
    .dir-mobile-cats { display: none; }
    .dir-mas { display: inline-block; margin-top: 8px; }
}

/* Componentes del fotolog */
.fl-box { background:#fff; border:2px solid var(--border); border-radius:4px; padding:16px; margin-bottom:16px; box-shadow:3px 3px 0 var(--shadow); }
.grid-fotos { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.foto-card { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:4px; border:2px solid var(--border); background:#eee; display:block; }
.foto-card:hover { border-color:var(--pink); text-decoration:none; }
.foto-card img { width:100%; height:100%; object-fit:cover; }
.foto-card .overlay { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(0,0,0,0.75), transparent); padding:8px; color:#fff; font-size:11px; opacity:0; transition:opacity .2s; }
.foto-card:hover .overlay { opacity:1; }
.perfil-header { display:grid; grid-template-columns:160px 1fr; gap:24px; align-items:start; margin-bottom:20px; }
.avatar-grande { width:150px; height:150px; border-radius:50%; object-fit:cover; border:4px solid var(--purple); background:#ddd; }
.perfil-stats { display:flex; gap:20px; margin:12px 0; }
.stat { text-align:center; }
.stat-num { font-size:1.2rem; font-weight:bold; color:var(--purple); font-family:var(--pixel); }
.stat-label { font-size:11px; color:var(--text-mid); }

/* Página de foto estilo fotolog.com */
.foto-page { display:grid; grid-template-columns:170px 1fr 170px; gap:16px; align-items:start; }
.fp-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fp-thumbs a { display:block; border:1px solid var(--border); border-radius:4px; overflow:hidden; }
.fp-thumbs img { width:100%; height:70px; object-fit:cover; display:block; }
.fp-foto img { width:100%; max-width:520px; display:block; margin:0 auto; border:2px solid var(--border); border-radius:4px; }
.fp-textos { text-align:center; margin-top:12px; }
.fp-textos h2 { font-family:var(--pixel); font-size:.8rem; color:var(--purple-dark); margin-bottom:8px; }
.fp-meta { color:var(--muted); font-size:11px; margin:8px 0; }
.fp-acciones { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Calendario */
.cal-cab { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cal-tabla { width:100%; border-collapse:collapse; }
.cal-tabla th { font-size:10px; font-family:var(--pixel); color:var(--purple-dark); padding:4px 0; }
.cal-tabla td { border:1px solid var(--border); width:14%; height:64px; vertical-align:top; padding:2px; font-size:10px; color:var(--muted); }
.cal-tabla td img { width:100%; height:44px; object-fit:cover; display:block; border-radius:2px; }
.cal-tabla td.vacio { background:#f4f1fa; }

@media (max-width:1000px) {
    .foto-page { grid-template-columns:1fr; }
    .perfil-header { grid-template-columns:1fr; }
}

/* Calendario de fotos */
.cal-cab { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cal-cab .mes { font-family:var(--pixel); font-size:.7rem; color:var(--purple-dark); }
.cal-tabla { width:100%; border-collapse:collapse; table-layout:fixed; }
.cal-tabla th { font-size:9px; font-family:var(--pixel); color:var(--purple-dark); padding:4px 0; }
.cal-tabla td { border:1px solid var(--border); height:64px; vertical-align:top; padding:2px; font-size:10px; color:var(--muted); }
.cal-tabla td img { width:100%; height:44px; object-fit:cover; display:block; border-radius:2px; }
.cal-tabla td.vacio { background:#f4f1fa; }
.cal-tabla td.hoy { outline:2px solid var(--pink); }

/* Hilera de navegación bajo el buscador */
.fl-nav { background:#efe9df; border-bottom:2px solid var(--border); }
.fl-nav-inner { max-width:1240px; margin:0 auto; padding:6px 20px; display:flex; gap:4px; flex-wrap:wrap; }
.fl-nav a { padding:6px 12px; font-family:var(--pixel); font-size:.52rem; color:var(--purple-dark); border-radius:4px; }
.fl-nav a:hover { background:var(--pink); color:#fff; text-decoration:none; }

/* Migas de pan */
.migas { font-size:11px; margin-bottom:14px; color:var(--muted); }
.migas a { color:var(--purple); }
.migas .sep { color:var(--pink); margin:0 4px; }
.migas .actual { color:var(--text-mid); }

/* Columnas laterales más anchas y títulos sin desbordar */
.foto-page { grid-template-columns: 200px 1fr 200px; }
.win-title span:not(.win-btns) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Barra compacta: migas + enlaces + subir foto en una sola hilera */
.fl-nav-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 20px; }
.fl-nav .migas { margin: 0; font-size: 11px; }
.fl-nav-links { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
.fl-nav-links a { padding: 5px 10px; font-size: .5rem; }
.fl-subir { white-space: nowrap; }

/* Icono del buscador: proporción preservada y sin pixelado sucio */
.buscar-label img { height: 32px; width: 32px; object-fit: contain; image-rendering: auto; border-radius: 6px; }

/* Logo sin distorsión */
.logo img { image-rendering: auto; height: 80px; width: auto; }
@media (max-width: 1000px) { .logo img { height: 56px; } }