/* ================================================================
   ODSV FORMS — login_code, login_rapido, registro_rapido
   Todas las variables de color/tipografía vienen de main.css (:root)
   ================================================================ */

/* ── Tarjeta base ─────────────────────────────────────────────── */
.odsv-card {
  --odsv-max-width: 440px;
  --odsv-font-title: 800 1.4rem/.9 var(--font-main);
  --odsv-font-label: 700 .8rem/1 var(--font-main);
  --odsv-font-body:  400 .875rem/1.5 var(--font-main);

  max-width: var(--odsv-max-width);
  margin: 0 auto;
  background: var(--color-white);
  border: 1.5px solid var(--color-dark);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--color-dark);
}

.odsv-card[data-odsv-reg] { --odsv-max-width: 520px; }

/* Franja ODS superior */
.odsv-card::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)     0%,
    var(--color-ods-green)   25%,
    var(--color-ods-yellow)  50%,
    var(--color-ods-magenta) 75%,
    var(--color-ods-blue)    100%
  );
}

/* ── Cabecera ─────────────────────────────────────────────────── */
.odsv-card__header { padding: 20px 32px; border-bottom: 1.5px solid var(--color-dark); }

.odsv-card__title {
  margin: 0 0 4px;
  font: var(--odsv-font-title);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--color-dark);
}

.odsv-card__subtitle {
  margin: 0;
  font: var(--odsv-font-label);
  color: var(--color-gris);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Cuerpo ───────────────────────────────────────────────────── */
.odsv-card__body { padding: 24px 32px 32px; }

/* ── Campos ───────────────────────────────────────────────────── */
.odsv-fields { display: flex; flex-direction: column; gap: 16px; }
.odsv-field  { display: flex; flex-direction: column; gap: 6px; }

.odsv-label {
  font: var(--odsv-font-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-gris);
}

.odsv-input {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid var(--color-dark); border-radius: var(--radius-sm);
  font-size: .95rem; color: var(--color-dark); background: var(--color-white);
  box-sizing: border-box; font-family: inherit;
  transition: box-shadow var(--transition-fast);
}
.odsv-input:focus       { outline: none; box-shadow: 0 0 0 3px var(--color-gris); }
.odsv-input::placeholder { color: var(--color-gris); }

/* ── Botón ────────────────────────────────────────────────────── */
.odsv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 46px; margin-top: 20px; padding: 12px 20px;
  border: 2px solid var(--color-dark); border-radius: var(--radius-sm);
  background: var(--color-dark); color: var(--color-white);
  font: var(--odsv-font-body); font-weight: 700;
  cursor: pointer; font-family: inherit;
  letter-spacing: .04em; text-transform: uppercase;
  transition: background var(--transition-fast), color var(--transition-fast), transform .1s;
}
.odsv-btn:hover:not([disabled])  { background: var(--color-white); color: var(--color-dark); transform: translateY(-1px); }
.odsv-btn:active:not([disabled]) { transform: translateY(0); }
.odsv-btn[disabled]              { opacity: .5; cursor: not-allowed; }

.odsv-btn-sm {
  width: auto; min-height: 38px; margin-top: 0; padding: 8px 18px; font-size: .8rem;
  border-color: var(--color-ods-blue);
  background: var(--color-ods-blue);
  color: var(--color-white);
}
.odsv-btn-sm:hover:not([disabled]) { background: var(--color-white); color: var(--color-dark); }

/* ── Spinner ──────────────────────────────────────────────────── */
@keyframes odsv-spin { to { transform: rotate(360deg); } }

.odsv-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--color-white);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: odsv-spin .65s linear infinite;
  flex-shrink: 0;
}
.odsv-spinner--dark {
  border-color: var(--color-gris);
  border-top-color: var(--color-dark);
}

/* ── Estado de respuesta ──────────────────────────────────────── */
.odsv-status {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-sm);
  font: var(--odsv-font-body); white-space: pre-line;
  background: var(--color-form-grey); border: 1.5px solid var(--color-gris); color: var(--color-gris);
}
.odsv-status.is-error   { background: var(--color-error-bg);   border-color: var(--color-error-bd);   color: var(--color-error); }
.odsv-status.is-success { background: var(--color-success-bg); border-color: var(--color-success-bd); color: var(--color-success); }

/* ================================================================
   LOGIN CODE — Caja de código
   ================================================================ */

.odsv-code-box {
  background: var(--color-form-grey);
  border-radius: var(--radius-sm); padding: 32px 20px; text-align: center;
  position: relative; overflow: hidden; margin-top: 8px;
}
.odsv-code-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)     0%,
    var(--color-ods-green)   25%,
    var(--color-ods-yellow)  50%,
    var(--color-ods-magenta) 75%,
    var(--color-ods-blue)    100%
  );
  pointer-events: none;
}

.odsv-code-label {
  font: var(--odsv-font-label);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gris);
  margin: 0 0 12px;
}

.odsv-code-value {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 6vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--color-dark);
  line-height: 1;
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

.odsv-code-expiry {
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--color-gris);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.odsv-code-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ================================================================
   REGISTRO RÁPIDO — Privacidad
   ================================================================ */

.odsv-privacy { border: 1.5px solid var(--color-dark); border-radius: var(--radius-sm); overflow: hidden; }

.odsv-privacy details > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  font: var(--odsv-font-label);
  font-size: .85rem;
  color: var(--color-gris);
  cursor: pointer; background: var(--color-form-grey); list-style: none; user-select: none;
  text-transform: uppercase; letter-spacing: .03em;
  transition: color var(--transition-fast);
}
.odsv-privacy details > summary::-webkit-details-marker { display: none; }
.odsv-privacy details > summary::before {
  content: '';
  display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235c5c5c'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
  transition: transform var(--transition-fast);
}
.odsv-privacy details[open] > summary::before { transform: rotate(90deg); }
.odsv-privacy details > summary:hover          { color: var(--color-dark); }

.odsv-privacy-body {
  padding: 14px;
  font: var(--odsv-font-body);
  font-size: .82rem;
  line-height: 1.65;
  color: var(--color-gris);
  border-top: 1.5px solid var(--color-dark); max-height: 200px; overflow-y: auto; background: var(--color-white);
}
.odsv-privacy-body p           { margin: 0 0 10px; }
.odsv-privacy-body p:last-child { margin: 0; }
.odsv-privacy-body ul          { margin: 0 0 10px; padding-left: 18px; }
.odsv-privacy-body li          { margin-bottom: 4px; }
.odsv-privacy-body a           { color: var(--color-dark); text-decoration: underline; }

.odsv-privacy-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-top: 1.5px solid var(--color-dark);
  font: var(--odsv-font-body);
  color: var(--color-gris);
  cursor: pointer; background: var(--color-form-grey);
}
.odsv-privacy-check input[type="checkbox"] {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px;
  accent-color: var(--color-dark); cursor: pointer;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .odsv-card__header, .odsv-card__body { padding-left: 20px; padding-right: 20px; }
}