/* NX::Appointment frontend — Fase 5: formulario y UX responsive */
.nxap-wrap{
    --nxap-primary:#0e4662;
    --nxap-accent:#0ea5e9;
    --nxap-store-data:#81846c;
    --nxap-danger:#dc2626;
    --nxap-text:#101828;
    --nxap-muted:#667085;
    --nxap-border:#d0d5dd;
    width:min(1200px,100%);
    margin:30px auto;
    padding:0 20px;
    box-sizing:border-box;font-family:inherit
}
a,a:hover,a:focus{
	text-decoration:none
}
a:hover,a:focus{
	color:var(--nxap-text)
}
a,button,select{
	cursor:pointer
}
a:focus,button:focus,select:focus{
	-moz-outline-style: none !important;
	outline:none !important;
}
.nxap-wrap *,.nxap-wrap *::before,.nxap-wrap *::after{box-sizing:border-box}
.nxap-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:32px;box-shadow:0 14px 45px rgba(15,23,42,.08)}
.nxap-card-notice{text-align:center}

/* Step indicator */
.nxap-steps{display:flex;align-items:center;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.nxap-step{display:flex;align-items:center;gap:8px;opacity:.55;transition:opacity .2s}
.nxap-step-active,.nxap-step-done{opacity:1}
.nxap-step-badge{width:26px;height:26px;padding:0;justify-content:center;font-size:13px}
.nxap-step-label{font-size:13px;font-weight:600;color:var(--nxap-muted)}
.nxap-step-active .nxap-step-label{color:var(--nxap-text)}
.nxap-step-line{flex:1 1 24px;max-width:48px;height:2px;background:#e5e7eb;border-radius:2px}

.nxap-heading{margin-bottom:26px}
.nxap-heading h2,.nxap-heading h3{margin:12px 0 8px;font-size:32px;line-height:1.15;color:var(--nxap-text)}
.nxap-heading p{margin:0;color:var(--nxap-muted);font-size:16px;line-height:1.6}

/* Badges - rounded, distinct colors */
.nxap-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 20px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}
.nxap-badge-blue{background:#d6efff;color:#0369a1}
.nxap-badge-purple{background:#ede9fe;color:#6d28d9}
.nxap-badge-green{background:#dcfce7;color:#15803d}
.nxap-badge-yellow{background:#fef3c7;color:#a16207}
.nxap-badge-red{background:#fee2e2;color:#b91c1c}
.nxap-badge-gray{background:#f1f5f9;color:#475569}

.nxap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nxap-form label,.nxap-field{display:flex;flex-direction:column;gap:7px;position:relative}
.nxap-form label>span,.nxap-field>span{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#344054}
.nxap-form label>span svg,.nxap-field>span svg{width:15px;height:15px;flex:0 0 auto;color:var(--nxap-accent)}
.nxap-required-mark{color:var(--nxap-danger);font-style:normal;margin-left:1px}

.nxap-form input[type=text],.nxap-form input[type=email],.nxap-form input[type=tel],.nxap-form input[type=number],.nxap-form input[type=url],.nxap-form input[type=password],.nxap-form input[type=date],.nxap-form input[type=time],.nxap-form select,.nxap-form textarea{
    width:100%;border:1px solid transparent;background:#f5f7fa;border-radius:10px;padding:9px 13px;
    min-height:40px;font:inherit;font-size:14.5px;color:var(--nxap-text);outline:none;transition:border-color .2s,box-shadow .2s,background-color .2s;
    appearance:none;-webkit-appearance:none;
}
.nxap-form input::placeholder,.nxap-form textarea::placeholder{color:#98a2b3;font-weight:400}
.nxap-form select{padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.nxap-form select:disabled{background-color:#f1f5f9;color:#98a2b3;cursor:not-allowed}

.nxap-form input:hover,.nxap-form select:hover,.nxap-form textarea:hover{background:#eef1f5}
.nxap-form input:focus,.nxap-form select:focus,.nxap-form textarea:focus{background:#fff;border-color:var(--nxap-accent);box-shadow:0 0 0 3px rgba(14,165,233,.14)}

.nxap-pin-input input{letter-spacing:6px;font-weight:700;text-align:center}

/* Field-level errors */
.nxap-field-error{font-size:12px;color:var(--nxap-danger);min-height:14px;display:block}
.nxap-field.has-error input,.nxap-field.has-error select,.nxap-field.has-error textarea,.nxap-consent.has-error{border-color:var(--nxap-danger)!important;background:#fff5f5}
.nxap-field.has-error input:focus,.nxap-field.has-error select:focus{box-shadow:0 0 0 3px rgba(220,38,38,.14)}

.nxap-consent{margin:20px 0;color:var(--nxap-muted);font-size:13px}
.nxap-consent label{display:block}
.nxap-consent label>span{display:inline-flex;align-items:flex-start;gap:6px}
.nxap-consent label>span svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--nxap-primary)}
.nxap-consent input{margin-right:7px}

.nxap-button{position:relative;border:0;border-radius:999px;background:#536375;color:#fff;padding:10px 20px;font-weight:700;cursor:pointer;transition:transform .15s,opacity .15s;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42spx}
.nxap-button:hover{transform:translateY(-1px);opacity:.94}
.nxap-button:disabled{cursor:not-allowed;opacity:.75;transform:none}
.nxap-button-light{background:#eef2f6;color:#344054;margin-left:8px}
.nxap-spinner{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:nxap-spin .7s linear infinite}
.nxap-button.is-loading .nxap-spinner{display:inline-block}
.nxap-button-light .nxap-spinner{border-color:rgba(52,64,84,.25);border-top-color:#344054}
@keyframes nxap-spin{to{transform:rotate(360deg)}}

.nxap-message{margin-top:18px;padding:12px 14px;border-radius:10px;display:none;font-size:14px}
.nxap-message.is-visible{display:block}
.nxap-message.is-error{background:#fee2e2;color:#991b1b}
.nxap-message.is-success{background:#dcfce7;color:#166534}

.nxap-pin-form{max-width:520px}
.nxap-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}

.nxap-success{text-align:center;padding:12px 0}
.nxap-success h3{margin:12px 0 8px;font-size:26px;color:var(--nxap-text)}
.nxap-success p{color:var(--nxap-muted);font-size:15px}

@media(max-width:700px){
    .nxap-wrap{padding:0 10px}
    .nxap-card{padding:22px;border-radius:14px}
    .nxap-grid{grid-template-columns:1fr}
    .nxap-heading h2,.nxap-heading h3{font-size:24px}
    .nxap-button{width:100%}
    .nxap-button-light{margin:10px 0 0}
    .nxap-steps{gap:6px}
    .nxap-step-label{display:none}
    .nxap-step-line{max-width:28px}
}

@media(max-width:420px){
    .nxap-card{padding:16px}
}

/* 24-hour time presentation */
.nxap-time-format{font-size:.78em;font-weight:600;opacity:.7}


/* Modern six-digit PIN input */
.nxap-pin-section{margin-bottom:22px}
.nxap-pin-label{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:13px;font-weight:700;color:#344054}
.nxap-pin-label svg{width:15px;height:15px;color:var(--nxap-accent)}
.nxap-pin-boxes{display:flex;gap:10px;align-items:center}
.nxap-pin-digit{width:48px!important;min-width:48px!important;height:54px!important;min-height:54px!important;padding:0!important;border:1px solid var(--nxap-border)!important;border-radius:14px!important;background:#fff!important;color:var(--nxap-text)!important;font-size:24px!important;font-weight:800!important;text-align:center!important;letter-spacing:0!important;box-shadow:0 4px 12px rgba(15,23,42,.05);outline:none;transition:border-color .2s,box-shadow .2s,transform .15s}
.nxap-pin-digit:focus{border-color:var(--nxap-accent)!important;box-shadow:0 0 0 4px rgba(14,165,233,.14),0 6px 16px rgba(15,23,42,.07);transform:translateY(-1px)}
.nxap-pin-section>.nxap-field-error{margin-top:8px}
.nxap-confirmation-card{margin:24px auto 0;max-width:720px;text-align:left;border:1px solid #e5e7eb;border-radius:18px;padding:22px;background:#f8fafc}
.nxap-confirmation-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.nxap-confirmation-head strong{display:block;margin-top:8px;font-size:20px;letter-spacing:.5px;color:var(--nxap-text)}
.nxap-confirmation-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
.nxap-confirmation-details>div{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px}
.nxap-confirmation-details dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--nxap-muted);font-weight:700;margin-bottom:5px}
.nxap-confirmation-details dd{margin:0;color:var(--nxap-text);font-size:14px;font-weight:600;word-break:break-word}
.nxap-pdf-button{width:100%;margin-top:18px;text-decoration:none}
@media(max-width:520px){.nxap-pin-boxes{gap:6px}.nxap-pin-digit{width:42px!important;min-width:42px!important;height:50px!important;min-height:50px!important}.nxap-confirmation-details{grid-template-columns:1fr}}
@media(max-width:360px){.nxap-pin-boxes{gap:4px}.nxap-pin-digit{width:39px!important;min-width:39px!important}}

/* NX::Appointment v1.9.1 — user comment (compact) and linked plugin badge */
.nxap-comment-field{grid-column:1/-1}
.nxap-comment-field textarea{resize:vertical;min-height:56px;max-height:120px}
.nxap-word-counter{margin-top:4px;text-align:right;font-size:12px;color:var(--nxap-muted)}
.nxap-word-counter.is-limit{color:#b42318;font-weight:700}

.nxap-frontend-plugin-badge-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:14px 0 0 auto;width:max-content;max-width:100%}
.nxap-frontend-plugin-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background-color:rgba(14,165,233,.07);border:1px solid rgba(14,165,233,.3);color:var(--nxap-text);font-size:12px;font-weight:700;text-decoration:none;transition:background-color .2s,transform .15s}
.nxap-frontend-plugin-badge:hover{background-color:rgba(14,165,233,.14);transform:translateY(-1px)}
.nxap-frontend-plugin-badge svg{width:13px;height:13px;color:var(--nxap-accent);flex:0 0 auto}
.nxap-frontend-plugin-badge-version{font-weight:600;color:var(--nxap-muted)}
.nxap-frontend-plugin-credit{font-size:11px;font-weight:600;color:var(--nxap-muted);text-decoration:none}
.nxap-frontend-plugin-credit:hover{color:var(--nxap-accent)}

/* ── Store picker (NX::Appointment-Pro) ───────────────────────────────── */
.nxap-stores-heading{text-align:center;max-width:720px;margin:0 auto 32px}
.nxap-store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.nxap-store-card{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:26px;box-shadow:0 10px 32px rgba(15,23,42,.07);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.nxap-store-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(15,23,42,.13);border-color:#536375;}
.nxap-store-card-head{display:flex;align-items:center;gap:14px}
.nxap-store-card-head h3{margin:0;font-size:20px;line-height:1.25;color:var(--nxap-text)}
.nxap-store-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,var(--nxap-primary),var(--nxap-accent));color:#fff}
.nxap-store-icon svg{width:24px;height:24px}
.nxap-store-meta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;flex:1 1 auto}
.nxap-store-meta li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--nxap-muted)}

.nxap-store-meta svg,.nxap-store-address svg{
    width:22px;
    height:22px;
    flex:0 0 auto;
    position:relative;
    top:3px;
    color:var(--nxap-store-data);
    stroke-width: 1.4;
}
.nxap-store-meta a{color:var(--nxap-text);text-decoration:none;font-weight:600}
.nxap-store-meta a:hover{color:var(--nxap-primary)}

.nxap-store-button{display:inline-flex;align-items:center;justify-content:center;width:100%;text-decoration:none;text-align:center}
a.nxap-button.nxap-store-button,
a.nxap-button.nxap-store-button:link,
a.nxap-button.nxap-store-button:visited,
a.nxap-button.nxap-store-button:hover,
a.nxap-button.nxap-store-button:focus,
a.nxap-button.nxap-store-button:active{color:#fff!important;text-decoration:none}
a.nxap-button.nxap-store-button:visited .nxap-button-text,
a.nxap-button.nxap-store-button:hover .nxap-button-text{color:#fff!important}
.nxap-store-button:hover{opacity:.92}

.nxap-store-address{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px !important;font-size:15px}
.nxap-store-address span{
    background-color: #f9ffd0;
    border: 1px solid #cae127;
    color:#6c7b02;
    font-weight:600;
    border-radius: 999px;
    padding: 1px 10px;
}
.nxap-back-link{display:inline-block;margin-bottom:10px;font-size:14px;font-weight:600;color:var(--nxap-primary);text-decoration:none}
.nxap-back-link:hover{color:var(--nxap-accent)}
@media (max-width:600px){.nxap-store-grid{grid-template-columns:1fr}.nxap-store-card{padding:22px}}

/* NX::Appointment-Pro v2.4.1 — store logo + map link */
.nxap-store-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:80px;height:80px;border-radius:14px;background:#fff;border:1px solid #d5d8dd;overflow:hidden;padding:6px;box-sizing:border-box}
.nxap-store-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.nxap-store-meta a.nxap-map-link{
    text-decoration:none;
    text-decoration-color:rgb(43, 87, 131);
    text-underline-offset:3px;
}
.nxap-store-meta a.nxap-map-link:hover{
    text-decoration:underline;
    color:var(--nxap-primary);
    text-decoration-color:currentColor;
    text-underline-offset:3px;}

/* v2.4.1 — identical field background everywhere (also when the browser autofills) */
.nxap-form input:-webkit-autofill,.nxap-form input:-webkit-autofill:hover,.nxap-form input:-webkit-autofill:focus,.nxap-form textarea:-webkit-autofill,.nxap-form select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #f5f7fa inset;box-shadow:0 0 0 1000px #f5f7fa inset;-webkit-text-fill-color:var(--nxap-text)}
.nxap-form input[readonly],.nxap-form input[disabled]{background:#f5f7fa}
