/* ==========================================================================
   tuNFC · Plataforma NFC — componentes compartidos por el admin NFC, «Mi cuenta»
   y el panel del distribuidor. Solo tokens de tokens.css: la vitrina (ChatGPT)
   puede rediseñar encima sin tocar la lógica.
   ========================================================================== */

.nfc-tabs { display: flex; gap: .25rem; overflow-x: auto; margin: 0 0 1.25rem; padding-bottom: .25rem; border-bottom: 1px solid var(--c-borde, #e5e7eb); }
.nfc-tabs a { white-space: nowrap; padding: .6rem .9rem; border-radius: .6rem .6rem 0 0; color: var(--c-texto-suave, #4b5563); text-decoration: none; font-weight: 600; font-size: .9rem; }
.nfc-tabs a[aria-current="page"] { color: var(--c-texto, #111); box-shadow: inset 0 -3px 0 var(--c-accion, #14201a); }

.nfc-flash { padding: .8rem 1rem; border-radius: .7rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.45; }
.nfc-flash--ok { background: var(--c-exito-fondo, #e7f6ee); color: var(--c-exito, #166534); }
.nfc-flash--error { background: var(--c-error-fondo, #fdecec); color: var(--c-error, #991b1b); }
.nfc-flash--aviso { background: var(--c-aviso-fondo, #fff6e0); color: var(--c-aviso, #92400e); }

.nfc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.nfc-kpi { background: var(--c-superficie, #fff); border: 1px solid var(--c-borde, #e5e7eb); border-radius: .9rem; padding: .9rem 1rem; }
.nfc-kpi__valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--c-texto, #111); font-variant-numeric: tabular-nums; }
.nfc-kpi__rotulo { font-size: .8rem; color: var(--c-texto-suave, #4b5563); margin-top: .2rem; }

.nfc-panel { background: var(--c-superficie, #fff); border: 1px solid var(--c-borde, #e5e7eb); border-radius: 1rem; padding: 1.1rem; margin-bottom: 1rem; }
.nfc-panel > h2, .nfc-panel > h3 { margin: 0 0 .8rem; font-size: 1.05rem; }
.nfc-rejilla { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .nfc-rejilla--2 { grid-template-columns: 1fr 1fr; } .nfc-rejilla--3-1 { grid-template-columns: 2fr 1fr; } }

.nfc-form { display: grid; gap: .75rem; }
.nfc-form--linea { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.nfc-form--linea .form-group { margin: 0; min-width: 140px; flex: 1; }
.nfc-form label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--c-texto-suave, #4b5563); }
.nfc-form input[type=text], .nfc-form input[type=email], .nfc-form input[type=url], .nfc-form input[type=number],
.nfc-form input[type=password], .nfc-form input[type=tel], .nfc-form input[type=date], .nfc-form select, .nfc-form textarea {
  width: 100%; box-sizing: border-box; padding: .7rem .8rem; border: 1px solid var(--c-borde, #d1d5db); border-radius: .6rem;
  font: inherit; font-size: 16px; /* 16px: iOS no hace zoom al enfocar */ background: var(--c-superficie, #fff); color: var(--c-texto, #111); }
.nfc-form .ayuda { font-size: .8rem; color: var(--c-texto-tenue, #6b7280); margin-top: .25rem; line-height: 1.4; }
.nfc-check { display: flex; gap: .5rem; align-items: center; font-size: .9rem; }

.nfc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .65rem 1rem; border-radius: .7rem;
  border: 1px solid transparent; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.1; }
.nfc-btn--primario { background: var(--c-accion, #14201a); color: var(--c-accion-texto, #fff); }
.nfc-btn--primario:hover { background: var(--c-accion-hover, #0b1410); }
.nfc-btn--secundario { background: var(--c-superficie, #fff); color: var(--c-texto, #111); border-color: var(--c-borde, #d1d5db); }
.nfc-btn--peligro { background: var(--c-superficie, #fff); color: var(--c-error, #991b1b); border-color: currentColor; }
.nfc-btn--grande { width: 100%; min-height: 56px; font-size: 1.1rem; border-radius: .9rem; }
.nfc-btn--sm { min-height: 34px; padding: .35rem .7rem; font-size: .85rem; }
.nfc-btn[disabled] { opacity: .55; cursor: not-allowed; }

.nfc-estado { display: inline-block; padding: .18rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--c-superficie-media, #eef0ee); color: var(--c-texto, #111); }
.nfc-estado--activa, .nfc-estado--verificada { background: var(--c-exito-fondo, #e7f6ee); color: var(--c-exito, #166534); }
.nfc-estado--distribuidor, .nfc-estado--reservada, .nfc-estado--nfc_programada { background: var(--c-destacado-fondo, #eaf2ff); color: var(--c-destacado-texto, #1e3a8a); }
.nfc-estado--suspendida, .nfc-estado--generada { background: var(--c-aviso-fondo, #fff6e0); color: var(--c-aviso, #92400e); }
.nfc-estado--retirada, .nfc-estado--defectuosa { background: var(--c-error-fondo, #fdecec); color: var(--c-error, #991b1b); }

.nfc-tabla-wrap { overflow-x: auto; border: 1px solid var(--c-borde, #e5e7eb); border-radius: .8rem; background: var(--c-superficie, #fff); }
.nfc-tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.nfc-tabla th, .nfc-tabla td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--c-borde-suave, #f0f1f0); vertical-align: middle; }
.nfc-tabla th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-texto-tenue, #6b7280); background: var(--c-superficie-suave, #fafafa); }
.nfc-tabla tr:last-child td { border-bottom: 0; }
.nfc-tabla .num { font-variant-numeric: tabular-nums; }
.nfc-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .04em; }
.nfc-trunca { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.nfc-tenue { color: var(--c-texto-tenue, #6b7280); }
.nfc-paginas { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; align-items: center; }

.nfc-qr { width: 100%; max-width: 180px; aspect-ratio: 1; background: #fff; border-radius: .6rem; padding: .3rem; border: 1px solid var(--c-borde, #e5e7eb); }
.nfc-qr svg { width: 100%; height: 100%; display: block; }
.nfc-copiable { display: flex; gap: .4rem; align-items: center; background: var(--c-superficie-suave, #f6f7f6); border-radius: .6rem; padding: .45rem .6rem; font-size: .85rem; word-break: break-all; }
.nfc-lista-def { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.nfc-lista-def dt { color: var(--c-texto-tenue, #6b7280); }
.nfc-lista-def dd { margin: 0; }

/* ---- Pantallas móviles de cuenta y distribuidor ---- */
.nfc-app { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.nfc-app h1 { font-size: 1.5rem; margin: .25rem 0 1rem; line-height: 1.2; }
.nfc-tarjeta-item { display: grid; grid-template-columns: 1fr auto; gap: .35rem .75rem; align-items: center; padding: 1rem; border: 1px solid var(--c-borde, #e5e7eb); border-radius: 1rem; background: var(--c-superficie, #fff); margin-bottom: .75rem; text-decoration: none; color: inherit; }
.nfc-tarjeta-item__titulo { font-weight: 700; font-size: 1.02rem; }
.nfc-tarjeta-item__destino { grid-column: 1 / -1; font-size: .85rem; color: var(--c-texto-suave, #4b5563); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfc-contadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1rem; }
.nfc-contadores div { text-align: center; padding: .8rem .4rem; border-radius: .9rem; background: var(--c-superficie-suave, #f6f7f6); }
.nfc-contadores strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.nfc-contadores span { font-size: .78rem; color: var(--c-texto-suave, #4b5563); }