@media print{nav,footer,button,.no-print{display:none!important}body{background:white!important}}
    html { scroll-behavior: smooth; }
    body {
      background-image:
        radial-gradient(circle at 16% 10%, rgba(152,229,199,.22), transparent 24%),
        radial-gradient(circle at 88% 3%, rgba(175,238,238,.20), transparent 28%),
        radial-gradient(circle at 70% 80%, rgba(230,230,250,.24), transparent 28%),
        linear-gradient(180deg, #FFFDF8 0%, #FBFAF4 100%);
    }
    .kicker { letter-spacing: .18em; }
    .brand-line { background: linear-gradient(90deg, #98E5C7, #AFEEEE, #E6E6FA, #FFE4E1); }
    nav { background: rgba(255,253,248,.92)!important; backdrop-filter: blur(18px); border-bottom: 1px solid rgba(237,234,247,.75)!important; }
    input, textarea, select { border-color: rgba(237,234,247,.95)!important; background: rgba(255,255,255,.78)!important; }
    input:focus, textarea:focus, select:focus { outline: none!important; box-shadow: 0 0 0 3px rgba(152,229,199,.30)!important; }
    #auth-profesional > div,
    #buscador-fichas-zona,
    #ficha-activa-contenedor > div.bg-white,
    .sub-tab > div.bg-white,
    .sub-tab .bg-white,
    #zona-mascotas > div,
    #zona-portal aside,
    .portal-section,
    #seccion-carnet > div,
    #modal-nuevo-paciente > div,
    #modal-editar-paciente > div {
      background: rgba(255,253,248,.88)!important;
      border: 1px solid rgba(255,255,255,.88)!important;
      box-shadow: 0 24px 70px rgba(54,59,43,.10)!important;
    }
    #app-profesional > header,
    #zona-acceso,
    #zona-portal > div:first-child {
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, rgba(255,253,248,.94), rgba(245,245,220,.72))!important;
      border: 1px solid rgba(255,255,255,.88)!important;
      box-shadow: 0 24px 70px rgba(54,59,43,.10)!important;
      border-radius: 2rem!important;
      padding: 2rem!important;
    }
    #app-profesional > header::before,
    #zona-acceso::before,
    #zona-portal > div:first-child::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 5px;
      background: linear-gradient(90deg, #98E5C7, #AFEEEE, #E6E6FA, #FFE4E1);
    }
    #app-profesional h1,
    #zona-acceso h1,
    #zona-portal h1 {
      font-family: 'Cormorant Garamond', serif!important;
      font-weight: 700!important;
      letter-spacing: -.02em;
      color: #2D3748;
    }
    .main-btn, .sub-btn, .portal-tab,
    button, a.bg-gray-100, a.bg-darkgray, button.bg-darkgray, button.bg-sage {
      transition: all .2s ease;
    }
    .main-btn:hover, .sub-btn:hover, .portal-tab:hover, button:hover, a:hover { transform: translateY(-1px); }
    .bg-darkgray, .bg-olive { background-color: #2D3748!important; }
    .text-olive, .text-olive { color: #2D3748!important; }
    .bg-sage, .bg-sage { background-color: #98E5C7!important; }
    .text-mint, .text-sageDark { color: #2F8F83!important; }
    .border { border-color: rgba(237,234,247,.95)!important; }
    footer { background: #2D3748!important; }
    .soft-card{background:rgba(255,253,248,.86);backdrop-filter:blur(8px)}

    .brand-lockup { display:flex; align-items:center; gap:.75rem; min-width:0; }
    .brand-logo { height:3.25rem; width:3.25rem; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(45,55,72,.08)); }
    .brand-title { font-family: Poppins, sans-serif; font-size:1.05rem; line-height:1.05; font-weight:700; letter-spacing:-.015em; color:#2D3748; white-space:nowrap; }
    .brand-title .brand-accent { color:#2F8F83; font-weight:700; }
    .brand-subtitle { display:block; margin-top:.18rem; font-family:Poppins, sans-serif; font-size:.68rem; line-height:1; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6B7280; white-space:nowrap; }
    @media (min-width: 640px) { .brand-title { font-size:1.12rem; } .brand-logo { height:3.35rem; width:3.35rem; } }