/* =========================================================
   RESET & BASE
   ========================================================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{color-scheme:light dark}

/* =========================================================
   THEME (Light / Dark)
   ========================================================= */
:root{
  /* superficies & texto */
  --bg:#eef3f8;
  --card:#ffffffcc;             /* glass suave */
  --text:#0f172a;
  --muted:#556275;
  --border:#dbe3ef;

  /* marca */
  --accent:#0fb873;
  --accent-600:#0a9a60;

  /* fx */
  --focus:#22d3a6;
  --shadow-1:0 8px 20px rgba(15,23,42,.10);
  --shadow-2:0 16px 40px rgba(15,23,42,.14);
  --blur:saturate(140%) blur(6px);

  /* radios & espacios (más compactos) */
  --radius:16px;
  --radius-sm:10px;
  --space:clamp(.7rem,1.4vw,.9rem);
  --space-lg:clamp(1rem,2.4vw,1.4rem);

  /* fondo */
  --grad-1:
    radial-gradient(900px 420px at 8% -10%, #c7f9e9 0%, transparent 60%),
    radial-gradient(780px 420px at 110% 8%, #dbe6ff 0%, transparent 58%),
    linear-gradient(#eef3f8,#eef3f8);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b1220;
    --card:#111827cc;
    --text:#e7ecf5;
    --muted:#aab6c7;
    --border:#223045;

    --accent:#22d3a6;
    --accent-600:#14b089;

    --focus:#22d3a6;
    --shadow-1:0 10px 26px rgba(0,0,0,.35);
    --shadow-2:0 20px 50px rgba(0,0,0,.45);

    --grad-1:
      radial-gradient(880px 420px at -10% 0%, rgba(34,211,166,.09) 0%, transparent 62%),
      radial-gradient(760px 420px at 110% 10%, rgba(56,189,248,.08) 0%, transparent 60%),
      linear-gradient(#0b1220,#0b1220);
  }
  .logo{
    background:#fff!important;border-radius:12px!important;
    padding:.45rem .55rem!important;
    box-shadow:0 6px 18px rgba(255,255,255,.06);
  }
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* =========================================================
   BASE LAYOUT
   ========================================================= */
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Segoe UI Emoji";
  color:var(--text);
  min-height:100vh;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--grad-1);
  display:grid;place-items:center;
  padding:clamp(.8rem,3vw,1.4rem) clamp(.6rem,2.2vw,.9rem);
  background-attachment:fixed;
}

/* =========================================================
   CARD / CONTAINER (COMPACTO)
   ========================================================= */
.widget,.container{
  background:var(--card);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1.25px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-1);
  padding:var(--space-lg);
  width:min(420px,94vw);      /* 👈 más pequeño y recogido */
  text-align:center;
  position:relative;overflow:hidden;isolation:isolate;
  content-visibility:auto;contain:layout paint style;
}
.widget::after,.container::after{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);opacity:.7;
}
/* halo suave */
@keyframes floatGlow{0%{transform:translateY(0);filter:blur(24px);opacity:.22}50%{transform:translateY(5px);filter:blur(20px);opacity:.3}100%{transform:translateY(0);filter:blur(24px);opacity:.22}}
.widget::before,.container::before{
  content:"";position:absolute;width:60%;height:26%;left:20%;top:-10%;
  border-radius:50%;background:radial-gradient(closest-side, rgba(34,211,166,.22), transparent 75%);
  animation:floatGlow 8s ease-in-out infinite;z-index:-1;
}
@media (max-width:600px){
  .widget,.container{padding:1rem;width:100%;box-shadow:0 8px 22px rgba(15,23,42,.09)}
}

/* =========================================================
   LOGO & TIPOGRAFÍA
   ========================================================= */
.logo{width:clamp(120px,22vw,140px);height:auto;margin-bottom:.7rem;image-rendering:-webkit-optimize-contrast}
h1{font-size:clamp(1.35rem,3.2vw,1.7rem);font-weight:850;letter-spacing:.2px;margin-bottom:.55rem}
h2{font-size:clamp(.98rem,2.2vw,1.08rem);font-weight:800;color:var(--muted);margin-bottom:.8rem}
p{font-size:.98rem;color:var(--muted);margin-bottom:.9rem;line-break:anywhere}

/* =========================================================
   FORMULARIOS (compactos)
   ========================================================= */
label{
  font-weight:760;font-size:.98rem;
  color:color-mix(in srgb, var(--accent) 58%, var(--text));
  margin-bottom:.35rem;text-align:center
}
input[type="text"],input[type="email"],input[type="number"],input[type="password"],select{
  padding:12px 14px;font-size:1rem;
  border:2px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius:12px;width:min(360px,100%);text-align:center;color:var(--text);
  background:linear-gradient(180deg,#ffffffb0,#ffffff70);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  margin-bottom:.85rem;transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .06s ease
}
input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
input:focus,select:focus{
  border-color:var(--accent);outline:0;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--focus) 26%, transparent);
  background:linear-gradient(180deg,#fff,#fffaa)
}
input:disabled,select:disabled{opacity:.7;cursor:not-allowed}
form{display:flex;flex-direction:column;align-items:center;gap:.8rem}

/* =========================================================
   BOTONES (compactos)
   ========================================================= */
.btn{
  --btn-bg:var(--accent);--btn-bg-2:var(--accent-600);
  background:linear-gradient(180deg,var(--btn-bg),var(--btn-bg-2));
  color:#fff;font-size:.98rem;padding:11px 18px;border:none;border-radius:12px;
  font-weight:820;cursor:pointer;margin-top:.4rem;min-width:min(200px,100%);
  box-shadow:0 10px 24px rgba(15,185,129,.25);
  transition:transform .08s ease,filter .16s ease,box-shadow .16s ease,opacity .16s ease;
  position:relative;overflow:hidden;isolation:isolate;text-align:center
}
.btn:hover,.btn:focus{transform:translateY(-1px);filter:saturate(1.05);box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:none}
.btn::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(150px 90px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 60%);
  opacity:0;transition:opacity .16s ease
}
.btn:hover::after{opacity:.5}
.btn-small{
  display:inline-block;margin-top:.85rem;font-size:.95rem;color:var(--accent);
  text-decoration:none;font-weight:800;align-self:flex-start;text-align:left
}
.btn-small:hover{text-decoration:underline}

/* =========================================================
   “VOLVER AL INICIO” SIEMPRE A LA IZQUIERDA
   ========================================================= */
.align-left{width:100%;text-align:left!important}
.back-row{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;width:100%;margin-bottom:.4rem}
.back-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:850;text-decoration:none;color:var(--accent);user-select:none;white-space:nowrap}
.back-link::before{content:"←";opacity:.9;font-weight:900}
.widget .back-link,.container .back-link{margin-left:0}
.btn.back-link{background:none;padding:0;box-shadow:none;text-align:left}

/* =========================================================
   LISTAS / BADGES
   ========================================================= */
.list{list-style:none;padding:0;margin:0}
.item{
  display:flex;align-items:center;justify-content:space-between;
  border:1px dashed var(--border);border-radius:12px;padding:9px 10px;margin-bottom:8px;gap:10px;
  background:linear-gradient(180deg,#ffffffba,#ffffff82);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}
.item-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.item-title{font-weight:850;color:var(--text);letter-spacing:.15px}
.item-sub{font-size:.9rem;color:var(--muted)}
.item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-size:.83rem;font-weight:800;border:1px solid var(--border);color:var(--text);background:#eef2f7
}
@media (prefers-color-scheme:dark){
  .badge{background:#e8eef8;color:#0f172a;border-color:#cbd5e1}
}
.badge-admin{background:#10131a;color:#fff;border-color:#0b1220}
.badge-registrador{background:#dcfce7;color:#047857;border-color:#bbf7d0}

/* =========================================================
   UTILIDADES
   ========================================================= */
.center{display:flex;align-items:center;justify-content:center}
.row{display:flex;gap:.65rem;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:.45rem}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--border);width:100%;margin:.7rem 0}
.hide-mobile{display:initial}
@media (max-width:600px){.hide-mobile{display:none}}
.btn-small,
.back-link {
  display: inline-block;
  align-self: flex-start;
  margin-left: 0;
  text-align: left;
}