/* ============================
   PawPassport — Paleta Corporativa
   Archivo: styles.css (UNIFICADO)
   Azul Petróleo + Dorado
   ============================ */

/* ---------- Font Loading Optimization ---------- */
/* Google Fonts ya sirve .woff2 automáticamente a navegadores modernos */
/* Si usas fuentes locales en el futuro, usa este formato: */
/*
@font-face {
  font-family: 'CustomFont';
  src: url('../fonts/customfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- Variables CSS ---------- */
:root{
  /* Control centralizado de altura de la navbar */
  --nav-h: 80px; /* ajusta aquí el tamaño global de la barra */
  
  /* Colores de marca - Nueva paleta púrpura/lavanda */
  --color-background: #f8f6ff;  /* Lavender claro - fondo global */
  --color-container: #8b5cf6;   /* Purple - contenedores principales */
  --color-text: #1e1b4b;        /* Deep purple - texto principal */
  
  --pp-teal: #1e1b4b;           /* deep purple para texto */
  --pp-teal-600:#8b5cf6;        /* purple para contenedores */
  --pp-teal-700:#7c3aed;        /* purple hover - más oscuro */
  --pp-primary: #1e1b4b;        /* alias para compatibilidad */
  --pp-primary-600:#8b5cf6;     /* alias para compatibilidad */
  --pp-primary-700:#7c3aed;     /* alias para compatibilidad */
  
  --pp-gold: #d4af37;           /* dorado mantiene */
  --pp-gold-soft: #e8d4a0;      /* dorado suave para highlights */
  --pp-accent: #d4af37;         /* alias para compatibilidad */
  --pp-accent-light: #e8d4a0;   /* alias para compatibilidad */
  --pp-accent-dark: #b8962f;    /* Gold oscuro */

  /* Base - nueva paleta púrpura/lavanda */
  --pp-ivory: #f8f6ff;          /* fondo principal - lavender claro */
  --pp-ivory-2:#f3f0ff;         /* paneles suaves - más claro */
  --pp-cream: #f3f0ff;          /* crema para cards especiales */
  --pp-white:#ffffff;
  --pp-cta: #8b5cf6;            /* purple para botones claros */
  --pp-cta-text:#1e1b4b;        /* deep purple para texto en botones */
  
  --pp-ink:   #1e1b4b;          /* texto principal - deep purple */
  --pp-ink-2: #1e1b4b;          /* subtítulos - deep purple */
  --pp-muted: #7c3aed;          /* meta / ayuda - purple medio */
  --pp-border:#7c3aed;          /* bordes suaves - purple */
  --pp-border-light:#8b5cf6;    /* bordes muy suaves - purple */
  
  /* Neutros legacy (para compatibilidad) */
  --pp-gray-900:#1e1b4b;        /* usando ink - deep purple */
  --pp-gray-700:#1e1b4b;        /* usando ink-2 - deep purple */
  --pp-gray-600:#7c3aed;        /* purple medio */
  --pp-gray-500:#7c3aed;        /* usando muted */
  --pp-gray-400:#8b5cf6;        /* purple claro */
  --pp-gray-300:#8b5cf6;        /* purple muy claro */
  --pp-gray-200:#8b5cf6;        /* usando border */
  --pp-gray-100:#f3f0ff;        /* usando border-light */
  --pp-gray-50:#f8f6ff;         /* usando ivory */

  /* Tipografía */
  --pp-font-sans: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --pp-font-serif: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Layout */
  --pp-maxw: 1200px;
  --pp-radius: 14px;           /* Rounded corners - más suave */
  --pp-shadow: 0 1px 2px rgba(30,27,75,.04), 0 6px 18px rgba(30,27,75,.08);
  --pp-shadow-sm: 0 1px 3px rgba(30,27,75,.06);
  --pp-shadow-lg: 0 10px 30px rgba(30,27,75,.12);

  /* Espaciado */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ---------- Reset base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
img,svg,video{
  max-width:100%;
  height:auto;
  display:block;
}
img{
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
button,input,select,textarea{
  font:inherit;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{
  text-decoration:none;
  color:var(--pp-primary);
  transition: color var(--transition-fast);
}
a:hover{
  color:var(--pp-accent);
}

/* ---------- Tipografía global + Font Smoothing ---------- */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-smooth: always;
  -webkit-text-size-adjust: 100%;
}

body{
  font-family:var(--pp-font-sans);
  color:var(--pp-ink);
  background:var(--pp-ivory);
  line-height:1.6;
  position: relative;
}

/* Textura de fondo con patrones púrpura */
body::before{
  content:"";
  position:fixed; 
  inset:0; 
  pointer-events:none; 
  z-index:-1;
  /* gradientes púrpura con patrones sutiles */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139,92,246,.03), transparent 60%),
    radial-gradient(1000px 500px at 120% 110%, rgba(124,58,237,.02), transparent 60%),
    linear-gradient(180deg, rgba(248,246,255,.5), rgba(248,246,255,1)),
    repeating-linear-gradient(0deg, rgba(30,27,75,.005), rgba(30,27,75,.005) 1px, transparent 1px, transparent 2px);
  mix-blend-mode: normal;
}
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-4);
  font-family: "Rubik", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:none;
}
h1{font-size: clamp(2rem, 3.5vw + .5rem, 3.2rem); color:var(--pp-ink)}
h2{font-size: clamp(1.4rem, 2.2vw + .4rem, 2rem); color:var(--pp-teal)}
h3{font-size: clamp(1.1rem, 1.4vw + .4rem, 1.4rem); color:var(--pp-teal)}
h4{font-size: clamp(1rem, 1.2vw + .3rem, 1.2rem); color:var(--pp-primary)}

/* ---------- Contenedor y secciones ---------- */
.container{max-width:var(--pp-maxw);margin:0 auto;padding:0 var(--sp-6)}
.section{padding: clamp(2.5rem, 6vw, 5rem) 0}

/* ========================================
   NAVEGACIÓN GLOBAL
   ======================================== */
.navbar{
  position:sticky; top:0; z-index:50;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 2rem;
  background: 
    radial-gradient(400px 200px at 80% 20%, rgba(139,92,246,0.6), transparent 60%),
    radial-gradient(500px 300px at 10% 90%, rgba(124,58,237,0.6), transparent 70%),
    var(--color-container, var(--pp-teal-600));
  color: var(--color-text, var(--pp-teal));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom:2px solid var(--pp-gray-200);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: visible !important;
}

.navbar .inner, .nav-container, .nav-inner, .topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-2) var(--sp-6);
  max-width:var(--pp-maxw);margin:0 auto;
  width:100%;
}
.navbar .brand, .brand{
  display:flex;align-items:center;gap:var(--sp-3);
  color:var(--pp-white);font-weight:800;
  text-decoration:none;
  transition: color var(--transition-fast);
}
.navbar .brand:hover, .brand:hover{
  color:var(--pp-accent);
}

.navbar .brand img:hover, 
.navbar img.logo:hover,
.topbar .brand img:hover {
  transform: rotate(-15deg) scale(1.05); /* Rotación + ligero zoom en hover */
}
/* Logo escalado con límites seguros - aplicado a todas las variantes */
.navbar .brand img, 
.navbar img.logo,
.topbar .brand img,
.brand img:not(.footer-logo):not(.footer-brand .logo),
.logo:not(.footer-logo):not(.footer-brand .logo) {
  height: clamp(48px, calc(var(--nav-h) - 20px), 96px) !important;
  max-height: 96px !important;
  width: auto !important;
  transition: height 0.25s ease, transform 0.25s ease;
  filter: brightness(0) invert(1); /* Convierte el logo a blanco */
  transform: rotate(-15deg); /* Rota el logo 15 grados a la izquierda */
}

/* Texto del logo */
.navbar .brand span {
  font-size: 1.25rem;
  font-weight: 800;
}

/* Navbar más compacta en páginas de autenticación y dashboards */
.auth, .dashboard {
  --nav-h: 92px;
}

.auth .navbar .brand img,
.auth .navbar img.logo,
.auth .topbar .brand img,
.auth .topbar img.logo,
.auth .brand img,
.dashboard .navbar .brand img,
.dashboard .navbar img.logo,
.dashboard .topbar .brand img,
.dashboard .topbar img.logo,
.dashboard .brand img {
  height: clamp(44px, calc(var(--nav-h) - 24px), 72px) !important;
  max-height: 72px !important;
}

/* Links de navegación */
.navbar .menu, .nav-links, .links{display:flex;gap:var(--sp-6);align-items:center}
.navbar a, .nav-links a, .links a{
  color:var(--pp-white);font-weight:600;
  transition:color var(--transition-fast);
  font-size: clamp(14px, 1.2vw, 16px);
}
.navbar a:hover, .nav-links a:hover, .links a:hover{color:var(--pp-accent)}

/* Botón login en nav */
.nav-links .btn-login{
  background:var(--pp-primary);color:var(--pp-white);
  padding:8px 16px;border-radius:10px;font-weight:700;
  transition:all 0.2s ease;
}
.nav-links .btn-login:hover{
  background:var(--pp-primary-600);
  transform:translateY(-1px);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Menu toggle responsive */
.menu-toggle{
  display:none;flex-direction:column;justify-content:space-between;
  width:28px;height:20px;background:none;border:none;cursor:pointer;
}
.menu-toggle span{
  height:2px;background:var(--pp-primary);width:100%;border-radius:2px;
}

/* Burger menu alignment */
.navbar .burger-menu {
  font-size: 1.4rem;
  cursor: pointer;
}

/* Topbar (para dashboard) */
.topbar{
  position:sticky;top:0;z-index:50;
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  background: 
    radial-gradient(400px 200px at 80% 20%, rgba(139,92,246,0.6), transparent 60%),
    radial-gradient(500px 300px at 10% 90%, rgba(124,58,237,0.6), transparent 70%),
    var(--color-container, var(--pp-teal-600));
  color:var(--pp-white);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--pp-gray-200);
  box-shadow: var(--pp-shadow-sm);
  position: relative;
  overflow: hidden;
}

/* Logo en topbar con los mismos límites que navbar */
.topbar .brand img, 
.topbar img.logo,
.topbar .logo {
  height: clamp(48px, calc(var(--nav-h) - 20px), 96px);
  max-height: 96px;
  width: auto;
  transition: height 0.25s ease;
  filter: brightness(0) invert(1); /* Convierte el logo a blanco */
  transform: rotate(-15deg); /* Rota el logo 15 grados a la izquierda */
}

/* Brand del topbar */
.topbar .brand {
  color: var(--pp-white);
}

.top-actions{display:flex;align-items:center;gap:10px}
.user{position:relative;display:flex;align-items:center;gap:8px}
.avatar{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--pp-primary);
  background:var(--pp-white);color:var(--pp-primary);
  font-weight:800;cursor:pointer;
  display:grid;place-items:center;
}
.user-menu{
  position:absolute;right:0;top:44px;display:none;
  background:#fff;border:1px solid var(--pp-gray-200);
  border-radius:12px;box-shadow:var(--pp-shadow);overflow:hidden;
}
.user-menu.open{display:block}
.user-menu a{
  display:block;padding:10px 14px;
  color:var(--pp-primary-700);text-decoration:none;font-weight:700;
}
.user-menu a:hover{background:var(--pp-ivory)}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--pp-white);
  overflow: hidden;
  margin-top: 20px; /* Espacio para ver las ondas de la navbar */
}

/* Imagen de fondo cubriendo toda la sección */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Capa de oscurecimiento para contraste */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,27,75,.45), rgba(30,27,75,.75));
  z-index: 2;
}


/* Contenido encima */
.hero-content {
  position: relative;
  z-index: 6;
  max-width: 800px;
  padding: 0 var(--sp-6);
}

.hero h1 {
  font-weight: 800;
  margin-bottom: var(--sp-4);
  color: var(--pp-white);
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.hero p {
  color: var(--pp-white);
  margin: 0 0 var(--sp-6);
  font-size: clamp(1rem, 1.2vw + .4rem, 1.15rem);
  line-height: 1.7;
  text-shadow: 0 1px 6px rgba(0,0,0,.25);
}


/* ========================================
   BOTONES
   ======================================== */
.btn{
  --_bg: var(--pp-cta);
  --_tx: var(--pp-cta-text);
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5ch;padding:.8rem 1.15rem;
  border-radius:10px;
  background:var(--_bg);color:var(--_tx);
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition: transform .14s ease, box-shadow .14s ease, background .2s ease;
  cursor:pointer;text-decoration:none;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.btn:active{transform:translateY(0)}

/* Variantes de botones */
.btn.primary, .btn-primary{
  --_bg: var(--pp-primary);
  --_tx: var(--pp-white);
  background: var(--pp-primary);
  border: 1px solid var(--pp-primary);
}
.btn.primary:hover, .btn-primary:hover{
  background: rgba(255,255,255,.15);
  border-color: var(--pp-white);
}
.btn--ghost, .btn.ghost, .btn-outline, .btn.outline{
  --_bg: transparent; --_tx: var(--pp-primary);
  border-color: var(--pp-primary);
}
.btn.ghost:hover, .btn.outline:hover{
  background:rgba(30,27,75,.08);
}

/* Variantes de outline para fondos oscuros */
.block-purple .btn.outline, .cta-section .btn.outline, .hero .btn.outline{
  --_tx: var(--pp-white);
  border-color: rgba(255,255,255,.8);
}
.block-purple .btn.outline:hover, .cta-section .btn.outline:hover, .hero .btn.outline:hover{
  background:rgba(255,255,255,.15);
  border-color: var(--pp-white);
}
.btn.small{padding:8px 12px;font-size:14px}
.btn.large, .btn-large{padding:1rem 2rem;font-size:1.1rem}
.btn.add{
  background:var(--pp-primary);color:var(--pp-white);
  border:0;padding:8px 12px;border-radius:10px;
}

/* Botones hero */
.hero-buttons {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

/* ========================================
   TARJETAS Y GRIDS
   ======================================== */
.card{
  background:var(--pp-white);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow-sm);
  padding:var(--sp-6);
  border:1px solid var(--pp-gray-200);
}

/* Grids responsivos */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}

@media (min-width:768px){
  .grid-3 > *{grid-column: span 1}
}

/* Benefit cards */
.benefit-grid, .plan-grid, .step-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--sp-6);margin-top:var(--sp-6);
}
.benefit, .plan, .step{
  background:var(--pp-white);
  border:1px solid var(--pp-gray-200);
  border-radius:var(--pp-radius);
  padding:var(--sp-6);
  text-align:center;
  box-shadow:var(--pp-shadow-sm);
  transition:transform .2s, box-shadow .2s;
}
.benefit:hover, .plan:hover, .step:hover{
  transform:translateY(-4px);
  box-shadow:var(--pp-shadow);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.benefit h3, .plan h3, .step h3{
  color:var(--pp-primary);
  margin-bottom:var(--sp-3);
  text-transform:none;
}

/* Número decorativo */
.num{
  background:var(--pp-primary);color:var(--pp-white);
  font-weight:800;font-size:18px;
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-3);
}

/* Feature cards */
.feature-card{
  background:var(--pp-white);
  padding:var(--sp-8);border-radius:var(--pp-radius);
  text-align:center;box-shadow:var(--pp-shadow-sm);
  transition:transform .2s, box-shadow .2s;
}
.feature-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--pp-shadow);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.feature-icon{font-size:3rem;margin-bottom:var(--sp-4)}

/* ========================================
   FORMULARIOS
   ======================================== */
.form{padding:var(--sp-4);display:grid;gap:var(--sp-4)}
.form label, .field label, .pp-label{
  display:block;gap:6px;
  font-weight:700;color:var(--pp-gray-700);
  margin-bottom:6px;font-size:14px;
}
.form input, .form select, .form textarea,
.pp-input, .pp-select, input, select, textarea{
  width:100%;
  border:1px solid var(--pp-gray-200);
  border-radius:12px;padding:10px 12px;
  font:inherit;background:var(--pp-white);
  color:var(--pp-gray-700);
  transition:border-color .2s, box-shadow .2s;
}
.form input:focus, .form select:focus, .form textarea:focus,
.pp-input:focus, .pp-select:focus, input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--pp-primary);
  box-shadow:0 0 0 3px rgba(30,27,75,.12);
}
.form textarea{resize:vertical;min-height:100px}

/* Form actions */
.form-actions{display:flex;gap:10px;margin-top:var(--sp-4)}

/* Checkboxes y radios */
.check, .checkbox, .pp-check{
  display:flex;align-items:center;gap:8px;
  color:var(--pp-gray-700);font-size:14px;cursor:pointer;
}
.checkbox input[type="checkbox"]{
  width:18px;height:18px;
  accent-color:var(--pp-accent);cursor:pointer;
}

/* Chips */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--pp-white);
  border:1px solid var(--pp-gray-200);
  border-radius:999px;padding:6px 12px;
  font-weight:700;cursor:pointer;
  transition:all .2s;
}
.chip:hover{
  border-color:var(--pp-primary);
  background:rgba(30,27,75,.05);
}
.chip input{margin-right:6px}

/* Password toggle */
.password-wrap{position:relative}
.toggle-pass{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;
  width:36px;height:36px;border-radius:10px;font-size:16px;
}
.toggle-pass:hover{background:rgba(0,0,0,.06)}

/* Error messages */
.error{min-height:16px;color:#b42318;font-size:12px;margin-top:4px}

/* ========================================
   DASHBOARD LAYOUTS
   ======================================== */
.layout{
  display:grid;grid-template-columns: 280px 1fr;gap:var(--sp-6);
  max-width:var(--pp-maxw);margin:var(--sp-6) auto;
  padding:0 var(--sp-6) var(--sp-8);
}
.sidebar{
  background:var(--pp-white);
  border:1px solid var(--pp-gray-200);
  border-radius:var(--pp-radius);
  box-shadow:var(--pp-shadow-sm);
  height: calc(100svh - 110px);
  position:sticky;top:72px;
  overflow:auto;
}
.side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4);
  border-bottom:1px solid var(--pp-gray-200);
}
.side-head h2{font-size:16px;color:var(--pp-primary-700);margin:0}

/* Pet list en sidebar */
.pet-list{list-style:none;margin:0;padding:var(--sp-3);display:grid;gap:8px}
.pet-item{
  display:flex;gap:10px;padding:var(--sp-3);
  border:1px solid var(--pp-gray-200);border-radius:12px;
  align-items:center;cursor:pointer;background:var(--pp-white);
  transition:all .2s;
}
.pet-item:hover{
  border-color:var(--pp-primary);
  background:rgba(30,27,75,.03);
}
.pet-item img{
  width:42px;height:42px;border-radius:10px;
  object-fit:cover;border:1px solid var(--pp-gray-200);
}
.pet-item .p-name{font-weight:800;color:var(--pp-primary-700)}
.pet-item .p-meta{font-size:12px;color:var(--pp-gray-400)}
.pet-item.active{
  outline:2px solid var(--pp-primary);outline-offset:1px;
  background:rgba(30,27,75,.05);
}

/* Main content area */
.main{display:grid;gap:0}

/* Tabs - Compactos y sin espacio extra */
.tabs{display:flex;gap:.25rem;flex-wrap:wrap;margin-bottom:0}
.tab{
  appearance:none; background:transparent; color:var(--pp-text);
  padding:.4rem .75rem; line-height:1.2; font-size:.95rem; font-weight:600;
  border-radius:9999px; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.tab:hover{ background:rgba(139,92,246,.1); }
.tab.is-active,
.tab[aria-selected="true"],
.tab.active{
  background:var(--pp-primary-600);
  color:#fff; border-color:var(--pp-primary-600);
}

/* Panels - ZERO espacio extra */
.panel{display:none; margin-top:0 !important; padding-top:0 !important}
.panel.show{display:block}
.panel > * { margin-top:0 !important; }
.panel .card, .panel .form { 
  margin-top:0 !important; 
  margin-bottom:1rem !important; 
  padding:1rem !important; 
}
.panel > *:first-child { 
  padding-top:0 !important; 
  margin-top:0 !important; 
}
.panel.show > *:first-child {
  margin-top:0 !important;
  padding-top:0 !important;
}

/* --- Fix responsive: 1 columna y sidebar no-sticky --- */
@media (max-width: 1024px){
  .layout{
    grid-template-columns: 1fr;      /* de 2 cols → 1 col */
    gap: var(--sp-4);
  }
  .sidebar{
    position: static;                 /* quita sticky en móvil */
    height: auto;                     /* sin calc() */
    max-height: none;
    overflow: visible;                /* evita cortes raros del contorno */
    z-index: 1;                       /* por detrás del main si se solapan */
  }
  .main{
    z-index: 2;                       /* por encima de la sidebar */
  }
  /* Tabs siempre visibles y sin "banda" extra */
  .tabs-wrapper{
    position: relative;
    z-index: 3;                       /* sobre tarjetas laterales */
    background: var(--pp-ivory);
  }
  .tabs{ flex-wrap: wrap; gap: .25rem; }
  .tab{ padding: .5rem .75rem; font-size: .9rem; }
}

/* Evita espacio muerto debajo de tabs */
.tabs-wrapper{ border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:.75rem; padding-bottom:.25rem; }
.panel{ margin-top:0 !important; padding-top:0 !important; }

/* ===== FIX CRÍTICO RESPONSIVE (forzado) ===== */
@media (max-width: 1024px){
  /* 1 columna real, sin "sticky" ni alturas fijas */
  .layout{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: var(--sp-4) !important;
  }
  .sidebar{
    position: static !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 1 !important;         /* queda por detrás del main */
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  .main{
    z-index: 2 !important;         /* contenido siempre encima */
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  /* Tabs: sin banda/espacio muerto y siempre por encima */
  .tabs-wrapper{
    position: relative !important;
    z-index: 3 !important;
    margin-bottom: .75rem !important;
    padding-bottom: .25rem !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    background: var(--pp-ivory) !important;
  }
  .tabs{ flex-wrap: wrap !important; gap: .25rem !important; }
  .tab{ padding: .5rem .75rem !important; font-size: .9rem !important; }
  .tab-indicator{
    bottom: -3px !important;
    pointer-events: none !important;
  }
}

/* Seguridad adicional: jamás dejes margen arriba del primer panel */
.panel{ margin-top:0 !important; padding-top:0 !important; }
.panel.show > *:first-child{ margin-top:0 !important; padding-top:0 !important; }

/* ========================================
   PERFIL DE MASCOTA
   ======================================== */
.profile{display:grid;gap:var(--sp-6);padding:var(--sp-6) 0 var(--sp-10)}

/* Hero card del perfil */
.hero-card{
  display:grid;gap:var(--sp-6);align-items:stretch;
  grid-template-columns: 1.4fr 1fr;
}
.photo-main img{
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--pp-radius);
  border:1px solid var(--pp-gray-200);
  box-shadow:var(--pp-shadow);
}
.summary{
  background:var(--pp-white);
  border:1px solid var(--pp-gray-200);
  border-radius:var(--pp-radius);
  padding:var(--sp-6);
  box-shadow:var(--pp-shadow-sm);
}
.pet-name{
  font-size: clamp(22px, 3.2vw, 32px);
  color:var(--pp-primary-700);
  margin-bottom:var(--sp-4);
  font-weight:800;
}
.meta{
  display:grid;grid-template-columns:1fr 1fr;
  gap:8px 12px;color:var(--pp-gray-700);font-size:15px;
}
.meta strong{color:var(--pp-primary-700)}

/* Temperamento badges */
.temperament{margin-top:var(--sp-4)}
.badge{
  display:inline-block;padding:8px 12px;
  border-radius:999px;font-weight:800;
  font-size:13px;color:var(--pp-white);
  border:1px solid rgba(0,0,0,.06);
}
.t-red{background:#D93B30}
.t-orange{background:#EA7A1F}
.t-yellow{background:#D7A300;color:#1b1b1b}
.t-blue{background:#2C6ECB}
.t-white{background:#E5E7EB;color:#1b1b1b;border-color:#d1d5db}
.t-purple{background:var(--pp-primary-600)}

/* Lost pet CTA */
.lost-cta{display:none;margin-top:var(--sp-4)}
.lost-cta.show{display:block}
.found-btn{
  display:inline-block;text-decoration:none;font-weight:700;
  background:var(--pp-primary);color:var(--pp-white);
  padding:10px 14px;border-radius:10px;
  transition:background .2s;
}
.found-btn:hover{background:var(--pp-primary-600)}
.lost-note{display:block;color:var(--pp-gray-400);margin-top:6px;font-size:12px}

/* Galería */
.gallery h2, .details h2, .vet h2, .history h2{
  color:var(--pp-primary-700);margin-bottom:var(--sp-4);
}
.gallery .grid{
  display:grid;grid-template-columns:repeat(5, 1fr);gap:10px;
}
.g-item{
  border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:12px;overflow:hidden;
  border:1px solid var(--pp-gray-200);
  transition:transform .2s, box-shadow .2s;
}
.g-item:hover{
  transform:scale(1.05);
  box-shadow:var(--pp-shadow-sm);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  image-rendering:crisp-edges;
}
.g-item img{display:block;width:100%;height:140px;object-fit:cover}

/* Detalles */
.details{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.traits{margin:8px 0 0 16px}
.traits li{margin:6px 0}
.contact{display:grid;gap:6px}
.share{display:flex;gap:10px;margin-top:10px}

/* Veterinario */
.vet-block{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.vet-note{color:var(--pp-gray-400);font-size:13px;margin-top:8px}

/* ========================================
   TIMELINE E HISTORIAL
   ======================================== */
.timeline{
  background:var(--pp-white);
  border-radius:var(--pp-radius);
  padding:var(--sp-6);
  box-shadow:var(--pp-shadow-sm);
  display:grid;gap:var(--sp-4);
}
.timeline .empty{
  text-align:center;color:var(--pp-gray-400);
  padding:var(--sp-10) var(--sp-6);font-size:14px;
  background:var(--pp-ivory);border-radius:12px;
  border:1px dashed var(--pp-gray-200);
}
.timeline .item, .event{
  display:flex;gap:var(--sp-4);
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--pp-gray-200);
  transition:background .2s;
}
.timeline .item:hover, .event:hover{
  background:var(--pp-ivory);
  margin:0 calc(-1 * var(--sp-6));
  padding:var(--sp-4) var(--sp-6);
  border-radius:8px;
}
.timeline .item:last-child, .event:last-child{border-bottom:none}
.timeline .item time, .event time{
  font-size:13px;color:var(--pp-gray-400);
  min-width:100px;flex-shrink:0;font-weight:600;
  background:var(--pp-ivory);padding:6px 10px;
  border-radius:8px;text-align:center;
}
.timeline .item div, .e-body{flex:1}
.timeline .item strong, .e-body strong{
  display:block;margin-bottom:6px;
  color:var(--pp-primary-700);font-size:15px;font-weight:700;
}
.timeline .item p{
  margin:0;color:var(--pp-gray-600);line-height:1.6;font-size:14px;
}

/* ========================================
   SELECTOR DE VACUNAS
   ======================================== */
.vaccine-selector, .pp-card{
  background:var(--pp-ivory);
  border:1px solid var(--pp-gray-200);
  border-radius:var(--pp-radius);
  padding:var(--sp-6);margin:var(--sp-4) 0;
}
.vaccine-selector h4, .pp-title{
  margin:0 0 var(--sp-4) 0;
  color:var(--pp-primary-700);
  font-size:16px;font-weight:800;
}
.vaccine-filters{
  display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-6);margin-bottom:var(--sp-6);
}
.filter-group h5{
  margin:0 0 8px 0;color:var(--pp-primary);
  font-size:14px;font-weight:700;
}
.checkbox-group{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.vaccine-info{
  background:var(--pp-white);
  border:1px solid var(--pp-gray-200);
  border-radius:12px;padding:var(--sp-4);margin-top:var(--sp-4);
}
.vaccine-info h5{
  margin:0 0 8px 0;color:var(--pp-primary);font-size:14px;
}
.info-row{margin-bottom:4px;font-size:13px}
.info-row strong{color:var(--pp-primary-700)}
.next-dose-info{
  background:rgba(201,165,82,.12);
  border:1px solid rgba(201,165,82,.4);
  border-radius:8px;padding:8px;margin-top:8px;font-size:13px;
}
.next-dose-info strong{color:var(--pp-accent)}

/* ========================================
   GALERÍA Y DROPZONE
   ======================================== */
.gallery-edit{display:grid;gap:var(--sp-4)}
.dropzone{
  border:2px dashed var(--pp-gray-200);
  border-radius:var(--pp-radius);
  background:var(--pp-white);
  padding:var(--sp-6);text-align:center;
  transition:all .2s;
}
.dropzone.over{
  background:rgba(201,165,82,.08);
  border-color:var(--pp-accent);
}
.thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px;
}
.thumb{
  position:relative;border:1px solid var(--pp-gray-200);
  border-radius:12px;overflow:hidden;background:var(--pp-white);
}
.thumb img{width:100%;height:120px;object-fit:cover;display:block}
.thumb .del{
  position:absolute;top:6px;right:6px;
  width:28px;height:28px;border-radius:8px;
  border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;
}

/* ========================================
   DOCUMENTOS Y LISTADOS
   ======================================== */
.docs{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.docs li{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid var(--pp-gray-200);
  border-radius:12px;padding:var(--sp-4);
  background:var(--pp-white);
}

/* ========================================
   LIGHTBOX/DIALOG
   ======================================== */
dialog#lightbox{
  width:min(980px,92vw);border:0;padding:0;
  border-radius:var(--pp-radius);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
#lightbox::backdrop{
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
}
#lightbox img{width:100%;height:auto;display:block}
#lightbox .close{
  position:absolute;top:10px;right:10px;
  border:0;background:rgba(0,0,0,.5);color:#fff;
  width:36px;height:36px;border-radius:10px;
  font-size:20px;cursor:pointer;
}

/* ========================================
   SECCIONES ESPECIALES
   ======================================== */
.block-purple, .cta-section{
  background: linear-gradient(135deg, var(--pp-primary), var(--pp-primary-600));
  color: var(--pp-white);
}
.block-purple h2, .block-purple h3, .cta-section h2{color:var(--pp-white)}
.block-purple .card{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color:#f5f5f5;
}

.cta-box{
  text-align:center;max-width:600px;margin:0 auto;
}
.cta-box h2{font-size:2.5rem;margin-bottom:var(--sp-4)}
.cta-box p{font-size:1.25rem;margin-bottom:var(--sp-6);opacity:.95}
.cta-note{margin-top:var(--sp-4);font-size:.875rem;opacity:.9}
.cta-note a{color:var(--pp-white);text-decoration:underline;font-weight:600}

/* Sección alternativa */
.section-alt{background:var(--pp-ivory)}

/* Lead text */
.lead{
  max-width:840px;margin:0 auto;text-align:center;
  font-size: clamp(16px, 1.45vw, 18px);
  color:var(--pp-gray-600);
}

/* ========================================
   FOOTER
   ======================================== */
.footer{
  background:var(--pp-ivory);
  color:var(--pp-gray-700);
  padding: var(--sp-10) 0 var(--sp-6);
  font-size:.95rem;
  border-top:2px solid var(--pp-gray-200);
}
.footer-content{
  display:flex;justify-content:space-between;
  align-items:center;margin-bottom:var(--sp-8);
  flex-wrap:wrap;gap:var(--sp-8);
}
.footer-brand{
  display:flex;align-items:center;gap:var(--sp-3);
  font-weight:700;font-size:1.25rem;
  color:var(--pp-primary);
}
.footer-brand .logo{
  filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3)) brightness(1) invert(0); /* Mantiene color original */
  height: 50px !important;
  max-height: 50px !important;
}
.footer-logo{
  height:50px !important;
  max-height: 50px !important;
  margin-bottom:10px;
}
.footer p{color:var(--pp-gray-600)}
.footer a, .footer-links a{
  color:var(--pp-primary);
  text-decoration:none;
  transition:color var(--transition-fast);
}
.footer a:hover, .footer-links a:hover{
  color:var(--pp-accent);
}
.footer-nav, .footer-links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--sp-6);margin:var(--sp-6) 0;
}
.footer-copy, .dedicatoria{
  font-size:14px;
  color:var(--pp-gray-600);
  text-align:center;
  padding-top:var(--sp-6);
  border-top:1px solid var(--pp-gray-200);
}
.footer-min{
  border-top:1px solid var(--pp-gray-200);
  padding:var(--sp-6) 0;text-align:center;
  color:var(--pp-gray-600);
}

/* ========================================
   UTILIDADES
   ======================================== */
.text-white{color:var(--pp-white)!important}
.text-accent{color:var(--pp-accent)!important}
.bg-primary{background:var(--pp-primary)!important}
.center{display:grid;place-items:center}
.muted{color:var(--pp-gray-400)}

/* Margin utilities */
.mt-0{margin-top:0}.mt-4{margin-top:var(--sp-4)}.mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--sp-4)}.mb-8{margin-bottom:var(--sp-8)}

/* Padding utilities */
.p-0{padding:0}.p-4{padding:var(--sp-4)}.p-6{padding:var(--sp-6)}.p-8{padding:var(--sp-8)}

/* Border radius */
.round{border-radius:var(--pp-radius)}
.shadow{box-shadow:var(--pp-shadow)}

/* Text transform */
.upper{text-transform:uppercase}

/* ========================================
   ACCESIBILIDAD
   ======================================== */
:focus-visible{
  outline:3px solid var(--pp-accent);
  outline-offset: 2px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1080px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative;height:auto}
}

@media (max-width: 980px){
  .hero{
    min-height: 55vh;
  }
  
  .hero-content{
    padding: 0 var(--sp-4);
  }
  
  /* Otros elementos */
  .hero-card{grid-template-columns:1fr}
  .photo-main img{height:48svh}
  .meta{grid-template-columns:1fr}
  .gallery .grid{grid-template-columns:repeat(3, 1fr)}
  .details, .vet-block{grid-template-columns:1fr}
  .event{grid-template-columns:1fr}
}

@media (max-width: 820px){
  .nav-links{
    position: fixed;
    top: calc(var(--nav-h) + 8px);
    right: 16px;
    z-index: 9999;
    background: rgba(255,255,255,.98);
    border: 1px solid var(--pp-gray-200);
    border-radius: 12px;
    display: none;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    flex-direction: column;
    gap: 14px;
    padding: var(--sp-6);
  }
  .nav-links.open{ display: flex; }
  .menu-toggle{ display: flex; }
}

@media (max-width: 768px){
  .hero{
    min-height: 50vh;
  }
  
  .hero h1{
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }
  
  .hero p{
    font-size: clamp(0.95rem, 3vw, 1.05rem);
  }
  
  .section-title{font-size:2rem}
  .footer-content{flex-direction:column;text-align:center}
  .step{flex-direction:column;text-align:center}
}

@media (max-width: 720px){
  .grid-2, .grid-3{grid-template-columns:1fr}
  .vaccine-filters{grid-template-columns:1fr}
  .checkbox-group{grid-template-columns:1fr}
}

@media (max-width: 540px){
  .g-item img{height:110px}
  .tabs{overflow:auto;white-space:nowrap}
  .docs li{flex-direction:column;align-items:flex-start;gap:8px}
  .card{width:min(520px, 96vw)}
}

@media (max-width: 480px){
  .hero{
    min-height: 45vh;
  }
  
  .hero-buttons{
    flex-direction:column;
    gap: var(--sp-3);
  }
  
  .hero-buttons .btn{
    min-width: 200px;
  }
  
  .container{padding:0 var(--sp-4)}
}