:root{--navy:#112d4d;--blue:#2865a1;--sky:#a7cbe9;--ink:#172c43;--muted:#7d8da0;--line:#e8edf3;--paper:#fff;--bg:#f5f8fc;--shadow:0 10px 35px #1b3b5a0d}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer;color:inherit}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:252px;padding:30px 20px 20px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--navy);padding:0 6px}.brand img{width:43px;height:43px}.brand strong{font:700 20px Manrope,sans-serif;letter-spacing:.19em;display:block}.brand small{font-size:8px;letter-spacing:.15em;color:#8191a4}.family-card{margin:42px 0 26px;padding:12px;background:#f6f9fc;border:1px solid #edf1f6;border-radius:13px;display:flex;align-items:center;gap:11px}.avatar{height:38px;width:38px;border-radius:50%;background:#d8eafb;color:#225986;display:grid;place-items:center;font:600 12px Manrope;flex:none}.family-card strong,.family-card small,.sync-status strong,.sync-status small{display:block}.family-card strong{font-size:11px}.family-card small{font-size:10px;color:var(--muted);margin-top:3px}.online-dot{height:7px;width:7px;border-radius:50%;background:#53b68a;margin-left:auto}.side-nav{display:grid;gap:5px}.nav-item{height:43px;border:0;background:transparent;border-radius:10px;text-align:left;padding:0 12px;display:flex;align-items:center;gap:12px;color:#67788b;font-size:13px}.nav-item:hover{background:#f5f8fc}.nav-item.active{background:#eaf3fb;color:#205b91;font-weight:600}.nav-icon{width:19px;font-size:19px;text-align:center;color:inherit}.nav-count{margin-left:auto;font-size:10px;color:#93a2b1}.nav-divider{border-top:1px solid var(--line);margin:14px 0 9px}.sidebar-bottom{margin-top:auto}.sync-status{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;padding:12px}.sync-check{background:#e5f5ee;color:#31825d;width:27px;height:27px;border-radius:50%;display:grid;place-items:center}.sync-status strong{font-size:11px}.sync-status small{font-size:9px;color:var(--muted);margin-top:3px}.sidebar-bottom p{font-size:8px;line-height:1.7;letter-spacing:.13em;color:#a1afbd;margin:22px 0 0 7px}.main-area{margin-left:252px;max-width:1600px;padding:0 54px}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.breadcrumbs{font-size:11px;color:#8b99a9}.breadcrumbs span{margin:0 9px;color:#bbc5ce}.breadcrumbs b{font-weight:500;color:#40566d}.top-actions{display:flex;align-items:center;gap:12px}.search-box{height:38px;width:min(290px,28vw);border:1px solid #e6ebf1;background:#fff;border-radius:10px;display:flex;align-items:center;gap:9px;padding:0 10px;color:#91a0b0}.search-box>span{font-size:20px}.search-box input{min-width:0;border:0;outline:0;background:transparent;flex:1;font-size:11px;color:var(--ink)}.search-box kbd{font:9px 'DM Sans';border:1px solid #e8edf3;border-radius:4px;padding:3px 5px;color:#9aa8b6}.icon-button{height:36px;width:36px;border-radius:10px;background:var(--navy);border:0;color:white;font-size:22px;line-height:1}.small-avatar{height:34px;width:34px;border:0}.mobile-brand{display:none}.welcome-banner{height:255px;margin:31px 0 36px;background:linear-gradient(105deg,#e9f3fc 0%,#d7e9f7 53%,#b5d4ed 100%);border-radius:17px;position:relative;overflow:hidden;display:flex;align-items:center;box-shadow:var(--shadow)}.welcome-copy{position:relative;z-index:2;padding:32px 40px}.eyebrow{font-size:9px;letter-spacing:.16em;color:#4879a6;font-weight:700}.eyebrow>span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4e8dc0;vertical-align:1px;margin-right:7px}.welcome-copy h1{font:600 30px/1.15 Manrope,sans-serif;color:#173958;margin:15px 0 8px;letter-spacing:-.04em}.welcome-copy h1 em{font-style:normal;color:#467dab}.welcome-copy p{color:#637f99;font-size:12px;margin:0 0 19px}.primary-button{background:#174d7f;color:#fff;border:0;border-radius:9px;padding:10px 15px;font-size:11px;box-shadow:0 5px 12px #174d7f2a}.primary-button span{margin-left:12px}.welcome-art{position:absolute;inset:0 0 0 48%;overflow:hidden;background:linear-gradient(180deg,#c8e1f5 0%,#e7f2f9 50%,#8eb9d8 51%,#7099b4 100%)}.welcome-art:after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(180deg,#7aa2bd,#395e78);opacity:.85}.sun{position:absolute;width:95px;height:95px;border-radius:50%;background:#fff9e6;right:25%;top:26%;filter:blur(1px);opacity:.9}.mountain{position:absolute;bottom:35%;width:0;height:0;border-left:210px solid transparent;border-right:210px solid transparent}.mountain.back{right:8%;border-bottom:128px solid #789bb5}.mountain.front{right:32%;border-left-width:170px;border-right-width:170px;border-bottom:97px solid #9bb9ca}.art-caption{position:absolute;z-index:2;right:16%;bottom:10%;font:600 10px Manrope;letter-spacing:.25em;color:#eff7fb;text-align:center}.art-caption small{display:block;font:8px 'DM Sans';letter-spacing:.18em;margin-top:4px}.banner-mark{position:absolute;right:35%;top:13%;font:500 21px Manrope;color:#ffffffa8;letter-spacing:.08em}.page-heading{display:flex;align-items:end;justify-content:space-between;margin:0 0 20px}.muted{color:#8a9aaa}.page-heading h2{font:600 22px Manrope;margin:8px 0 5px;letter-spacing:-.035em;color:#18344f}.page-heading p{margin:0;color:#8694a3;font-size:11px}.outline-button{background:#fff;border:1px solid #dfe7ef;color:#345d80;border-radius:8px;padding:10px 13px;font-size:11px}.outline-button span{font-size:16px;vertical-align:-1px;margin-right:5px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}.stat-card{padding:17px 18px;background:#fff;border:1px solid #edf1f5;border-radius:12px;box-shadow:var(--shadow)}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#8393a3;font-size:10px}.stat-icon{height:31px;width:31px;border-radius:9px;background:#e8f3fc;color:#3a7bae;display:grid;place-items:center;font-size:17px}.stat-card:nth-child(2) .stat-icon{background:#f2eafb;color:#8a5db3}.stat-card:nth-child(3) .stat-icon{background:#e8f5ed;color:#40865f}.stat-card:nth-child(4) .stat-icon{background:#fff0e9;color:#c77d51}.stat-value{font:700 22px Manrope;color:#193955;margin-top:13px}.stat-note{font-size:9px;color:#9aa7b4;margin-top:3px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}.section-head h3{font:600 14px Manrope;margin:0;color:#263e56}.text-button{border:0;background:transparent;color:#3171a8;font-size:10px}.recent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.memory-card{background:#fff;border:1px solid #e9eef3;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s}.memory-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px #1b3b5a12}.memory-thumb{height:137px;position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#b4d1e7,#456a85);color:#fff}.memory-thumb img{width:100%;height:100%;object-fit:cover}.memory-thumb .placeholder-icon{font-size:38px;color:#ffffffc8}.memory-thumb:has(.landscape)::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,transparent 38%,#50738b 39% 56%,#98b4c4 57% 68%,#456984 69%)}.memory-thumb:has(.landscape) .placeholder-icon{z-index:1}.memory-thumb .play{position:absolute;right:8px;bottom:8px;background:#102c4dcc;color:white;padding:4px 7px;border-radius:5px;font-size:9px}.memory-info{padding:11px 12px}.memory-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memory-info small{display:block;font-size:9px;color:#97a4b1;margin-top:5px}.empty-state{background:#fff;border:1px dashed #d9e3ec;border-radius:14px;text-align:center;padding:45px 20px;color:#8092a4}.empty-state .empty-icon{font-size:27px;color:#6f9ec4}.empty-state h3{font:600 15px Manrope;color:#28435e;margin:12px 0 6px}.empty-state p{font-size:11px;margin:0 0 16px}.section-tabs{display:flex;gap:5px;background:#edf2f7;padding:4px;border-radius:9px;width:max-content;margin:0 0 18px}.section-tabs button{border:0;background:transparent;color:#77899a;font-size:10px;padding:7px 13px;border-radius:7px}.section-tabs button.active{background:#fff;color:#245d90;box-shadow:0 1px 4px #19395514}.list-view{display:grid;gap:10px}.list-row{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #ebeff4;border-radius:11px;padding:12px}.list-thumb{width:65px;height:56px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:#e8f2fa;color:#3678a9;flex:none}.list-thumb img{width:100%;height:100%;object-fit:cover}.list-row strong{font-size:11px}.list-row small{display:block;color:#93a1af;font-size:9px;margin-top:5px}.list-arrow{margin-left:auto;color:#9dadbc}.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.album-card{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer}.album-cover{height:145px;display:grid;place-items:center;color:#fff;font-size:36px;background:linear-gradient(145deg,#b8d6e9,#4b7691)}.album-card:nth-child(3n+2) .album-cover{background:linear-gradient(145deg,#e8d2c1,#a76b50)}.album-card:nth-child(3n) .album-cover{background:linear-gradient(145deg,#c7dfd4,#548773)}.album-meta{padding:12px}.album-meta strong{font-size:11px}.album-meta small{display:block;color:#92a0ae;font-size:9px;margin-top:5px}.profile-card{background:linear-gradient(115deg,#13385b,#286795);color:white;border-radius:14px;padding:25px;display:flex;align-items:center;gap:15px;margin-bottom:16px}.profile-card .avatar{height:56px;width:56px;background:#d5e9f8;color:#18466d;font-size:15px}.profile-card h3{margin:0;font:600 16px Manrope}.profile-card p{font-size:10px;color:#c0d5e6;margin:5px 0 0}.settings-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.setting-row{padding:15px 17px;border-bottom:1px solid #edf1f5;display:flex;justify-content:space-between;font-size:11px}.setting-row:last-child{border:0}.setting-row span:last-child{color:#8da0b1}.footer-quote{display:flex;align-items:center;gap:11px;margin:42px 0 24px;color:#8295a7;font:italic 11px Manrope}.quote-mark{font:30px Georgia;color:#a8c3d8}.footer-line{height:1px;background:#e1e8ef;flex:1}.footer-mark{font:600 10px Manrope;letter-spacing:.15em;color:#4f718d}.mobile-nav{display:none}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);padding:11px 16px;border-radius:9px;background:#173955;color:white;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1100px){.main-area{padding:0 32px}.sidebar{width:225px}.main-area{margin-left:225px}.recent-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{gap:9px}.stat-card{padding:14px}.memory-thumb{height:120px}}
@media(max-width:760px){body{padding-bottom:72px}.sidebar{display:none}.main-area{margin:0;padding:0 18px}.topbar{height:62px}.mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--navy);font:700 16px Manrope;letter-spacing:.14em;padding:0}.mobile-brand img{width:30px;height:30px}.breadcrumbs{display:none}.top-actions{gap:8px}.search-box{width:auto;border:0;background:transparent;padding:0 4px}.search-box input{width:112px}.search-box kbd,.icon-button{display:none}.small-avatar{display:grid}.welcome-banner{height:280px;margin:18px 0 25px;align-items:flex-start}.welcome-art{inset:45% 0 0 0}.welcome-copy{padding:25px 22px}.welcome-copy h1{font-size:26px;margin-top:12px}.welcome-copy p{max-width:250px;font-size:11px}.welcome-copy .primary-button{font-size:10px;padding:9px 12px}.banner-mark{right:11%;top:51%;z-index:1}.page-heading{align-items:center;margin-bottom:15px}.page-heading h2{font-size:18px}.page-heading p{font-size:10px;max-width:240px}.page-heading .eyebrow{font-size:8px}.outline-button{font-size:0;padding:8px 10px}.outline-button span{font-size:18px;margin:0}.stats-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:24px}.stat-card{padding:13px}.stat-value{font-size:20px;margin-top:9px}.recent-grid{grid-template-columns:repeat(2,1fr);gap:10px}.memory-thumb{height:120px}.memory-info{padding:9px}.memory-info strong{font-size:10px}.memory-info small{font-size:8px}.album-grid{grid-template-columns:repeat(2,1fr);gap:10px}.album-cover{height:120px}.album-meta{padding:10px}.section-head h3{font-size:13px}.footer-quote{margin:30px 0 18px;font-size:9px;gap:7px}.mobile-nav{position:fixed;inset:auto 0 0;z-index:10;height:66px;padding:5px 8px max(5px,env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(14px);border-top:1px solid #e7edf3;display:flex;justify-content:space-around}.mobile-nav button{border:0;background:transparent;color:#8393a3;font-size:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:53px}.mobile-nav button span{font-size:19px;line-height:1}.mobile-nav button.active{color:#236395;font-weight:600}.list-row{padding:9px;gap:10px}.list-thumb{width:52px;height:48px}.profile-card{padding:18px}.page-heading #add-main{white-space:nowrap}}
@media(min-width:1400px){.main-area{padding-inline:72px}.welcome-banner{height:285px}.welcome-copy{padding-left:50px}.memory-thumb{height:158px}}

/* FIGMAR — Tema oscuro elegante */
:root {
  color-scheme: dark;
  --navy: #101c2b;
  --blue: #2865a1;
  --sky: #6f9ec4;
  --ink: #eaf1f8;
  --muted: #9aabbe;
  --line: #2a3c51;
  --paper: #17283c;
  --bg: #101c2b;
  --shadow: 0 10px 35px #00000030;
}

body {
  color: var(--ink);
  background: var(--bg);
}

.sidebar,
.topbar,
.search-box,
.stat-card,
.memory-card,
.list-row,
.album-card,
.settings-list,
.empty-state {
  background-color: #17283c;
  color: #eaf1f8;
  border-color: #2a3c51;
}

.sidebar {
  background-color: #131f30;
}

.brand,
.brand strong,
.page-heading h2,
.section-head h3,
.memory-info strong,
.album-meta strong,
.list-row strong,
.stat-value,
.empty-state h3 {
  color: #eaf1f8;
}

.brand small,
.breadcrumbs,
.breadcrumbs b,
.family-card small,
.search-box,
.search-box input,
.page-heading p,
.stat-top,
.stat-note,
.memory-info small,
.album-meta small,
.list-row small,
.muted,
.footer-quote {
  color: #9aabbe;
}

.family-card,
.nav-item:hover,
.section-tabs {
  background-color: #1d3046;
  border-color: #2a3c51;
}

.nav-item {
  color: #b2c2d3;
}

.nav-item.active,
.section-tabs button.active {
  background-color: #284765;
  color: #ffffff;
}

.nav-count,
.list-arrow {
  color: #a4b7ca;
}

.topbar,
.footer-line {
  border-color: #2a3c51;
}

.search-box,
.search-box input,
.icon-button,
.small-avatar,
.outline-button,
#login-form input {
  color: #eaf1f8;
}

.search-box,
.outline-button,
#login-form input {
  background-color: #17283c;
  border-color: #354a61;
}

.search-box kbd {
  background-color: #22364c;
  border-color: #40536a;
  color: #c0cede;
}

.welcome-banner {
  background: linear-gradient(105deg, #1a3047 0%, #203e5b 53%, #315b7b 100%);
}

.welcome-copy h1 {
  color: #f0f5fb;
}

.welcome-copy h1 em,
.eyebrow,
.text-button {
  color: #91c2ed;
}

.welcome-copy p {
  color: #c0d0df;
}

.welcome-art {
  background: linear-gradient(180deg, #243f59 0%, #304f69 50%, #24445d 51%, #172e43 100%);
}

.welcome-art:after {
  background: linear-gradient(180deg, #315c78, #172e43);
}

.mountain.back {
  border-bottom-color: #496b86;
}

.mountain.front {
  border-bottom-color: #66869e;
}

.art-caption {
  color: #f0f5fb;
}

.banner-mark {
  color: #ffffff80;
}

.stat-icon {
  background: #203b55;
  color: #a8d2f4;
}

.stat-card:nth-child(2) .stat-icon {
  background: #382d4d;
  color: #d2b4f0;
}

.stat-card:nth-child(3) .stat-icon {
  background: #203f3b;
  color: #9bdec0;
}

.stat-card:nth-child(4) .stat-icon {
  background: #49352f;
  color: #efb99b;
}

.memory-thumb,
.album-cover {
  background: linear-gradient(145deg, #385b78, #1c344a);
}

.album-card:nth-child(3n+2) .album-cover {
  background: linear-gradient(145deg, #775548, #392e32);
}

.album-card:nth-child(3n) .album-cover {
  background: linear-gradient(145deg, #426e62, #233f3a);
}

.profile-card {
  background: linear-gradient(115deg, #101c2b, #214d73);
}

.login-screen {
  background: radial-gradient(ellipse at top, #203b55 0%, #101c2b 70%);
}

.login-card {
  background: #17283c;
  border-color: #2a3c51;
  box-shadow: 0 20px 60px #00000040;
}

.login-card h1 {
  color: #eaf1f8;
}

.login-card > p,
#login-form label {
  color: #aebed0;
}

#login-form input::placeholder {
  color: #8195aa;
}

#login-form input:focus {
  border-color: #6fabe0;
  box-shadow: 0 0 0 3px #2865a133;
}

.mobile-nav {
  background: #131f30ed;
  border-color: #2a3c51;
}

.mobile-nav button {
  color: #9aabbe;
}

.mobile-nav button.active {
  color: #91c2ed;
}

.toast {
  background: #294765;
  color: #ffffff;
}


/* FIGMAR — Ajuste compacto y oscuro del inicio de sesión */
body:has(#login-screen:not([hidden])) {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #101c2b !important;
  color: #eaf1f8 !important;
}

#login-screen.login-screen:not([hidden]) {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #101c2b !important;
}

#login-screen .login-card {
  box-sizing: border-box;
  width: min(100%, 380px);
  padding: 28px;
  background: #17283c !important;
  color: #eaf1f8 !important;
  border: 1px solid #2a3c51;
  border-radius: 18px;
  box-shadow: 0 18px 45px #00000040;
}

#login-screen .login-logo {
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
}

#login-screen .login-card h1 {
  margin: 0 0 10px;
  color: #eaf1f8 !important;
  font-size: 25px;
  line-height: 1.25;
  text-align: center;
}

#login-screen .login-card > p {
  margin: 0 0 22px;
  color: #9aabbe !important;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

#login-screen #login-form {
  gap: 10px;
}

#login-screen #login-form label {
  margin-top: 4px;
  color: #d5e1ee !important;
  font-size: 13px;
}

#login-screen #login-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #eaf1f8 !important;
  background: #101c2b !important;
  border: 1px solid #354b63;
  border-radius: 9px;
}

#login-screen #login-form input:focus {
  border-color: #6f9ec4;
  outline: 2px solid #6f9ec433;
}

#login-screen #login-form button {
  min-height: 44px;
  margin-top: 10px;
  color: #fff !important;
  background: #2865a1 !important;
  border: 1px solid #397bb8;
  border-radius: 9px;
  font-weight: 600;
  cursor: pointer;
}

#login-screen #login-form button:hover {
  background: #3479b8 !important;
}

#login-screen #login-form button:disabled {
  opacity: .65;
  cursor: wait;
}

#login-screen #login-message {
  margin: 4px 0 0;
  color: #ffb4b4 !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  #login-screen.login-screen:not([hidden]) {
    padding: 16px;
  }

  #login-screen .login-card {
    padding: 24px 20px;
  }
}

/* Corrección final: tarjeta de acceso compacta */
#login-screen.login-screen:not([hidden]) {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: #101c2b !important;
}

#login-screen .login-card {
  flex: 0 1 340px !important;
  width: 340px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: auto !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: #17283c !important;
  color: #eaf1f8 !important;
  border: 1px solid #2a3c51 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px #00000040 !important;
}

#login-screen .login-card h1 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: #eaf1f8 !important;
}

#login-screen .login-card > p {
  font-size: 14px !important;
  color: #9aabbe !important;
}

#login-screen #login-form input {
  width: 100% !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  background: #101c2b !important;
  color: #eaf1f8 !important;
  border-color: #354b63 !important;
}

#login-screen #login-form button {
  min-height: 42px !important;
  background: #2865a1 !important;
  color: #fff !important;
}

/* FIGMAR: tarjetas de acceso de Inicio */
.home-shortcuts .shortcut-card {
  width: 100%;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

.home-shortcuts .shortcut-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px #1b3b5a12;
}

.home-shortcuts .shortcut-card:focus-visible {
  outline: 2px solid #2865a1;
  outline-offset: 3px;
}

.home-shortcuts .shortcut-card.photos {
  background: #f1f7fd;
  border-color: #dceaf8;
}

.home-shortcuts .shortcut-card.videos {
  background: #f7f2fc;
  border-color: #e9ddf6;
}

.home-shortcuts .shortcut-card.documents {
  background: #f1f8f3;
  border-color: #dceee2;
}

.home-shortcuts .shortcut-card.albums {
  background: #fff5f0;
  border-color: #f6e3d8;
}

.home-shortcuts .shortcut-card.photos .stat-icon {
  background: #dcecfb;
  color: #3979ad;
}

.home-shortcuts .shortcut-card.videos .stat-icon {
  background: #eadcf7;
  color: #8a5db3;
}

.home-shortcuts .shortcut-card.documents .stat-icon {
  background: #dcefe3;
  color: #40865f;
}

.home-shortcuts .shortcut-card.albums .stat-icon {
  background: #ffe6d9;
  color: #c77d51;
}

.home-shortcuts .shortcut-card .stat-value {
  font-size: 24px;
}

/* FIGMAR: galería de fotografías */
#content .recent-grid:has(.memory-card) {
  align-items: start;
  gap: 16px;
}

#content .memory-card {
  min-width: 0;
  border-radius: 14px;
  border-color: #e4ebf2;
  background: #fff;
}

#content .memory-thumb {
  height: 180px;
  background: linear-gradient(145deg, #dce9f4, #8ca9c0);
}

#content .memory-thumb img {
  display: block;
  object-fit: cover;
  transition: transform .25s ease;
}

#content .memory-card:hover .memory-thumb img {
  transform: scale(1.035);
}

#content .memory-info {
  padding: 12px 14px;
}

#content .memory-info strong {
  font-size: 12px;
  color: #193955;
}

#content .memory-info small {
  font-size: 10px;
  color: #8192a3;
}

@media (max-width: 760px) {
  #content .recent-grid:has(.memory-card) {
    gap: 10px;
  }

  #content .memory-thumb {
    height: 145px;
  }

  #content .memory-info {
    padding: 10px;
  }
}

/* FIGMAR: visor de fotografías */
.photo-viewer[hidden] {
  display: none !important;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 17, 29, .92);
}

.photo-viewer-panel {
  width: min(100%, 1100px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #35485e;
  border-radius: 14px;
  background: #142236;
  box-shadow: 0 24px 80px #0008;
}

.photo-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  color: #edf4fb;
}

.photo-viewer-toolbar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-viewer-close {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #52657b;
  border-radius: 10px;
  background: #24374d;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.photo-viewer-close:hover {
  background: #354b63;
}

#photo-viewer-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(92vh - 68px);
  object-fit: contain;
  background: #0b1420;
}

@media (max-width: 600px) {
  .photo-viewer {
    padding: 10px;
  }

  .photo-viewer-panel {
    max-height: 96vh;
  }

  #photo-viewer-image {
    max-height: calc(96vh - 68px);
  }
}

/* Acciones del visor de fotografías */
.photo-viewer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.photo-viewer-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #52657b;
  border-radius: 10px;
  background: #24374d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.photo-viewer-download:hover {
  background: #354b63;
}

.photo-viewer-download:focus-visible,
.photo-viewer-close:focus-visible {
  outline: 2px solid #8cc8ff;
  outline-offset: 3px;
}

/* FIGMAR — Botones con acabado oscuro elegante */
.primary-button {
  background: linear-gradient(135deg, #1c4568, #173653);
  color: #ffffff;
  border: 1px solid #365a7a;
  border-radius: 10px;
  padding: 11px 17px;
  font-weight: 600;
  box-shadow: 0 4px 14px #00000030;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.primary-button:hover {
  background: linear-gradient(135deg, #244968, #1c4568);
  box-shadow: 0 6px 18px #00000040;
  transform: translateY(-1px);
}

.outline-button {
  background: #1b3046;
  color: #c8e4fa;
  border: 1px solid #3b5874;
  border-radius: 10px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.outline-button:hover {
  background: #263f59;
  border-color: #6fabe0;
  transform: translateY(-1px);
}

.icon-button {
  background: #1c4568;
  color: #ffffff;
  border: 1px solid #365a7a;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.icon-button:hover {
  background: #244968;
  transform: translateY(-1px);
}

.primary-button:focus-visible,
.outline-button:focus-visible,
.icon-button:focus-visible {
  outline: 2px solid #8cc8ff;
  outline-offset: 3px;
}

.primary-button:active,
.outline-button:active,
.icon-button:active {
  transform: translateY(0);
}

/* FIGMAR — Corrección definitiva del azul de los botones */
.primary-button,
.icon-button {
  background: #102b45 !important;
  background-image: none !important;
  border: 1px solid #294967 !important;
  color: #ffffff !important;
}

.primary-button:hover,
.icon-button:hover {
  background: #183a59 !important;
  background-image: none !important;
}

#login-screen #login-form button {
  background: #102b45 !important;
  border-color: #294967 !important;
}

#login-screen #login-form button:hover {
  background: #183a59 !important;
}

/* FIGMAR — Mejora de contraste y legibilidad de tarjetas */
#content .stat-card,
#content .memory-card,
#content .list-row,
#content .album-card,
#content .settings-list,
#content .empty-state,
.home-shortcuts .shortcut-card {
  background: #17283c !important;
  color: #edf4fb !important;
  border-color: #354b63 !important;
}

#content .stat-top,
#content .stat-note,
#content .memory-info small,
#content .album-meta small,
#content .list-row small,
#content .empty-state p {
  color: #bdcddd !important;
}

#content .stat-value,
#content .memory-info strong,
#content .album-meta strong,
#content .list-row strong,
#content .empty-state h3,
.home-shortcuts .shortcut-card .stat-value {
  color: #f4f8fc !important;
}

#content .section-head h3 {
  color: #eaf2fa !important;
}

.home-shortcuts .shortcut-card.photos,
.home-shortcuts .shortcut-card.videos,
.home-shortcuts .shortcut-card.documents,
.home-shortcuts .shortcut-card.albums {
  background: #1b3046 !important;
  border-color: #354b63 !important;
}


/* FIGMAR — Reorganización del encabezado móvil */
@media (max-width: 760px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    gap: 10px;
    height: auto;
    min-height: 105px;
    padding: 10px 0 12px;
  }

  .mobile-brand {
    grid-column: 1;
    grid-row: 1;
    font-weight: 600;
    letter-spacing: .12em;
  }

  .top-actions {
    display: contents;
  }

  #figmar-logout {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    white-space: nowrap;
    align-self: center;
  }

  .small-avatar {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .search-box {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    background: #17283c;
    border: 1px solid #354b63;
    border-radius: 10px;
  }

  .search-box input {
    width: auto;
    flex: 1;
    color: #edf4fb;
  }

  .search-box input::placeholder {
    color: #bdcddd;
  }
}

/* FIGMAR — Logotipo móvil más legible */
@media (max-width: 760px) {
  .mobile-brand {
    color: #eaf1f8 !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-shadow: 0 1px 2px #0008;
  }

  .mobile-brand img {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 1px 2px #0006);
  }
}

/* FIGMAR — Legibilidad de tarjetas en móvil */
@media (max-width: 760px) {
  #content .stat-top {
    color: #e2edf8 !important;
    font-size: 12px !important;
  }

  #content .stat-value {
    color: #ffffff !important;
    font-size: 23px !important;
  }

  #content .stat-note {
    color: #d0deed !important;
    font-size: 10px !important;
  }

  #content .memory-info strong {
    color: #ffffff !important;
    font-size: 12px !important;
  }

  #content .memory-info small {
    color: #d0deed !important;
    font-size: 10px !important;
  }
}

/* ====================== FIGMAR v0.2 — añadidos ====================== */
/* El atributo hidden debe ganar siempre. Antes los estilos de .mobile-nav y
   .welcome-banner lo anulaban: la barra móvil se veía en el login y el banner
   de bienvenida aparecía en TODAS las páginas, aunque app.js lo ocultaba. */
[hidden] {
  display: none !important;
}

/* Botón «Cerrar sesión» (antes tenía estilos en línea dentro de login.js). */
#figmar-logout {
  padding: 9px 12px;
  border: 1px solid #354b63;
  border-radius: 9px;
  background: #17283c;
  color: #eaf1f8;
  cursor: pointer;
  font-size: 13px;
}

#figmar-logout:hover {
  background: #1f3650;
}

/* Visor: vídeo y botón eliminar. */
#photo-viewer-image[hidden],
#photo-viewer-video[hidden] {
  display: none !important;
}

#photo-viewer-video {
  display: block;
  width: 100%;
  max-height: calc(92vh - 68px);
  background: #000;
}

.photo-viewer-delete {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #7a3b44;
  border-radius: 10px;
  background: #3a1f27;
  color: #ffd9de;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.photo-viewer-delete:hover {
  background: #54262f;
}

/* Papelera en las filas de documentos. */
.row-delete {
  margin-left: auto;
  flex: none;
  height: 34px;
  width: 34px;
  border: 1px solid #354b63;
  border-radius: 8px;
  background: transparent;
  color: #bdcddd;
  font-size: 15px;
  cursor: pointer;
}

.row-delete:hover {
  background: #54262f;
  border-color: #7a3b44;
}

.row-delete + .list-arrow {
  margin-left: 0;
}

/* Las miniaturas cargan de forma diferida: reservar el hueco evita saltos. */
.memory-thumb img {
  background: #22364b;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Con el banner oculto (todas las páginas salvo Inicio) el título necesita aire arriba.
   En Inicio los márgenes se fusionan con los del banner y no cambia nada. */
.page-heading {
  margin-top: 30px;
}

/* Cambio de contraseña en la pantalla de login. */
#login-screen #password-form,
#login-screen #invite-form {
  display: grid;
  gap: 10px;
}
#login-screen #password-form label,
#login-screen #invite-form label {
  margin-top: 4px;
  color: #d5e1ee !important;
  font-size: 13px;
}
#login-screen #password-form input,
#login-screen #invite-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #eaf1f8 !important;
  background: #101c2b !important;
  border: 1px solid #354b63;
  border-radius: 9px;
}
#login-screen #password-form input:focus,
#login-screen #invite-form input:focus {
  border-color: #6f9ec4;
  outline: 2px solid #6f9ec433;
}
#login-screen #password-form button,
#login-screen #invite-form button {
  min-height: 44px;
  margin-top: 10px;
  color: #fff !important;
  background: #2865a1 !important;
  border: 1px solid #397bb8;
  border-radius: 9px;
  font-weight: 600;
  cursor: pointer;
}
#login-screen #password-form button:disabled,
#login-screen #invite-form button:disabled {
  opacity: .65;
  cursor: wait;
}
#login-screen #pw-message,
#login-screen #inv-message {
  margin: 4px 0 0;
  color: #ffb4b4 !important;
  font-size: 13px;
  overflow-wrap: anywhere;
}
#login-screen #pw-message.ok,
#login-screen #inv-message.ok {
  color: #9be3b5 !important;
}
#login-screen .link-button {
  display: block;
  margin: 14px auto 0;
  padding: 6px 8px;
  color: #8fb8dc;
  background: none;
  border: 0;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
#login-screen .link-button:hover {
  color: #c4ddf2;
}

#login-screen .invite-intro {
  margin: 0 0 4px;
  color: #d5e1ee !important;
  font-size: 14px;
  text-align: center;
}

/* Administración: invitar a un familiar (solo se muestra al administrador). */
.invite-panel {
  margin-top: 24px;
  padding: 20px;
  background: #15263a;
  border: 1px solid #2a4058;
  border-radius: 14px;
}
.invite-panel h3 { margin: 0 0 6px; font-size: 18px; }
.invite-panel h4 { margin: 22px 0 10px; font-size: 14px; color: #bdcddd; }
.invite-panel .muted { margin: 0 0 14px; font-size: 13px; }
.invite-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.invite-form-row input,
.invite-form-row select,
.invite-result input {
  min-height: 42px;
  padding: 8px 12px;
  color: #eaf1f8;
  background: #101c2b;
  border: 1px solid #354b63;
  border-radius: 9px;
  font: inherit;
}
.invite-form-row input { flex: 1 1 180px; min-width: 0; }
.invite-result {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 14px;
  background: #0f2a22;
  border: 1px solid #2e6b54;
  border-radius: 12px;
}
.invite-result small { color: #9fd3bd; }
.invite-result input { width: 100%; box-sizing: border-box; font-size: 13px; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-secondary {
  min-height: 38px;
  padding: 0 14px;
  color: #eaf1f8;
  background: transparent;
  border: 1px solid #354b63;
  border-radius: 9px;
  cursor: pointer;
}
.invite-secondary:hover { background: #1f3650; }
.invite-list { display: grid; gap: 8px; }
.invite-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #101c2b;
  border: 1px solid #243a50;
  border-radius: 10px;
}
.invite-row > div { flex: 1; min-width: 0; }
.invite-row strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.invite-row small { color: #8fa6bd; font-size: 12px; }
.invite-state {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: #243a50;
  color: #cfe0f0;
  white-space: nowrap;
}
.invite-state.pendiente { background: #1d4d7a; color: #d7ecff; }
.invite-state.usada { background: #1f5a43; color: #d3f5e4; }
.invite-state.anulada, .invite-state.caducada { background: #3a3f47; color: #b7c0cb; }