/* HelpPets responsive safety layer — loaded after each page stylesheet. */
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
iframe{max-width:100%;border:0}
pre,code,.message,.description,.notification-message{overflow-wrap:anywhere;word-break:break-word}
button,a,input,select,textarea{touch-action:manipulation}

/* Estructura de escritorio unificada para los encabezados de Perfil,
   Perfil público y Recompensas. Los tres HTML agrupan los datos de forma
   distinta; display:contents los sitúa en una misma cuadrícula visual. */
@media(min-width:769px){
  .profile-header .profile-info{width:100%!important;min-width:0!important;max-width:100%!important}
  .profile-header .profile-info-overlay{display:grid!important;grid-template-columns:repeat(2,minmax(140px,1fr))!important;grid-auto-flow:row!important;align-items:stretch!important;width:min(100%,620px)!important;max-width:620px!important;min-width:0!important;padding:1.5rem!important;gap:.75rem!important;box-sizing:border-box!important;text-align:left!important}
  .profile-header .profile-name{grid-column:1/-1!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;font-size:2rem!important;line-height:1.2!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .profile-header .profile-level,.profile-header .profile-petcoins{display:contents!important}
  .profile-header .level-title,.profile-header .level-title-badge{grid-column:1/-1!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:.5rem 1rem!important;box-sizing:border-box!important;font-size:.875rem!important;line-height:1.3!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .profile-header .level-badge{grid-column:1!important;grid-row:3!important}
  .profile-header .petcoins-badge{grid-column:2!important;grid-row:3!important}
  .profile-header .level-badge,.profile-header .petcoins-badge{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:.5rem 1rem!important;box-sizing:border-box!important;font-size:.875rem!important;line-height:1.25!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .profile-header .profile-email-status{grid-column:1/-1!important;grid-row:4!important;min-width:0!important;margin:0!important}
}

@supports(height:100dvh){main.map-container,.image-viewer-modal,.guide-modal,.story-modal{max-height:100dvh}}

@media(max-width:1024px){
  :root{--mobile-gutter:clamp(12px,3vw,24px)}
  body{min-width:0}
  main,.container,.profile-container,.news-container,.petfeed-container{min-width:0;max-width:100%}
  .container,.profile-container,.news-container{padding-left:var(--mobile-gutter);padding-right:var(--mobile-gutter)}
  .header-clean .header-right{min-width:auto!important}
  .content-grid,.contact-layout,.profile-content-grid{grid-template-columns:minmax(0,1fr)!important}
  .content-grid>.sidebar,.content-grid>aside{width:100%!important;max-width:none!important;position:static!important}
  .tabs-nav,.tabs-nav-left,.tabs-nav-right,.filters-container,.filter-buttons,.modal-actions,.form-actions{max-width:100%}
  .tabs-nav,.tabs-nav-left{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .tabs-nav>* ,.tabs-nav-left>*{flex:0 0 auto}
  .table-responsive,.table-container,.table-wrapper,.orders-table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{max-width:none}
  .modal-content,.guide-modal-content,.story-modal .modal-content{width:min(94vw,800px)!important;max-width:94vw!important;max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;margin:12px auto!important}
  .modal-body{max-width:100%;overflow-wrap:anywhere}
  .form-grid,.info-grid,.preferences-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  input,select,textarea{max-width:100%}
  .profile-header{min-width:0}
  .profile-info,.profile-details,.post-content,.comment-content{min-width:0}
  .notification-dropdown{max-width:calc(100vw - 24px)!important}
  .leaflet-popup-content-wrapper{max-width:calc(100vw - 28px)}
  .leaflet-popup-content{max-width:calc(100vw - 62px);margin:12px!important}
}

@media(max-width:768px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .header-clean{height:calc(60px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)!important}
  .header-content{gap:6px!important;min-width:0}
  .header-left,.header-right{min-width:0!important;gap:5px!important}
  .header-center{min-width:0;overflow:hidden}
  .header-clean .page-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem!important}
  .logo-container{min-width:0}.logo-img{flex:0 0 auto}
  .dropdown-menu{top:calc(60px + env(safe-area-inset-top))!important;max-height:calc(100dvh - 72px - env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .container,.profile-container,.news-container{padding-left:12px!important;padding-right:12px!important}
  h1,.hero-title{font-size:clamp(1.7rem,8vw,2.35rem)!important;line-height:1.15}
  h2,.section-title{font-size:clamp(1.25rem,6vw,1.75rem)!important}
  .form-grid,.info-grid,.preferences-grid,.activity-grid,.features-grid,.tips-grid,.first-aid-grid,.emergency-grid,.download-grid,.nav-grid,.news-grid,.reports-container.grid-view,.pets-grid,.store-grid,.products-grid,.rewards-grid{grid-template-columns:minmax(0,1fr)!important}
  /* Los indicadores contienen muy poco texto: dos por fila reducen el scroll
     sin comprometer la lectura. */
  .stats-grid,.stats-row,.reports-stats,.helps-stats,.help-stats,
  .reports-stats-enhanced,.rewards-stats,.overview-stats,.level-modal-stats,
  .quick-nav-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stat-card,.stat-card-enhanced{min-width:0!important;min-height:84px;padding:12px!important;gap:9px!important;margin:0!important}
  .stat-card{flex-direction:row!important;text-align:left!important}
  .stat-icon,.stat-icon-enhanced{width:42px!important;height:42px!important;min-width:42px!important;font-size:1.2rem!important}
  .stat-info,.stat-content{min-width:0!important}
  .stat-number,.stat-value{font-size:1.25rem!important;line-height:1.1!important}
  .stat-label{font-size:.76rem!important;line-height:1.2!important;overflow-wrap:anywhere}
  .actions-grid-primary{grid-template-columns:minmax(0,1fr)!important}
  .actions-grid-secondary{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .section-header,.section-header-pets,.filters-header,.feed-header,.post-header,.modal-header,.modal-footer{gap:10px;flex-wrap:wrap}
  .section-header-pets>button,.form-actions>button,.modal-actions>button,.modal-footer>button{max-width:100%}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important;width:100%}
  button,.btn,.filter-btn,.tab-btn,.nav-card{min-height:44px}
  .filter-buttons,.filters-container{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:5px;-webkit-overflow-scrolling:touch}
  .filter-buttons>*,.filters-container>*{flex:0 0 auto}
  .profile-header{padding:18px 12px!important}
  .profile-photo-container{margin-inline:auto}
  .profile-info{text-align:center;width:100%}
  /* Encabezado de usuario común para Perfil, Perfil público y Recompensas. */
  .profile-header .profile-info{min-width:0!important;max-width:100%!important}
  .profile-header .profile-info-overlay{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;align-items:stretch!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:14px!important;gap:8px!important;box-sizing:border-box!important;text-align:left!important}
  .profile-header .profile-name{grid-column:1/-1!important;grid-row:1!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;font-size:clamp(1.3rem,6vw,1.75rem)!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .profile-header .profile-level,.profile-header .profile-petcoins{display:contents!important}
  .profile-header .level-title,.profile-header .level-title-badge{grid-column:1/-1!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:7px 10px!important;box-sizing:border-box!important;font-size:.82rem!important;line-height:1.25!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .profile-header .level-badge{grid-column:1!important;grid-row:3!important}
  .profile-header .petcoins-badge{grid-column:2!important;grid-row:3!important}
  .profile-header .level-badge,.profile-header .petcoins-badge{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:7px 8px!important;box-sizing:border-box!important;font-size:.78rem!important;line-height:1.2!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .profile-header .profile-email-status{grid-column:1/-1!important;grid-row:4!important;min-width:0!important;margin:0!important}
  .tabs-nav{padding-bottom:4px}
  .tab-content,.content-section,.activity-section{padding:14px!important}
  .reports-list,.helps-list,.help-list{padding:9px!important;min-height:0!important}
  .reports-grid,.helps-grid{gap:10px!important;margin-bottom:14px!important;padding:0!important}
  .report-card,.help-card{min-width:0!important;min-height:0!important}
  .report-card-footer,.help-card-footer{gap:8px!important}
  /* Acciones de estado dentro de reportes y ayudas: siempre en paralelo. */
  .report-actions,.help-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;opacity:1!important;visibility:visible!important}
  .report-actions .btn,.help-actions .btn{width:100%!important;min-width:0!important;min-height:40px!important;margin:0!important;padding:7px 8px!important;justify-content:center!important;white-space:nowrap}
  /* Bootstrap usa márgenes negativos en .row. En las dos vistas de progreso
     provocaban que una tarjeta invadiese visualmente a la siguiente. */
  #rewards>.row,.tabs-content #overview>.row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:16px!important;margin:0!important}
  #rewards>.row>[class*="col-"],.tabs-content #overview>.row>[class*="col-"]{width:100%!important;max-width:100%!important;padding:0!important;margin:0!important;min-width:0!important}
  #rewards .progress-card,#rewards .activity-card,
  .tabs-content #overview .progress-card,.tabs-content #overview .activity-card{height:auto!important;min-height:0!important;margin:0!important;position:relative!important}
  #rewards .activity-list,.tabs-content #overview .activity-list{max-height:300px!important}
  /* PetFeed: filtros contenidos en una cuadrícula real, sin carrusel horizontal
     ni controles fuera de la pantalla. */
  .petfeed-main-card .feed-header{align-items:stretch!important;overflow:visible!important}
  .petfeed-main-card .feed-header-left,.petfeed-main-card .toolbar-container,.petfeed-main-card .search-container{width:100%!important;min-width:0!important;max-width:100%!important}
  .petfeed-main-card .toolbar-container{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:center!important}
  .petfeed-main-card .search-container{display:flex!important}
  .petfeed-main-card .search-input{min-width:0!important;width:100%!important}
  .petfeed-main-card .filters-container{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:100%!important;overflow:hidden!important;padding-bottom:0!important}
  .petfeed-main-card .filters-container:not(.collapsed){max-height:900px!important;margin-top:12px!important}
  .petfeed-main-card .filters-container.collapsed{max-height:0!important;margin:0!important;padding:0!important}
  .petfeed-main-card .filter-btn{width:100%!important;min-width:0!important;height:auto!important;min-height:40px!important;padding:7px 8px!important;justify-content:center!important;text-align:center!important;white-space:normal!important;line-height:1.15!important}
  .petfeed-main-card .date-time-filters{grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;align-items:end!important;width:100%!important;min-width:0!important}
  .petfeed-main-card .date-time-filters label{align-self:end!important;margin:0!important}
  .petfeed-main-card .date-time-filters label:nth-of-type(1){grid-column:1;grid-row:1}
  .petfeed-main-card .date-time-filters #petfeedDateFilter{grid-column:1;grid-row:2}
  .petfeed-main-card .date-time-filters label:nth-of-type(2){grid-column:2;grid-row:1}
  .petfeed-main-card .date-time-filters #petfeedHourFilter{grid-column:2;grid-row:2}
  .petfeed-main-card .date-time-filter-input,.petfeed-main-card .date-filter-action{width:100%!important;min-width:0!important;margin:0!important}
  .petfeed-main-card .post-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;width:100%!important;overflow:hidden!important}
  .petfeed-main-card .post-actions button{display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;min-width:0!important;width:100%!important;min-height:48px!important;padding:5px 2px!important;gap:2px!important;font-size:.68rem!important;line-height:1.05!important;white-space:normal!important;overflow-wrap:anywhere!important}
  .petfeed-main-card .post-actions button .action-icon{font-size:1rem!important;line-height:1!important}
  .petfeed-main-card .post-actions button .action-text{max-width:100%!important;font-size:.65rem!important;line-height:1.1!important;text-align:center!important;white-space:normal!important}
  .comment-item,.notification-item{min-width:0}
  .notification-item{padding-right:12px!important}
  .notification-mark-read{position:static!important;margin-top:8px;opacity:1!important}
  .podium-container{overflow:hidden}
  .user-stats{flex-wrap:wrap;justify-content:center}
  .photo-grid,.image-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main.map-container{height:calc(100dvh - 60px)!important;min-height:420px}
  .filters-panel{top:calc(60px + env(safe-area-inset-top))!important;max-height:calc(100dvh - 60px - env(safe-area-inset-top))!important}
  .map-controls,.stats-panel{padding-bottom:env(safe-area-inset-bottom)!important}
  .details-panel{inset:calc(60px + env(safe-area-inset-top)) 0 0!important;width:100%!important;max-width:none!important;max-height:none!important;overflow-y:auto!important}
  .mobile-panel-toggles{bottom:calc(16px + env(safe-area-inset-bottom))!important}
  .toast-container,.toast,.notification-toast{max-width:calc(100vw - 24px)!important;left:12px!important;right:12px!important}
  .guide-modal-buttons,.purchase-actions{display:flex;flex-direction:column;gap:10px}
  .guide-modal-buttons>* ,.purchase-actions>*{width:100%}
}

@media(min-width:600px) and (max-width:768px){
  /* Las seis tarjetas secundarias de Inicio/Home caben en dos filas de tres
     en móviles anchos y tabletas verticales. */
  .actions-grid-secondary{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:480px){
  .header-clean{padding-inline:8px!important}
  .header-clean .header-center{display:none}
  .header-right{margin-left:auto}
  .auth-btn{padding:6px 9px!important;font-size:.78rem!important}
  .container,.profile-container,.news-container{padding-left:9px!important;padding-right:9px!important}
  .modal,.guide-modal,.story-modal{padding:6px!important}
  .modal-content,.guide-modal-content,.story-modal .modal-content{width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;margin:6px auto!important;border-radius:12px!important}
  .modal-body,.modal-header,.modal-footer{padding:14px!important}
  .photo-grid,.image-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stats-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:14px!important}
  .stat-card,.stat-card-enhanced{padding:10px!important;gap:7px!important}
  .stat-icon,.stat-icon-enhanced{width:36px!important;height:36px!important;min-width:36px!important;font-size:1rem!important}
  .stat-number,.stat-value{font-size:1.1rem!important}
  .stat-label{font-size:.7rem!important}
  .petfeed-main-card .toolbar-container{grid-template-columns:minmax(0,1fr)!important}
  .petfeed-main-card .btn-toggle-filters{width:100%!important;justify-content:center!important}
  .petfeed-main-card .date-time-filters{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important}
  .petfeed-main-card .date-time-filters label:nth-of-type(1){grid-column:1!important;grid-row:1!important}
  .petfeed-main-card .date-time-filters #petfeedDateFilter{grid-column:1!important;grid-row:2!important;box-sizing:border-box!important}
  .petfeed-main-card .date-time-filters label:nth-of-type(2){grid-column:1!important;grid-row:3!important;margin-top:3px!important}
  .petfeed-main-card .date-time-filters #petfeedHourFilter{grid-column:1!important;grid-row:4!important;box-sizing:border-box!important}
  .petfeed-main-card .date-time-filters #applyDateTimeFilter{grid-column:1!important;grid-row:5!important}
  .petfeed-main-card .date-time-filters #clearDateTimeFilter{grid-column:1!important;grid-row:6!important}
}

@media(hover:none) and (pointer:coarse){
  .notification-mark-read,.card-actions,.post-menu-button{opacity:1!important;visibility:visible!important}
  a:hover,button:hover,.card:hover{transform:none!important}
}