*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--outer-bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}

/*
  Mantiene exactamente el mismo ancho útil aunque una pantalla tenga
  scroll vertical y otra no. Así Inicio, Mapa, Reportar, Mensajes y Perfil
  no cambian visualmente de ancho al navegar entre ellas.
*/
html{scrollbar-gutter:stable}

@supports not (scrollbar-gutter:stable){
  html{overflow-y:scroll}
}

button,input,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%}
body{display:flex;justify-content:center}
#app{width:100%;max-width:var(--max);background:var(--bg);min-height:100vh}
.app-shell{min-height:100vh;position:relative;background:var(--bg)}
.page{padding:8px 14px calc(var(--nav-h) + 14px)}
.muted{color:var(--muted)}

/* Layout de escritorio: sin bottom-nav, #app puede alojar el sidebar */
@media(min-width:1024px){
  html.is-desktop #app{max-width:none}
  html.is-desktop .page{padding-bottom:14px}
}


/* ==========================================================
   MODO NOCHE GLOBAL
   Cambia el entorno; NO altera fotos, badges ni halos.
   ========================================================== */

html,
body,
#app,
.app-shell,
.app-header,
.bottom-nav,
.compact-card,
.feed-empty,
.feed-loading,
.feed-report-sheet,
.form-field,
.report-choice,
.review-card,
.success-card,
.message-tabs,
.conversation-list,
.conversation,
.mini-chat,
.profile-head,
.profile-empty-wall,
.profile-menu,
.edit-profile-sheet,
.notifications-panel,
.report-filter-popover,
.auth-gate-card,
.auth-form-card,
.coverage-card {
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

html[data-theme="dark"],
html[data-theme="dark"] body{
  background:var(--outer-bg);
  color:var(--text);
}

html[data-theme="dark"] #app,
html[data-theme="dark"] .app-shell{
  background:var(--bg);
}

/* Encabezado + navegación */
html[data-theme="dark"] .app-header{
  background:rgba(17,24,23,.94);
  border-color:var(--border);
}

html[data-theme="dark"] .app-title{
  color:#dff5f1;
}

html[data-theme="dark"] .bottom-nav{
  background:rgba(24,34,32,.98);
  border-color:var(--border);
}

html[data-theme="dark"] .icon-button{
  background:var(--surface);
  border-color:var(--border);
  color:var(--theme-accent);
}

html[data-theme="dark"] .nav-item{
  color:var(--muted);
}

html[data-theme="dark"] .nav-item.active{
  color:var(--theme-accent);
}

/* Inicio / feed */
html[data-theme="dark"] .compact-card,
html[data-theme="dark"] .feed-empty,
html[data-theme="dark"] .feed-loading{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:var(--shadow);
}

html[data-theme="dark"] .compact-card h3,
html[data-theme="dark"] .feed-empty strong{
  color:var(--text);
}

html[data-theme="dark"] .compact-card p{
  color:#c7d2d0;
}

html[data-theme="dark"] .feed-card-more,
html[data-theme="dark"] .feed-image-hint{
  color:var(--theme-accent);
}

/* Ficha del reporte */
html[data-theme="dark"] .feed-report-sheet{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 -20px 48px rgba(0,0,0,.38);
}

html[data-theme="dark"] .feed-report-close{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--theme-accent);
}

html[data-theme="dark"] .feed-report-summary{
  color:#cbd6d4;
}

html[data-theme="dark"] .feed-location-card{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--theme-accent);
}

html[data-theme="dark"] .feed-location-card.protected{
  background:#18322f;
}

html[data-theme="dark"] .feed-location-card strong,
html[data-theme="dark"] .feed-report-data h3,
html[data-theme="dark"] .feed-report-row strong{
  color:var(--text);
}

html[data-theme="dark"] .feed-report-row{
  border-color:var(--border);
}

html[data-theme="dark"] .feed-report-row span,
html[data-theme="dark"] .feed-report-author small,
html[data-theme="dark"] .feed-location-card small{
  color:var(--muted);
}

/* Reportar / formularios */
html[data-theme="dark"] .report-choice,
html[data-theme="dark"] .form-field,
html[data-theme="dark"] .choice-pill,
html[data-theme="dark"] .unknown-check,
html[data-theme="dark"] .secondary-action,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .secondary-wide,
html[data-theme="dark"] .success-card,
html[data-theme="dark"] .wizard-back,
html[data-theme="dark"] .wizard-close{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .text-input,
html[data-theme="dark"] .text-area,
html[data-theme="dark"] .auth-field input,
html[data-theme="dark"] .username-input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .text-input::placeholder,
html[data-theme="dark"] .text-area::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#748682;
}

html[data-theme="dark"] .choice-pill.selected{
  background:var(--primary-soft);
  border-color:var(--theme-accent);
  color:#87d8cf;
}

html[data-theme="dark"] .upload-box{
  background:var(--surface-2);
  border-color:#40534f;
  color:var(--theme-accent);
}

html[data-theme="dark"] .upload-box > span:nth-of-type(2),
html[data-theme="dark"] .field-label-row,
html[data-theme="dark"] .review-row strong,
html[data-theme="dark"] .wizard-copy h2,
html[data-theme="dark"] .review-header h2,
html[data-theme="dark"] .success-card h2{
  color:var(--text);
}

html[data-theme="dark"] .public-area-preview{
  background:rgba(255,111,89,.08);
  border-color:rgba(255,111,89,.25);
}

html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .review-privacy-card,
html[data-theme="dark"] .success-privacy{
  background:#19322f;
  color:#9ce0d8;
}

html[data-theme="dark"] .report-primary-button{
  background:var(--primary);
  color:#fff;
}

/* Mensajes */
html[data-theme="dark"] .message-tabs,
html[data-theme="dark"] .conversation-list,
html[data-theme="dark"] .conversation,
html[data-theme="dark"] .mini-chat{
  background:var(--surface);
  border-color:var(--border);
}

html[data-theme="dark"] .conversation.selected{
  background:#17302d;
}

html[data-theme="dark"] .bubble.mine{
  background:#214039;
  color:#e9f3f1;
}

html[data-theme="dark"] .bubble.theirs{
  background:var(--surface-3);
  color:var(--text);
}

html[data-theme="dark"] .chat-box{
  background:var(--surface-2);
  border-color:var(--border);
}

/* Perfil */
html[data-theme="dark"] .profile-head,
html[data-theme="dark"] .profile-empty-wall,
html[data-theme="dark"] .profile-menu,
html[data-theme="dark"] .edit-profile-sheet{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .edit-profile{
  background:var(--surface);
  border-color:var(--theme-accent);
  color:var(--theme-accent);
}

html[data-theme="dark"] .profile-tabs{
  border-color:var(--border);
}

html[data-theme="dark"] .profile-tabs .active{
  color:var(--theme-accent);
  border-color:var(--theme-accent);
}

html[data-theme="dark"] .wall-item{
  background:var(--surface-3);
}

html[data-theme="dark"] .wall-placeholder{
  background:#19322f;
  color:var(--theme-accent);
}

html[data-theme="dark"] .profile-menu-item:not(.logout):hover,
html[data-theme="dark"] .profile-menu-item:not(.logout):focus-visible{
  background:var(--surface-3);
}

html[data-theme="dark"] .profile-menu-item.logout:hover,
html[data-theme="dark"] .profile-menu-item.logout:focus-visible{
  background:rgba(255,111,89,.09);
}

html[data-theme="dark"] .edit-profile-header{
  border-color:var(--border);
}

/* Filtro */
html[data-theme="dark"] .report-filter-popover{
  background:rgba(24,34,32,.99);
  border-color:var(--border);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
}

html[data-theme="dark"] .report-filter-chip{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .report-filter-chip.selected{
  background:#19322f;
  border-color:var(--theme-accent);
  color:#a7e4dd;
}

html[data-theme="dark"] .report-filter-x{
  color:var(--muted);
}

/* Notificaciones */
html[data-theme="dark"] .notifications-panel{
  background:rgba(24,34,32,.995);
  border-color:var(--border);
  color:var(--text);
  box-shadow:0 18px 46px rgba(0,0,0,.42);
}

html[data-theme="dark"] .notifications-panel-header{
  border-color:var(--border);
}

html[data-theme="dark"] .notifications-close{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--theme-accent);
}

html[data-theme="dark"] .notification-item{
  color:var(--text);
  border-color:var(--border);
}

html[data-theme="dark"] .notification-item.unread{
  background:#17302d;
}

html[data-theme="dark"] .notification-text{
  color:#b9c7c4;
}

/* Los iconos conservan el color funcional; solo cambia su fondo suave.
   found y sheltered ya no necesitan override aquí: sus variables
   (--found-soft / --sheltered-soft) cambian solas en variables.css */
html[data-theme="dark"] .notification-icon.lost{background:rgba(255,111,89,.12)}
html[data-theme="dark"] .notification-icon.abandoned{background:rgba(230,168,46,.13)}
html[data-theme="dark"] .notification-icon.adoption{background:rgba(138,103,199,.14)}
html[data-theme="dark"] .notification-icon.sighting{background:rgba(59,137,206,.14)}

/* Auth */
html[data-theme="dark"] .auth-gate-card,
html[data-theme="dark"] .auth-form-card,
html[data-theme="dark"] .coverage-card,
html[data-theme="dark"] .coverage-current{
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .auth-secondary,
html[data-theme="dark"] .auth-location-button{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--theme-accent);
}

/* MAPA: solo la cartografía se oscurece.
   Pines, halos, badges e imágenes NO reciben este filtro. */
html[data-theme="dark"] .leaflet-tile-pane{
  filter:brightness(.58) saturate(.68) contrast(1.08);
}

html[data-theme="dark"] .real-map-shell{
  background:#132022;
  border-color:var(--border);
}

html[data-theme="dark"] .coverage-chip,
html[data-theme="dark"] .map-legend,
html[data-theme="dark"] .locate-button,
html[data-theme="dark"] .map-report-card,
html[data-theme="dark"] .map-card-close,
html[data-theme="dark"] .map-modal-sheet,
html[data-theme="dark"] .map-modal-close{
  background:rgba(24,34,32,.97);
  border-color:var(--border);
  color:var(--text);
}

html[data-theme="dark"] .coverage-chip{
  color:var(--theme-accent);
}

html[data-theme="dark"] .coverage-chip span,
html[data-theme="dark"] .map-card-title,
html[data-theme="dark"] .map-modal-body h2{
  color:var(--text);
}

html[data-theme="dark"] .map-card-content p,
html[data-theme="dark"] .map-card-location,
html[data-theme="dark"] .map-modal-location,
html[data-theme="dark"] .map-modal-summary{
  color:#b6c5c2;
}

html[data-theme="dark"] .leaflet-control-attribution{
  background:rgba(24,34,32,.90) !important;
  color:#a6b6b2 !important;
}

html[data-theme="dark"] .leaflet-control-attribution a{
  color:#83cfc6 !important;
}

/* Importante: los pines siguen blancos y los halos conservan sus colores */
html[data-theme="dark"] .ssv-map-pin-face,
html[data-theme="dark"] .ssv-map-pin-tip{
  background:#fff;
}

/* Scrollbar nocturno */
html[data-theme="dark"]{
  scrollbar-color:#41534f #151e1c;
}

@media (prefers-reduced-motion: reduce){
  html,
  body,
  #app,
  .app-shell,
  .app-header,
  .bottom-nav{
    transition:none !important;
  }
}


/* ==========================================================
   V35 — botón Reportar en modo noche
   El coral queda reservado a reportes/alertas.
   ========================================================== */
html[data-theme="dark"] .nav-add{
  background:#2e8f86;
  color:#ffffff;
  border:2px solid rgba(255,255,255,.78);
  box-shadow:
    0 8px 20px rgba(46,143,134,.24),
    0 0 0 5px rgba(46,143,134,.08);
}

html[data-theme="dark"] .nav-item.active .nav-add{
  background:#329d92;
}