/* =========================================================
   AS APP · 02 · COMPONENTES GLOBALES

   Único propietario de los componentes reutilizables:
   tarjetas, botones, campos, selects, enlaces, volver,
   badges y controles básicos.

   NO controla:
   - campana
   - navegación inferior
   - reproductor
   - cabeceras
   - páginas concretas
   - tema claro/oscuro
   ========================================================= */


/* =========================================================
   CONTENEDOR BASE
   ========================================================= */

.as-app-shell{
  width:min(100%,var(--as-app-mobile-width));
  margin:0 auto;
  box-sizing:border-box;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.as-app-card{
  box-sizing:border-box;
  background:var(--as-surface);
  color:var(--as-text);
  border:1px solid var(--as-border);
  border-radius:var(--as-radius-lg);
  box-shadow:var(--as-shadow-card);
}

.as-app-card-soft{
  box-sizing:border-box;
  background:var(--as-surface-2);
  color:var(--as-text);
  border:1px solid var(--as-border-soft);
  border-radius:var(--as-radius-lg);
}


/* =========================================================
   BOTONES
   ========================================================= */

.as-app-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--as-button-height);
  padding:0 var(--as-space-4);

  box-sizing:border-box;
  border:0;
  border-radius:var(--as-radius-md);

  font-family:var(--as-font-ui);
  font-size:var(--as-size-body);
  font-weight:var(--as-weight-bold);
  line-height:1;

  text-decoration:none;
  cursor:pointer;
}

.as-app-button-primary{
  background:var(--as-gold);
  color:var(--as-text-inverse);
}

.as-app-button-secondary{
  background:var(--as-surface-3);
  color:var(--as-text);
  border:1px solid var(--as-border-strong);
}

.as-app-button-danger{
  background:var(--as-danger-bg);
  color:var(--as-danger-text);
  border:1px solid var(--as-danger);
}


/* =========================================================
   CAMPOS
   ========================================================= */

.as-app-input,
.as-app-select,
.as-app-textarea{
  width:100%;
  box-sizing:border-box;

  min-height:var(--as-control-height);

  background:var(--as-surface);
  color:var(--as-text);

  border:1px solid var(--as-border);
  border-radius:var(--as-radius-md);

  font-family:var(--as-font-ui);
  font-size:var(--as-size-body);

  outline:none;
}

.as-app-input,
.as-app-textarea{
  padding:11px 13px;
}

.as-app-select{
  padding:0 38px 0 13px;
}

.as-app-input::placeholder,
.as-app-textarea::placeholder{
  color:var(--as-text-soft);
}


/* =========================================================
   ENLACES
   ========================================================= */

.as-link{
  color:var(--as-text);
  text-decoration:none;
}

.as-link-accent{
  color:var(--as-gold);
  text-decoration:none;
}

.as-link-danger{
  color:var(--as-danger);
  text-decoration:none;
}


/* =========================================================
   VOLVER
   ========================================================= */

.as-app-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:0;
  background:transparent;

  color:var(--as-gold);
  text-decoration:none;

  font-family:var(--as-font-ui);
  font-size:25px;
  line-height:1;

  cursor:pointer;
}


/* =========================================================
   BADGES / ETIQUETAS
   ========================================================= */

.as-app-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:22px;
  padding:0 var(--as-space-2);

  border-radius:var(--as-radius-round);

  background:var(--as-surface-3);
  color:var(--as-text-muted);

  font-family:var(--as-font-ui);
  font-size:var(--as-size-kicker);
  font-weight:var(--as-weight-bold);
  line-height:1;
}

.as-app-badge-accent{
  background:var(--as-gold-surface);
  color:var(--as-gold);
}


/* =========================================================
   SWITCH
   ========================================================= */

.as-app-switch{
  -webkit-appearance:none;
  appearance:none;

  position:relative;

  flex:0 0 46px;
  width:46px;
  height:26px;

  margin:0;
  padding:0;

  border:1px solid var(--as-border-strong);
  border-radius:var(--as-radius-round);

  background:var(--as-surface-3);

  cursor:pointer;
}

.as-app-switch::after{
  content:"";

  position:absolute;
  top:2px;
  left:2px;

  width:20px;
  height:20px;

  border-radius:50%;

  background:var(--as-text-soft);

  box-shadow:0 1px 3px var(--as-palette-rgba-0-0-0-0p3);

  transition:transform .18s ease;
}

.as-app-switch:checked{
  background:var(--as-gold);
  border-color:var(--as-gold);
}

.as-app-switch:checked::after{
  background:var(--as-white);
  transform:translateX(20px);
}


/* =========================================================
   ESTADOS
   ========================================================= */

.as-is-disabled{
  opacity:.55;
  pointer-events:none;
}

.as-is-hidden{
  display:none!important;
}

/* Avisos de estado reutilizables entre pantallas. */
.as-inline-notice{
  border-radius:var(--as-radius-md);
  padding:var(--as-space-3) var(--as-space-4);
  font-size:var(--as-size-body);
  line-height:1.4;
  margin-bottom:var(--as-space-3);
}
.as-inline-notice.is-success{background:var(--as-success-bg);color:var(--as-success-text);border:1px solid var(--as-success-border)}
.as-inline-notice.is-error{background:var(--as-error-bg);color:var(--as-error-text);border:1px solid var(--as-error-border)}