/* Interfaz compartida: escritorio, tablet y teléfono. Cargar después del CSS del rol. */
:root { --ui-gutter: clamp(16px, 3vw, 36px); --ui-border: #dce3da; --ui-surface: #fff; }
html { width: 100%; overflow-x: clip; scroll-padding-top: 90px; }
body { width: 100%; min-width: 0; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }
input, select, textarea { max-width: 100%; min-width: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 1rem; }
textarea { resize: vertical; }
fieldset { min-inline-size: 0; max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; }
iframe, object, embed { max-width: 100%; }
input[type="file"] { width: 100%; overflow: hidden; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #568267; outline-offset: 3px; }
:where(h1, h2, h3, p, label, .badge, .flash, .form-hint, .form-error) { overflow-wrap: anywhere; }
:where(.container,.center-main,.center-content,.admin-main,.admin-content,.form-card,.admin-card,.dashboard-card,.catalog-results,.account-main,.animal-detail__info) { min-width: 0; }
:where(.form-grid,.form-grid-2,.form-grid-3,.grid,.dashboard-grid,.account-grid,.admin-filter-grid) > * { min-width: 0; }
.btn { min-height: 44px; white-space: normal; text-align: center; gap: 8px; border-radius: 9px; }
.btn--sm { min-height: 40px; }
.form-control { min-height: 46px; border-radius: 9px; }
.form-group { min-width: 0; }
.form-actions, .page-actions, .account-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.form-actions > *, .page-actions > * { max-width: 100%; }
.form-card, .admin-card, .dashboard-card, .form-section { border-radius: 14px; }
.center-layout .btn--primary, .admin-layout .btn--primary { background: #2c5540; border-color: #2c5540; color: #fff; }
.center-layout .btn--primary:hover, .admin-layout .btn--primary:hover { background: #203d31; border-color: #203d31; }
.page-title { text-transform: none; letter-spacing: -.02em; }
.public-layout .footer__inner { grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.nav-dropdown__menu { display: none; }
.nav-dropdown.open .nav-dropdown__menu { display: block; opacity: 1; visibility: visible; transform: none; }
.table-wrap, .admin-table-scroll, .vaccines-table-wrap, [data-responsive-table] { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
[data-responsive-table] { margin-block: 16px; border: 1px solid var(--ui-border); border-radius: 12px; }
[data-responsive-table] table { width: 100%; border-collapse: collapse; margin: 0; }
[data-responsive-table] th, [data-responsive-table] td { padding: 12px; text-align: left; }
.table td, .table th { overflow-wrap: anywhere; }
.table td .btn, .table td form { max-width: 100%; }
.tabs-nav, .filter-tabs, .admin-view-switcher { max-width: 100%; flex-wrap: wrap; gap: 6px; }
.tab-btn, .filter-tab { min-height: 44px; display: inline-flex; align-items: center; white-space: normal; }
.admin-layout { grid-template-columns: 248px minmax(0, 1fr); overflow-x: clip; }
.admin-main { grid-column: 2; }
/* El menú pertenece a la ventana, no al desplazamiento del contenido. */
.admin-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 100; }
/* Una sola barra vertical para la página; conservar el desplazamiento horizontal. */
.admin-table-scroll { max-height: none; }
.admin-content, .center-content { padding: var(--ui-gutter); }
.admin-content > *, .center-content > * { max-width: 100%; }
.admin-topbar, .topbar { padding-inline: var(--ui-gutter); }
.admin-topbar__title, .topbar__title { min-width: 0; }
.admin-topbar__actions, .topbar__actions { flex-wrap: wrap; gap: 8px; }
.admin-chip { max-width: 240px; overflow-wrap: anywhere; white-space: normal; }
.drawer-toggle, .drawer-close { display: none; align-items: center; justify-content: center; width: 44px; min-height: 44px; flex: 0 0 44px; border-radius: 9px; cursor: pointer; }
.drawer-toggle { color: #243d31; background: #eaf1e8; border: 1px solid #d8e2d5; }
.drawer-close { color: white; background: #3c5d48; border: 0; }
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(20, 35, 27, .48); z-index: 1199; }
.drawer-open { overflow: hidden; }
.env-chip { pointer-events: none; opacity: .8; bottom: max(8px, env(safe-area-inset-bottom)); }
@media (max-width: 1100px) {
  .admin-layout { display: block; }
  .public-layout .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .admin-sidebar, .center-layout .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, calc(100vw - 36px)); height: 100dvh; max-width: 100%; padding: 22px 16px; z-index: 1200; transform: translateX(-110%); visibility: hidden; overflow-y: auto; border-right: 1px solid #355344; transition: transform .2s ease, visibility .2s; }
  .admin-sidebar.open, .center-layout .sidebar.open { transform: translateX(0); visibility: visible; }
  .admin-nav { display: flex; flex-direction: column; overflow: visible; }
  .admin-sidebar { display: flex; flex-direction: column; gap: 16px; }
  .admin-sidebar__footer { flex-direction: column; align-items: stretch; }
  .admin-nav a { min-height: 46px; }
  .admin-sidebar__footer { margin-top: auto; padding-top: 24px; }
  .admin-brand { padding-right: 40px; }
  .drawer-toggle, .drawer-close { display: inline-flex; }
  .drawer-close { position: absolute; right: 12px; top: 16px; }
  .drawer-overlay.open, .center-layout .sidebar-overlay.open { display: block; z-index: 1199; }
  .center-main { margin-left: 0; width: 100%; }
  .center-layout .topbar__menu-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .sidebar__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .admin-topbar { display: flex; flex-wrap: wrap; position: sticky; min-height: 76px; gap: 12px; }
  .admin-topbar__title { flex: 1; }
  .public-layout .navbar__inner { position: relative; }
  .public-layout .navbar__toggle { display: flex; width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .public-layout .navbar__links { display: none; position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: calc(100dvh - 74px); height: auto; margin: 0; padding: 16px; transform: none; background: #fff; border: 1px solid var(--ui-border); border-radius: 0 0 14px 14px; overflow-y: auto; box-shadow: 0 16px 30px rgba(36,61,49,.12); }
  .public-layout .navbar__links.open { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .navbar__links > li { width: 100%; }
  .navbar__links a, .nav-dropdown__btn { min-height: 44px; }
  .nav-dropdown__btn { width: 100%; }
  .public-layout .nav-dropdown__menu { position: static; width: 100%; min-width: 0; box-shadow: none; }
  .admin-ops__grid--top { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .container { width: 100%; padding-inline: 16px; }
  .form-grid-2, .form-grid-3, .form-grid, .checks-grid, .account-grid, .animal-detail__grid, .application-detail-grid, .review-grid { grid-template-columns: minmax(0, 1fr); }
  .form-group--full { grid-column: auto; }
  .admin-topbar__actions { width: 100%; padding-left: 56px; }
  .admin-topbar__title h1 { font-size: clamp(1.2rem, 5vw, 1.6rem); line-height: 1.2; }
  .admin-topbar__title p { font-size: .85rem; }
  .trend-chart__labels { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .trend-chart__label { font-size: .65rem; overflow-wrap: anywhere; }
  .admin-card__header, .page-header, .section-header { flex-wrap: wrap; gap: 12px; }
  .auth-split { grid-template-columns: minmax(0, 1fr); }
  .auth-split__panel { min-height: 0; padding: 28px 20px; }
  .auth-split__form { min-width: 0; padding: 24px 16px 36px; }
  .auth-form { padding: 24px 20px; max-width: 100%; }
  .center-layout .table-wrap .table tbody td { flex-wrap: wrap; }
  .center-layout .table-wrap .table tbody td > * { min-width: 0; max-width: 100%; }
  .center-layout .table-wrap .table tbody td[colspan] { display: block; }
  .center-layout .table-wrap .table tbody td[colspan]::before { display: none; }
  .public-layout .hero__title { font-size: clamp(2.2rem, 9vw, 3.8rem); }
  .public-layout .hero { padding-block: 44px; }
  .env-chip { font-size: .65rem; padding: 5px 8px; }
  .env-chip > span:not(.env-chip__dot) { display: none; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  h2 { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .admin-content, .center-content { padding: 16px; }
  .form-actions, .page-actions, .account-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn, .page-actions .btn, .account-actions .btn { width: 100%; }
  .admin-topbar { padding: 12px 16px; }
  .admin-topbar__actions { padding-left: 0; }
  .admin-chip { flex: 1; }
  .center-layout .topbar { height: auto; min-height: 72px; gap: 8px; padding: 10px 12px; }
  .topbar__title { font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
  .topbar__actions .btn { padding-inline: 10px; }
  .stats-grid, .admin-stats, .admin-priority-strip, .admin-recent-grid { grid-template-columns: minmax(0, 1fr); }
  .center-layout .stats-grid, .admin-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .center-layout .stat-card { align-items: flex-start; flex-direction: column; padding: 16px; gap: 10px; }
  .center-layout .stat-card__value { font-size: 1.65rem; overflow-wrap: anywhere; }
  .center-layout .stat-card__label { font-size: .8rem; }
  .public-layout .footer__links a { min-height: 44px; padding-block: 10px; }
  .animals-grid, .animals-grid--center, .centers-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 20px 16px; }
  .tabs-nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tab-btn { justify-content: flex-start; padding: 10px 12px; }
  .nav-dropdown__menu a { white-space: normal; }
  .legal-footer, .auth-legal-footer { line-height: 1.8; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}