:root {
    /* Fondo/superficies claros de marca */
    --color-bg: #FFFFFF;
    --color-surface: #F7F9FC;
    --color-surface-alt: #EEF2F7;
    --color-border: #E1E7F0;

    /* Texto */
    --color-text: #12202F;
    --color-text-muted: #5B6B7F;

    /* Acento de marca (turquesa) */
    --color-primary: #2ECEC6;
    --color-primary-dark: #24A8A1;
    --color-primary-contrast: #0B1729;

    /* Azul de marca — uso moderado (bordes, detalles chicos), nunca como fondo general */
    --color-accent-blue: #BFE3E0;

    --color-success: #1A9E6B;
    --color-error: #DC3D3D;
    --color-warning: #B4790A;

    --color-info-bg: rgba(46, 206, 198, 0.12);
    --color-error-bg: rgba(220, 61, 61, 0.10);
    --color-warning-bg: rgba(180, 121, 10, 0.10);

    --radius: 12px;
}

* {
    box-sizing: border-box;
}

/* Regla global, a propósito arriba de todo: cualquier clase de acá abajo que fije "display"
   sin condicionarlo (.btn, .url-preview, .result-rating, .account-overlay, etc.) pisa el
   "display: none" que el navegador aplica por defecto al atributo [hidden] — CSS de autor
   le gana al del user-agent aunque la especificidad "se vea" igual. Sin esto, varios
   elementos que el wizard oculta/muestra dinámicamente (botones de cancelar/saltar, el
   bloque de rating, el de verificación) quedaban visibles desde el arranque sin importar
   el valor de .hidden en JS. Con !important, esta regla gana siempre, para cualquier
   elemento oculto con el atributo, presente o futuro — no hace falta acordarse de agregar
   un "X[hidden] { display: none }" por cada clase nueva que use "display". */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
}

.app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    padding: 24px 20px 12px;
    text-align: center;
}

.brand {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    line-height: 0;
}

.brand-logo {
    height: 42px;
    width: auto;
    max-width: 100%;
    display: block;
}

.app-header h1 {
    font-size: 1.25rem;
    margin: 0 0 18px;
    font-weight: 700;
}

.steps {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

.step {
    flex: 1;
    text-align: center;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    position: relative;
    border-top: 3px solid var(--color-border);
    padding-top: 8px;
}

.step span {
    display: block;
    margin-top: 4px;
}

.step.is-active,
.step.is-complete {
    color: var(--color-primary);
    border-top-color: var(--color-primary);
}

.app-main {
    flex: 1;
    padding: 12px 20px 40px;
    text-align: left;
}

.panel {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(18, 32, 47, 0.06);
}

.panel.is-active {
    display: block;
}

.panel h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.search-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
    flex: 1;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-surface-alt);
    color: var(--color-text);
    resize: vertical;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="password"]::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
}

.btn-primary:disabled {
    background: rgba(46, 206, 198, 0.3);
    color: rgba(11, 23, 41, 0.6);
    cursor: not-allowed;
}

.btn-secondary {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-text {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: underline;
}

.btn-large {
    width: 100%;
    padding: 16px;
    font-size: 1.05rem;
    margin-top: 8px;
}

.btn-small {
    padding: 8px 12px;
    font-size: 0.85rem;
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.actions .btn {
    flex: 1;
}

.results-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-item {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-alt);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
}

.result-item:hover,
.result-item:focus {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.result-name {
    font-weight: 600;
    display: block;
}

.result-address {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    display: block;
    margin-top: 2px;
}

.result-rating {
    color: var(--color-warning);
    font-size: 0.82rem;
    font-weight: 600;
    display: block;
    margin-top: 4px;
}

.business-card {
    background: var(--color-info-bg);
    border: 1px solid var(--color-accent-blue);
    border-radius: 8px;
    padding: 14px;
    margin-top: 12px;
}

.business-name {
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-text);
}

.business-address {
    margin: 0;
    color: var(--color-text-muted);
}

.url-preview {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.url-preview-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.url-preview code {
    display: block;
    word-break: break-all;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.status {
    margin-top: 14px;
    font-size: 0.9rem;
}

.status.is-loading {
    color: var(--color-text-muted);
}

.status.is-success {
    color: var(--color-success);
    font-weight: 600;
}

.status.is-error {
    color: var(--color-error);
    font-weight: 600;
}

.banner {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 0 0 16px;
}

.banner-error {
    background: var(--color-error-bg);
    color: var(--color-error);
}

.banner-info {
    background: var(--color-info-bg);
    color: var(--color-primary);
}

.banner-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid rgba(245, 185, 77, 0.35);
}

.instructions {
    padding-left: 20px;
    margin: 12px 0;
    color: var(--color-text);
}

.instructions li {
    margin-bottom: 8px;
}

.success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-primary-contrast);
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

#panel-done {
    text-align: center;
}

#panel-done .business-card,
#panel-done .url-preview {
    text-align: left;
}

.app-footer {
    padding: 28px 20px 32px;
    text-align: center;
}

.footer-brand {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.footer-copyright {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ---------- "¿Ya tenés tu cartel?" ---------- */

.account-entry {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.tag-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tag-list-item {
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-radius: 8px;
    padding: 14px;
}

.tag-list-item .business-name {
    margin-bottom: 2px;
}

.tag-list-item .tag-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin: 4px 0 10px;
}

/* ---------- Overlay de cuenta ("¿ya tenés tu cartel?") ---------- */

.account-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 23, 41, 0.85);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    z-index: 100;
}

.account-overlay-inner {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    max-width: 440px;
    width: 100%;
    padding: 20px;
    margin: auto;
}

.account-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.account-manual-url {
    margin-top: 16px;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
}

.account-manual-url summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.account-extras {
    margin-top: 24px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

.account-extras h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.account-extras form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.account-extras label {
    margin-top: 8px;
}

.input-group {
    display: flex;
    align-items: stretch;
}

.input-group .input-prefix {
    display: flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 0.95rem;
    white-space: nowrap;
}

.input-group input {
    border-radius: 0 8px 8px 0 !important;
}

@media (min-width: 600px) {
    .app-header {
        padding-top: 36px;
    }
}