/* QUIMIKA · Mis fotografías: capa visual para claro / oscuro / automático.
   Se carga DESPUÉS de style.css, mis_fotos.css y tema_quimika.css. */

html[data-theme="light"] body[data-page="mis_fotos"] {
    --mf-bg: #f7f5fb;
    --mf-card: #ffffff;
    --mf-soft: #f8f5fc;
    --mf-input: #fcfaff;
    --mf-text: #261b36;
    --mf-muted: #6f647f;
    --mf-border: #e6dfed;
    --mf-pink: #b6417d;
    --mf-accent: #7746b1;
    --mf-accent-bg: #f4eafa;
    --mf-progress-track: #ede5f1;
    --mf-shadow: 0 14px 45px rgba(45, 25, 74, .07);
    --mf-success-bg: #eaf8f0;
    --mf-success-text: #17633b;
    --mf-danger-bg: #fff0f3;
    --mf-danger-text: #9e3150;
    color-scheme: light;
}
html[data-theme="dark"] body[data-page="mis_fotos"] {
    --mf-bg: #0e0b1a;
    --mf-card: #1a142a;
    --mf-soft: #231a38;
    --mf-input: #151023;
    --mf-text: #f8f3ff;
    --mf-muted: #b8accb;
    --mf-border: #403351;
    --mf-pink: #f3a0c9;
    --mf-accent: #c4a4fa;
    --mf-accent-bg: #332440;
    --mf-progress-track: #302641;
    --mf-shadow: 0 15px 40px rgba(0, 0, 0, .17);
    --mf-success-bg: #193d2c;
    --mf-success-text: #b8f4cf;
    --mf-danger-bg: #432534;
    --mf-danger-text: #ffc4d5;
    color-scheme: dark;
}

body[data-page="mis_fotos"] { background: var(--mf-bg); color: var(--mf-text); }
body[data-page="mis_fotos"] .fotos-main { min-width: 0; }
body[data-page="mis_fotos"] .fotos-topbar { align-items: center; gap: 16px; }
body[data-page="mis_fotos"] .fotos-topbar h1 { color: var(--mf-text); letter-spacing: -.035em; }
body[data-page="mis_fotos"] .fotos-topbar .subtitle,
body[data-page="mis_fotos"] .fotos-descripcion,
body[data-page="mis_fotos"] .fotos-formatos,
body[data-page="mis_fotos"] #estado_fotos { color: var(--mf-muted); }
body[data-page="mis_fotos"] .eyebrow,
body[data-page="mis_fotos"] .foto-kicker { color: var(--mf-pink); font-weight: 800; letter-spacing: .11em; font-size: 11px; }
body[data-page="mis_fotos"] .fotos-enlace-perfil,
body[data-page="mis_fotos"] .fotos-regresar { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--mf-text); text-decoration: none; }
body[data-page="mis_fotos"] .fotos-enlace-perfil svg,
body[data-page="mis_fotos"] .fotos-regresar svg { width: 17px; height: 17px; }
body[data-page="mis_fotos"] .fotos-enlace-perfil { background: var(--mf-card); border: 1px solid var(--mf-border); border-radius: 999px; padding: 10px 16px; box-shadow: none; white-space: nowrap; }
body[data-page="mis_fotos"] .fotos-regresar { font-size: 13px; margin: 0 0 18px; color: var(--mf-muted); width: fit-content; }
body[data-page="mis_fotos"] .fotos-regresar:hover,
body[data-page="mis_fotos"] .fotos-enlace-perfil:hover { color: var(--mf-accent); }

body[data-page="mis_fotos"] .fotos-intro { display: flex; align-items: flex-start; gap: 18px; background: var(--mf-card); border: 1px solid var(--mf-border); box-shadow: var(--mf-shadow); border-radius: 22px; padding: clamp(20px, 3vw, 30px); margin-bottom: 22px; color: var(--mf-text); }
body[data-page="mis_fotos"] .fotos-intro-icono { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 56px; background: var(--mf-accent-bg); color: var(--mf-pink); border: 1px solid var(--mf-border); border-radius: 18px; }
body[data-page="mis_fotos"] .fotos-intro-icono svg { width: 27px; height: 27px; }
body[data-page="mis_fotos"] .fotos-intro h2 { margin: 6px 0 8px; color: var(--mf-text); font-size: clamp(20px, 3vw, 27px); letter-spacing: -.025em; }
body[data-page="mis_fotos"] .fotos-intro p { color: var(--mf-muted); margin: 0; line-height: 1.7; font-size: 14px; }

body[data-page="mis_fotos"] .fotos-panel,
body[data-page="mis_fotos"] .panel { background: var(--mf-card); border: 1px solid var(--mf-border); border-radius: 22px; box-shadow: var(--mf-shadow); color: var(--mf-text); }
body[data-page="mis_fotos"] .fotos-panel { padding: clamp(20px, 3vw, 32px); }
body[data-page="mis_fotos"] .fotos-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
body[data-page="mis_fotos"] .fotos-cabecera h2 { color: var(--mf-text); margin: 5px 0 0; font-size: 23px; }
body[data-page="mis_fotos"] .fotos-contador { display: inline-flex; padding: 9px 13px; border: 1px solid var(--mf-border); border-radius: 999px; background: var(--mf-soft); color: var(--mf-text); font-size: 12px; font-weight: 700; }
body[data-page="mis_fotos"] .fotos-descripcion { margin: 14px 0 20px; line-height: 1.75; }
body[data-page="mis_fotos"] #btn_seleccionar_fotos { display: inline-flex; justify-content: center; align-items: center; gap: 10px; min-height: 47px; padding: 12px 20px; border-radius: 12px; cursor: pointer; font-weight: 700; }
body[data-page="mis_fotos"] #btn_seleccionar_fotos svg { width: 20px; height: 20px; flex-shrink: 0; }
body[data-page="mis_fotos"] #btn_seleccionar_fotos[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
body[data-page="mis_fotos"] .fotos-progreso { background: var(--mf-progress-track); border-radius: 999px; overflow: hidden; height: 8px; margin: 22px 0; }
body[data-page="mis_fotos"] .fotos-progreso-barra { background: linear-gradient(90deg, #ec78b2, #9c72f4); border-radius: inherit; height: 100%; transition: width .25s ease; }
body[data-page="mis_fotos"] .galeria-fotos { min-width: 0; }

/* Elementos añadidos dinámicamente a la galería (sin cambiar el JS). */
body[data-page="mis_fotos"] .galeria-fotos :is(.foto-card, .foto-tarjeta, .foto-item, .foto-slot, .foto-vacia, .galeria-item, .galeria-vacia, .foto-placeholder, .fotos-vacio) { background: var(--mf-soft); border-color: var(--mf-border); color: var(--mf-text); }
body[data-page="mis_fotos"] .galeria-fotos :is(.foto-estado, .foto-detalle, .foto-descripcion, .foto-texto, small) { color: var(--mf-muted); }
body[data-page="mis_fotos"] .galeria-fotos :is(button, a) { transition: background-color .2s, border-color .2s, color .2s; }
body[data-page="mis_fotos"] .galeria-fotos :is(button, a):focus-visible,
body[data-page="mis_fotos"] #btn_seleccionar_fotos:focus-visible { outline: 3px solid var(--mf-accent); outline-offset: 3px; }

body[data-page="mis_fotos"] .fotos-formatos { border-top: 1px solid var(--mf-border); padding-top: 17px; margin: 18px 0 0; font-size: 12px; line-height: 1.7; }
body[data-page="mis_fotos"] .fotos-ayuda { display: flex; align-items: flex-start; gap: 13px; margin-top: 18px; padding: 20px 22px; border: 1px solid var(--mf-border); border-radius: 17px; background: var(--mf-soft); color: var(--mf-text); }
body[data-page="mis_fotos"] .fotos-ayuda-icono { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; color: var(--mf-pink); background: var(--mf-accent-bg); }
body[data-page="mis_fotos"] .fotos-ayuda-icono svg { width: 19px; height: 19px; }
body[data-page="mis_fotos"] .fotos-ayuda strong { color: var(--mf-text); }
body[data-page="mis_fotos"] .fotos-ayuda p { color: var(--mf-muted); margin: 5px 0 0; font-size: 13px; line-height: 1.7; }
body[data-page="mis_fotos"] .menu a,
body[data-page="mis_fotos"] .menu .logout-menu { display: flex; align-items: center; gap: 12px; }
body[data-page="mis_fotos"] .menu .icon { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.8; }

@media (max-width: 650px) {
    body[data-page="mis_fotos"] .fotos-topbar { align-items: flex-start; }
    body[data-page="mis_fotos"] .fotos-enlace-perfil { padding: 9px; }
    body[data-page="mis_fotos"] .fotos-enlace-perfil span { display: none; }
    body[data-page="mis_fotos"] .fotos-intro { flex-direction: column; gap: 13px; }
    body[data-page="mis_fotos"] .fotos-cabecera { align-items: flex-start; }
    body[data-page="mis_fotos"] #btn_seleccionar_fotos { width: 100%; }
}