@charset "utf-8";
/* CSS Document */

/* yoticko-softui.css  |  Tema Soft UI / Neumorphism */

:root{
--bg1: #eef1f7;
    --bg2: #e6ebf3;
    --shadow-light: #6467641a;
    --shadow-dark: #072d022e;
    --primary: #317d22;
    --primary-soft: #379b54;
    --text: #2d3748;
    --text-soft: #6b7280;
    --danger: #ef4444;
    --success: #10b981;
    --radius-xl: 22px;
    --radius-lg: 18px;
    --gap: 14px;
    --maxw: 420px;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
}

body{
     margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    color: var(--text);
    background: linear-gradient(145deg, #0b270e, #2a8108);
}

/* Layout */
.yk-container {
    max-width: 700px;
    margin: auto;
    padding: 18px;
    text-align: center;
}

.yk-card{
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  border-radius:var(--radius-xl);
  padding:18px;
  box-shadow:
    10px 10px 22px var(--shadow-dark),
    -10px -10px 22px var(--shadow-light);
  margin-bottom:14px;
}

.yk-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.yk-center{ text-align:center; }
.yk-muted{ color:var(--text-soft); }
.yk-small{ font-size:13px; }
.yk-title{
  font-size:22px;
  font-weight:800;
  margin:10px 0 4px 0;
}
.yk-subtitle{
  font-size:14px;
  margin:0;
}

/* Pills */
.yk-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:0.25rem;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  box-shadow:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
}

.yk-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background:var(--text-soft);
}
.yk-dot--success{ background:var(--success); }
.yk-dot--danger{ background:var(--danger); }
.yk-dot--primary{ background:var(--primary); }

/* Buttons */
.yk-btn{
  width:100%;
  border:0;
  border-radius:0.25rem;
  padding:13px 14px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  color:var(--text);
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
  transition:transform .06s ease;
}

.yk-btn-close{
  width:100%;
  border:0;
  border-radius:0.25rem;
  padding:13px 14px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  color:var(--text);
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
  transition:transform .06s ease;
}

.yk-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 5px 5px 10px var(--shadow-dark),
    inset -5px -5px 10px var(--shadow-light);
}

.yk-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

/* Small neutral button */
.yk-btn--soft{
  font-size:14px;
  padding:10px 12px;
}

/* Primary circular button (como la app de música) */
.yk-btn-main-wrap{
  display:flex;
  justify-content:center;
  margin:14px 0 8px 0;
}

.yk-btn-main{
      width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: 0.05rem;
    color: #fff;
    background: linear-gradient(145deg, #2d7020, var(--primary-soft));
    box-shadow: 0.5rem 0.5rem 0.5rem #000d0330, -0.25rem -.25rem .75rem #ffffff;
    transition: transform .06s ease;
}

.yk-btn-main:active{
  transform:translateY(1px);
  box-shadow:
    inset 6px 6px 12px rgba(0,0,0,.18),
    inset -6px -6px 12px rgba(255,255,255,.55);
}

.yk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
/*
@media (max-width:520px){
  .yk-grid{ grid-template-columns:1fr; }
} */

.yk-hr{
  border:0;
  height:1px;
  background:rgba(107,114,128,.25);
  margin:14px 0;
}

/* Alerts */
.yk-alert{
  border-radius:16px;
  padding:12px 14px;
  font-weight:800;
  margin-top:10px;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  box-shadow:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
}
.yk-alert--ok{ color:#065f46; }
.yk-alert--err{ color:#991b1b; }

/* Links */
.yk-link{
  color:inherit;
  text-decoration:none;
  font-weight:800;
}
.yk-link:hover{ text-decoration:underline; }

/* ===== SoftUI Extras: feedback, toast, overlay, micro-animaciones ===== */

.yk-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media (max-width:520px){
  .yk-actions{ grid-template-columns:1fr 1fr; }
}

.yk-btn-main--pulse{
  animation: ykPulse 1.5s ease-in-out infinite;
}
@keyframes ykPulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-1px) scale(1.03); }
}

.yk-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:18px;
  font-weight:900;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
}

.yk-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:9999;
  max-width:min(560px, calc(100% - 32px));
  width:calc(100% - 32px);
  border-radius:18px;
  padding:12px 14px;
  font-weight:900;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  box-shadow:
    10px 10px 22px var(--shadow-dark),
    -10px -10px 22px var(--shadow-light);
  display:none;
}
.yk-toast.is-show{ display:block; animation: ykToastIn .18s ease-out; }
@keyframes ykToastIn{
  from{ opacity:0; transform:translateX(-50%) translateY(10px); }
  to{ opacity:1; transform:translateX(-50%) translateY(0); }
}
.yk-toast--ok{ color:#065f46; }
.yk-toast--err{ color:#991b1b; }

.yk-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(238,241,247,.55);
  backdrop-filter: blur(6px);
}
.yk-overlay.is-show{ display:flex; }

.yk-loader{
  width:84px;
  height:84px;
  border-radius:22px;
  background:linear-gradient(145deg,var(--bg1),var(--bg2));
  box-shadow:
    10px 10px 22px var(--shadow-dark),
    -10px -10px 22px var(--shadow-light);
  display:flex;
  align-items:center;
  justify-content:center;
}
.yk-spinner{
  width:34px;
  height:34px;
  border-radius:999px;
  border:4px solid rgba(107,114,128,.25);
  border-top-color: var(--primary);
  animation: ykSpin .8s linear infinite;
}
@keyframes ykSpin{ to{ transform: rotate(360deg); } }

/* Modo kiosko: oculta elementos marcados */
.yk-kiosk-hide{ display:block; }
body.yk-kiosk .yk-kiosk-hide{ display:none; }