/* ============================================================
     PALETA — cálida y amable, temática mascota.
     Miel (marca) + verde azulado (acciones) + coral (alerta perdido)
     ============================================================ */
  :root{
    --paper:#FFFDF9;
    --surface:#FFFFFF;
    --ink:#2B2724;
    --ink-soft:#6F675F;
    --line:#EDE6DC;
    --honey:#F0A03A;
    --honey-deep:#D9821A;
    --teal:#159E92;
    --teal-deep:#0E7d73;
    --coral:#E5514A;
    --coral-soft:#FCEAE8;
    --gold:#F5C044;
    --shadow:0 10px 30px -12px rgba(72,54,32,.28);
    --shadow-sm:0 4px 14px -8px rgba(72,54,32,.30);
    --radius:22px;
    --radius-sm:14px;
    --maxw:520px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--ink);
    background:
      radial-gradient(120% 60% at 50% -10%, #FFF3E0 0%, rgba(255,243,224,0) 60%),
      var(--paper);
    min-height:100dvh;
    line-height:1.55;
    padding:18px 16px calc(40px + env(safe-area-inset-bottom));
    display:flex;justify-content:center;
  }
  .wrap{width:100%;max-width:var(--maxw)}
  h1,h2,h3{line-height:1.15}
  .display{font-family:"Fraunces",Georgia,serif}
  .muted{color:var(--ink-soft)}
  a{color:inherit}

  /* -------- Paw motif -------- */
  .paw{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

  /* -------- Cards -------- */
  .card{
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);
  }
  .card + .card{margin-top:14px}
  .stack{display:flex;flex-direction:column;gap:14px}

  /* -------- Buttons -------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:inherit;font-weight:800;font-size:1rem;
    border:0;border-radius:999px;padding:15px 20px;width:100%;
    cursor:pointer;text-decoration:none;transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .btn:active{transform:translateY(1px)}
  .btn svg{width:20px;height:20px;flex:none}
  .btn-primary{background:var(--honey);color:#3a2400;box-shadow:0 8px 18px -8px rgba(217,130,26,.7)}
  .btn-primary:hover{filter:brightness(1.03)}
  .btn-teal{background:var(--teal);color:#fff;box-shadow:0 8px 18px -8px rgba(14,125,115,.6)}
  .btn-coral{background:var(--coral);color:#fff;box-shadow:0 8px 18px -8px rgba(200,60,52,.55)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
  .btn-ghost:hover{border-color:var(--honey)}
  .btn-sm{width:auto;padding:11px 16px;font-size:.9rem}
  .btn-block-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

  /* -------- Forms -------- */
  label.f{display:block;font-weight:700;font-size:.86rem;margin:0 0 6px;color:var(--ink)}
  .hint{font-size:.8rem;color:var(--ink-soft);font-weight:500;margin-top:5px}
  input[type=text],input[type=tel],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
    width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
    background:#FCFAF6;border:1.5px solid var(--line);border-radius:var(--radius-sm);
    padding:13px 14px;transition:border-color .15s ease, box-shadow .15s ease;
  }
  textarea{resize:vertical;min-height:78px}
  input:focus,select:focus,textarea:focus{outline:0;border-color:var(--honey);box-shadow:0 0 0 4px rgba(240,160,58,.16)}
  .field + .field{margin-top:14px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .toggle{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line)}
  .toggle:first-of-type{border-top:0}
  .toggle input{width:auto;flex:none}
  .switch{position:relative;width:46px;height:27px;flex:none}
  .switch input{opacity:0;width:0;height:0;position:absolute}
  .switch span{position:absolute;inset:0;background:#DCD4C8;border-radius:999px;transition:.2s;cursor:pointer}
  .switch span::before{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
  .switch input:checked + span{background:var(--teal)}
  .switch input:checked + span::before{transform:translateX(19px)}

  /* -------- Hero -------- */
  .hero{text-align:center;padding:8px 0 4px}
  .avatar-ring{
    width:150px;height:150px;margin:0 auto 14px;border-radius:50%;
    padding:6px;background:conic-gradient(from 200deg,var(--honey),var(--gold),var(--honey));
    box-shadow:var(--shadow);
  }
  .avatar-ring.is-missing{background:conic-gradient(from 200deg,var(--coral),#ff8f89,var(--coral))}
  .avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#F3ECE0 center/60% no-repeat;display:block;border:4px solid var(--surface)}
  .petname{font-size:2.5rem;font-weight:600;letter-spacing:-.5px}
  .petsub{font-weight:700;color:var(--ink-soft);margin-top:2px}
  .chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px}
  .chip{font-size:.8rem;font-weight:700;background:#FBF3E6;color:var(--honey-deep);border:1px solid #F3E4CC;padding:5px 11px;border-radius:999px}
  .chip.teal{background:#E6F5F3;color:var(--teal-deep);border-color:#CDEBE6}

  /* -------- Missing banner -------- */
  .alert{
    background:linear-gradient(180deg,#FF6b62,var(--coral));color:#fff;border-radius:var(--radius);
    padding:18px 18px 20px;text-align:center;box-shadow:0 14px 30px -14px rgba(200,60,52,.75);
  }
  .alert .pulse{width:56px;height:56px;margin:0 auto 8px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.7rem;animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
  .alert h2{font-size:1.5rem;font-weight:700}
  .alert .meta{font-weight:600;opacity:.95;margin-top:6px;font-size:.95rem}
  .reward{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:#5a3d00;font-weight:800;padding:9px 16px;border-radius:999px;margin-top:14px;box-shadow:0 6px 14px -6px rgba(180,130,0,.6)}

  /* -------- Info list -------- */
  .sect-title{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .info-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:.95rem}
  .info-row:first-child{border-top:0}
  .info-row .k{color:var(--ink-soft);font-weight:600;flex:none}
  .info-row .v{text-align:right;font-weight:700}
  .note-box{background:#FBF3E6;border-radius:var(--radius-sm);padding:13px 15px;font-weight:600;color:#6a4a13}

  /* -------- Misc -------- */
  .brand{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--honey-deep);font-size:.92rem;margin-bottom:16px}
  .center{text-align:center}
  .link{background:none;border:0;color:var(--teal-deep);font-family:inherit;font-weight:800;font-size:.92rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .sect-title svg{width:19px;height:19px;flex:none}
  .link svg{width:14px;height:14px;vertical-align:-2px}
  .warnline svg{width:19px;height:19px;vertical-align:-4px}
  .ico-lg svg{width:42px;height:42px;color:var(--honey-deep)}
  .divider{height:1px;background:var(--line);margin:18px 0}
  .footer{text-align:center;margin-top:22px;color:var(--ink-soft);font-size:.8rem;font-weight:600}
  .hidden{display:none!important}
  .grow-in{animation:grow .5s cubic-bezier(.2,.7,.3,1) both}
  @keyframes grow{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);background:var(--ink);color:#fff;font-weight:700;padding:13px 20px;border-radius:999px;box-shadow:var(--shadow);z-index:50;transition:transform .3s cubic-bezier(.2,.8,.2,1);max-width:90vw;text-align:center}
  .toast.show{transform:translateX(-50%) translateY(0)}
  .backbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
  .iconbtn{width:42px;height:42px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
  .iconbtn svg{width:20px;height:20px}
  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
  }

  /* ================================================================
     AÑADIDOS (no modifican el diseño original):
     responsive escritorio/tablet, panel admin, estados de carga,
     foco accesible. Mismo lenguaje visual.
     ================================================================ */

  /* Foco accesible por teclado sin ensuciar el clic de ratón */
  :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
  .btn:focus-visible{outline-offset:3px}

  /* Escritorio y tablet: la columna central se ensancha un poco,
     manteniendo la estética de tarjeta centrada */
  @media (min-width:768px){
    :root{--maxw:560px}
    body{padding-top:34px}
  }

  /* Spinner de carga */
  .spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--honey);animation:spin .7s linear infinite;display:inline-block;vertical-align:-4px}
  .btn .spin{border-color:rgba(255,255,255,.5);border-top-color:#fff}
  @keyframes spin{to{transform:rotate(360deg)}}
  .loading-full{min-height:60dvh;display:grid;place-items:center;gap:12px;text-align:center;color:var(--ink-soft);font-weight:700}
  .skeleton{background:linear-gradient(90deg,#f0e9df 25%,#f7f1e8 37%,#f0e9df 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--radius-sm)}
  @keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
  .empty{text-align:center;color:var(--ink-soft);font-weight:600;padding:26px 10px}
  .btn[disabled]{opacity:.6;cursor:not-allowed}
  .err{color:var(--coral);font-weight:700;font-size:.86rem;margin-top:6px}
  .banner-net{background:var(--coral-soft);border:1px solid #F3C9C6;color:#9a2b25;border-radius:var(--radius-sm);padding:11px 14px;font-weight:700;font-size:.9rem;margin-bottom:12px}

  /* ---------- Panel admin (dashboard más ancho, mismo estilo) ---------- */
  body.admin .wrap{max-width:1080px}
  .admin-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
  .admin-head h1{font-family:"Fraunces",serif;font-weight:600;font-size:1.5rem}
  .admin-tools{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
  .admin-tools input,.admin-tools select{max-width:280px}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm)}
  table.grid{width:100%;border-collapse:collapse;min-width:760px;font-size:.92rem}
  table.grid th,table.grid td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
  table.grid th{font-weight:800;color:var(--ink-soft);background:#FCF7EF;position:sticky;top:0}
  table.grid tr:last-child td{border-bottom:0}
  .badge{font-size:.75rem;font-weight:800;padding:4px 10px;border-radius:999px}
  .badge.lost{background:var(--coral-soft);color:var(--coral)}
  .badge.ok{background:#E6F5F3;color:var(--teal-deep)}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}

  /* Modal de confirmación (acciones destructivas) */
  .modal-bg{position:fixed;inset:0;background:rgba(43,39,36,.55);display:grid;place-items:center;padding:20px;z-index:70;animation:fade .2s ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:var(--surface);border-radius:var(--radius);padding:24px;max-width:420px;width:100%;box-shadow:var(--shadow);text-align:center}
  .modal h3{font-family:"Fraunces",serif;font-weight:600;font-size:1.25rem;margin-bottom:8px}