/* ================================================================
   PATITAS A CASA · UX/UI POLISH V19
   Capa final de consistencia visual y responsive.
   No sustituye los estilos funcionales existentes: los normaliza.
================================================================ */
:root{
  --ui-max:1320px;
  --ui-space:clamp(12px,2vw,24px);
  --ui-focus:0 0 0 4px rgba(169,201,180,.42);
  --ui-shadow:0 10px 30px rgba(11,62,59,.08);
  --ui-shadow-hover:0 16px 40px rgba(11,62,59,.14);
}

html{scroll-padding-top:130px}
body{background:linear-gradient(180deg,#eef3f1 0%,#f6f8f7 48%,#eef3f1 100%);}
body,button,input,select,textarea{font-synthesis:none}
button,a,input,select,textarea{touch-action:manipulation}

/* Acceso rápido / teclado */
.skip-link{
  position:fixed;left:14px;top:-80px;z-index:200000;
  padding:11px 16px;border-radius:10px;background:#fff;color:var(--petrol-osc);
  font-weight:800;text-decoration:none;box-shadow:var(--sombra-alta);
  transition:top .18s ease;
}
.skip-link:focus{top:14px;outline:none;box-shadow:var(--ui-focus),var(--sombra-alta)}

/* Header más estable en todos los breakpoints */
.topbar{
  min-height:64px;
  padding-left:max(14px,env(safe-area-inset-left));
  padding-right:max(14px,env(safe-area-inset-right));
  backdrop-filter:saturate(1.08);
}
.logo{min-width:0}
.logo span{min-width:0}
.logo-sub{max-width:min(48vw,360px);overflow:hidden;text-overflow:ellipsis}
.top-derecha{min-width:0}

/* Navegación: legible, táctil y sin saltos */
.nav-modulos{scrollbar-width:none;overscroll-behavior-x:contain}
.nav-modulos a{min-height:46px;justify-content:center}
.nav-modulos a:focus-visible{outline:3px solid var(--menta);outline-offset:-4px}
.nav-modulos a.activo{font-weight:800}

/* Área de contenido */
.contenedor{
  width:min(100%,var(--ui-max));
  padding-left:clamp(12px,2vw,24px);
  padding-right:clamp(12px,2vw,24px);
  padding-top:clamp(14px,2vw,24px);
}
#app{min-width:0}
#app>*{min-width:0}

/* Paneles y cabeceras */
.panel,.tarjeta,.alerta,.ps-card,.fb-borrador{
  border-color:rgba(24,41,42,.12);
  box-shadow:var(--ui-shadow);
}
.panel{overflow:hidden;border-radius:var(--r-lg)}
.cab-modulo{padding:16px clamp(16px,2vw,22px)}
.cab-modulo h2{font-size:clamp(16px,1.5vw,19px)}

/* Formularios */
.campo input,.campo select,.campo textarea,
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{
  border-color:var(--petrol)!important;
  box-shadow:var(--ui-focus);
  outline:none;
}

/* Botones y controles */
.btn,.btn-backup-interfaz,.accion,.chip,.ps-cant button,.ps-quitar,
.btn-whatsapp,.btn-enviar{transition:transform .14s ease,box-shadow .18s ease,filter .18s ease,background .18s ease,border-color .18s ease}
.btn:hover:not(:disabled),.btn-backup-interfaz:hover:not(:disabled){transform:translateY(-1px)}
.btn:focus-visible,.btn-backup-interfaz:focus-visible,.accion:focus-visible,
.chip:focus-visible,.ps-cant button:focus-visible,.ps-quitar:focus-visible,
.btn-whatsapp:focus-visible,.btn-enviar:focus-visible{outline:none;box-shadow:var(--ui-focus)}

/* Tarjetas de contenido */
.tarjeta:hover,.ps-card:hover,.fb-borrador:hover{box-shadow:var(--ui-shadow-hover)}
.tarjeta h2,.titulo-seccion{line-height:1.25}

/* Tablas: nunca deben romper el viewport */
.tabla-wrap,.tabla-config-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tabla-config,.tabla-wrap table{border-collapse:separate;border-spacing:0}
.tabla-config th,.tabla-config td{white-space:nowrap}
.tabla-config tbody tr:hover td{background:rgba(227,235,233,.55)}

/* Estados del sistema */
.aviso,.vacio{line-height:1.5}
.toast{max-width:min(92vw,520px);padding-left:18px;padding-right:18px}

/* Modales: jerarquía y seguridad visual */
.overlay-modal{padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));}
.caja-modal{max-width:min(720px,100%);max-height:min(88vh,900px);overflow:auto;overscroll-behavior:contain}

/* Fotos y multimedia */
img{height:auto}
.alerta-media img,.preview-marco img{background:var(--petrol-osc)}

/* Footer profesional */
.pie-global{
  position:relative;
  margin-top:24px;
  padding:28px 16px calc(92px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0b3e3b 0%,#082f2d 100%);
  border-top:1px solid rgba(255,255,255,.08);
}
.pie-global .marca{font-size:clamp(13px,1.3vw,15px);line-height:1.45}
.pie-global .creditos{font-size:11px;line-height:1.6;color:rgba(255,255,255,.68)}
.pie-global .creditos a{color:var(--menta);font-weight:800;text-decoration:none}
.pie-global .creditos a:hover{text-decoration:underline}
.petalert-redes-sociales{margin-top:14px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
.petalert-social{width:42px;height:42px;display:grid;place-items:center;border-radius:12px}
.petalert-social:focus-visible{outline:3px solid var(--menta);outline-offset:3px}

/* Barra móvil: respeta notch y no tapa el contenido */
.barra-movil{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));}

/* PetShop: tarjetas consistentes */
.ps-grid{align-items:stretch}
.ps-card{min-width:0}
.ps-img{min-height:190px}
.ps-img img{width:100%;height:190px;object-fit:contain}

/* Menú de usuario */
.menu-usuario{max-width:min(340px,calc(100vw - 24px));}

/* Desktop */
@media (min-width:720px){
  .contenedor{padding-bottom:72px}
  .acciones{flex-direction:row;flex-wrap:wrap}
  .acciones .btn{width:auto;min-width:150px}
  .fila-2{gap:14px}
  .pie-global{padding-bottom:30px}
}

@media (min-width:1024px){
  .topbar{padding-left:clamp(20px,3vw,48px);padding-right:clamp(20px,3vw,48px)}
  .nav-modulos{padding-left:max(14px,calc((100vw - var(--ui-max))/2));padding-right:max(14px,calc((100vw - var(--ui-max))/2))}
  .contenedor{padding-top:26px}
  .pie-global{padding-bottom:34px}
}

/* Móvil */
@media (max-width:719px){
  html{scroll-padding-top:112px}
  .topbar{min-height:58px;height:auto}
  .logo-sub{max-width:48vw}
  .contenedor{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .cab-modulo{align-items:flex-start}
  .cab-modulo span{max-width:100%;line-height:1.4}
  .hero{align-items:flex-start}
  .hero-logo{width:64px;height:64px;flex-basis:64px}
  .ficha-grid,.alerta-datos{grid-template-columns:1fr}
  .acciones .btn{width:100%}
  .tabla-config-wrap{margin-left:-2px;margin-right:-2px}
  .tabla-config{min-width:520px}
  .caja-modal{width:100%;border-radius:16px}
  .pie-global{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .ps-grid{grid-template-columns:1fr}
  .ps-img{min-height:180px}
  .ps-img img{height:180px}
}

@media (max-width:420px){
  .logo-img{width:38px;height:38px;flex-basis:38px}
  .logo-txt{font-size:15px}
  .logo-sub{font-size:6px;letter-spacing:.55px}
  .motor-pill{max-width:44px}
  .chip-modo{display:none}
  .petalert-social{width:40px;height:40px}
}

@media (prefers-reduced-motion:reduce){
  .btn:hover:not(:disabled),.btn-backup-interfaz:hover:not(:disabled){transform:none}
}

/* Configuración: sección de usuarios separada visualmente */
.config-usuarios{margin-top:26px;padding-top:24px;border-top:1px solid var(--borde)}
.config-usuarios>h3{font-family:var(--display);font-size:17px;line-height:1.3;margin:0 0 12px;color:var(--tinta)}
.config-backup-card{margin-top:20px}
.backup-interfaz-estado{min-height:22px;margin-top:8px;font-size:12px;line-height:1.45}
.backup-interfaz-estado.is-success{color:var(--verde);font-weight:700}
.backup-interfaz-estado.is-error{color:var(--rojo);font-weight:700}
.backup-interfaz-estado.is-loading{color:var(--tinta-60)}

/* Imágenes que no cargaron: mantienen el layout sin elementos colapsados. */
.ui-img-error{opacity:.35;object-fit:contain!important;background:var(--fondo)!important}