/* ═══════════════════════════════════════════════════════════════
   ESTILOS OFICIALES — PLUGIN WORDPRESS SINAL CTM
   Compatible con Elementor Free, Gutenberg & Temas WordPress
   ═══════════════════════════════════════════════════════════════ */

:root {
    --sinal-primary: #1d467c;
    --sinal-primary-light: #255899;
    --sinal-primary-dark: #122849;
    --sinal-accent: #d32f2f;
    --sinal-accent-hover: #b71c1c;
    --sinal-gold: #0c5e1c;
    --sinal-gold-light: #e8f5e9;
    --sinal-text-dark: #111827;
    --sinal-text-light: #4b5563;
    --sinal-bg-light: #f8fafc;
    --sinal-border: rgba(148, 163, 184, 0.2);
    --sinal-radius-lg: 20px;
    --sinal-radius-md: 14px;
    --sinal-radius-sm: 8px;
    --sinal-shadow: 0 10px 30px -10px rgba(29, 70, 124, 0.1);
    --sinal-shadow-lg: 0 20px 40px -12px rgba(29, 70, 124, 0.2);
    --sinal-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sinal-wrap {
    font-family: 'DM Sans', sans-serif;
    color: var(--sinal-text-dark);
    max-width: 1150px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.sinal-wrap h1, .sinal-wrap h2, .sinal-wrap h3, .sinal-wrap h4 {
    font-family: 'Outfit', sans-serif;
    color: var(--sinal-primary);
    font-weight: 700;
}

/* CONTENEDOR DEL FORMULARIO MULTI-ROL */
.sinal-card-box {
    background: white;
    border-radius: var(--sinal-radius-lg);
    border: 1px solid var(--sinal-border);
    box-shadow: var(--sinal-shadow-lg);
    padding: 35px;
    margin-bottom: 40px;
}

.sinal-tabs-nav {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--sinal-border);
    padding-bottom: 12px;
    overflow-x: auto;
}

.sinal-tab-btn {
    background: #f1f5f9;
    color: var(--sinal-primary);
    border: 1px solid var(--sinal-border);
    padding: 12px 22px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--sinal-transition);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.sinal-tab-btn.active {
    background: var(--sinal-primary);
    color: white;
    border-color: var(--sinal-primary);
    box-shadow: 0 4px 14px rgba(29, 70, 124, 0.3);
}

.sinal-tab-content {
    display: none;
}

.sinal-tab-content.active {
    display: block;
    animation: sinalFadeIn 0.35s ease;
}

@keyframes sinalFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FORMULARIOS DE REGISTRO */
.sinal-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .sinal-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sinal-field-full {
    grid-column: 1 / -1;
}

.sinal-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sinal-primary);
    margin-bottom: 6px;
}

.sinal-input, .sinal-select, .sinal-textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--sinal-radius-sm);
    border: 1px solid #cbd5e1;
    font-size: 0.9rem;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    box-sizing: border-box;
    transition: var(--sinal-transition);
}

.sinal-input:focus, .sinal-select:focus, .sinal-textarea:focus {
    border-color: var(--sinal-primary);
    box-shadow: 0 0 0 3px rgba(29, 70, 124, 0.15);
}

.sinal-btn-submit {
    background: var(--sinal-accent);
    color: white;
    padding: 14px 28px;
    border-radius: 30px;
    border: none;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--sinal-transition);
    box-shadow: 0 4px 14px rgba(211, 47, 47, 0.3);
    width: 100%;
    margin-top: 15px;
}

.sinal-btn-submit:hover {
    background: var(--sinal-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.4);
}

/* MENSAJE DE RESPUESTA AJAX */
.sinal-alert {
    padding: 14px;
    border-radius: var(--sinal-radius-sm);
    margin-top: 15px;
    font-size: 0.88rem;
    font-weight: 600;
    display: none;
}

.sinal-alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.sinal-alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ═══════════════════════════════════════════════════════════════
   QA 2.1.8 — Pantallas funcionales, modales y accesibilidad
   Todo queda encapsulado para no alterar los HTML independientes.
   ═══════════════════════════════════════════════════════════════ */
:root { --sinal-header-offset: 76px; }

.sinal-system-screen,
.sinal-system-screen * { box-sizing: border-box; }

.sinal-system-screen {
    width: 100%;
    min-height: calc(100vh - var(--sinal-header-offset, 76px));
    padding: calc(var(--sinal-header-offset, 76px) + 24px) 20px 56px;
    background: var(--sinal-bg-light);
    font-family: 'DM Sans', sans-serif;
    color: var(--sinal-text-dark);
    overflow: visible;
}

.sinal-system-inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.sinal-system-screen .sinal-wrap { max-width: 100%; padding: 0; }

.sinal-section-heading { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.sinal-section-heading h2 { margin: 6px 0 8px; font: 800 clamp(1.65rem, 3vw, 2.35rem)/1.15 'Outfit', sans-serif; color: var(--sinal-primary); }
.sinal-section-heading p { margin: 0; color: var(--sinal-text-light); line-height: 1.6; }
.sinal-eyebrow { display: inline-block; color: var(--sinal-accent); font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

.sinal-registration-card, .sinal-auth-page-card, .sinal-reset-card { max-width: 900px; margin: 0 auto; }
.sinal-auth-page-card { max-width: 560px; }
.sinal-reset-card { max-width: 620px; }

.sinal-form-group { margin-bottom: 16px; }
.sinal-form-intro { margin: 0 0 16px; color: var(--sinal-text-light); font-size: .9rem; }
.sinal-form-card .sinal-alert, .sinal-auth-component .sinal-alert, .sinal-request-form .sinal-alert, .sinal-reset-form .sinal-alert { width: 100%; }
.sinal-btn-submit[disabled] { cursor: wait; opacity: .68; transform: none; }
.sinal-button-link { display: inline-flex; justify-content: center; align-items: center; text-decoration: none; width: auto; }
.sinal-secondary-button { display:inline-flex; justify-content:center; align-items:center; padding:12px 22px; border:1px solid var(--sinal-border); border-radius:30px; color:var(--sinal-primary); background:#fff; font-weight:700; text-decoration:none; }
.sinal-inline-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:18px; }
.sinal-inline-action, .sinal-link-button { appearance:none; border:0; background:none; padding:0; color:var(--sinal-primary); font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; }
.sinal-link-button { display:block; margin:12px auto 0; font-size:.82rem; }
.sinal-hp-trap { position:absolute !important; left:-99999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }
.sinal-consent-row { display:flex; align-items:flex-start; gap:9px; font-size:.82rem; color:var(--sinal-text-light); line-height:1.45; }
.sinal-consent-row input { margin-top:3px; flex:0 0 auto; }
.sinal-consent-row a { color:var(--sinal-primary); }

.sinal-auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px; background:#eef2f7; border-radius:14px; margin-bottom:20px; }
.sinal-auth-tab { border:0; border-radius:10px; padding:11px 10px; background:transparent; color:#64748b; font-weight:800; cursor:pointer; }
.sinal-auth-tab.is-active { background:#fff; color:var(--sinal-primary); box-shadow:0 3px 12px rgba(15,23,42,.08); }
.sinal-auth-form { display:none; }
.sinal-auth-form.is-active { display:block; }
.sinal-turnstile-slot { margin:12px 0; min-height:66px; }

.sinal-empty-state { max-width:760px; margin:0 auto; padding:42px 28px; border:1px dashed #cbd5e1; border-radius:var(--sinal-radius-lg); background:#fff; text-align:center; }
.sinal-empty-state h3 { margin:0 0 8px; font-family:'Outfit',sans-serif; color:var(--sinal-primary); }
.sinal-empty-state p { color:var(--sinal-text-light); }
.sinal-dashboard-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }

.sinal-modal[hidden] { display:none !important; }
.sinal-modal { position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:20px; font-family:'DM Sans',sans-serif; }
.sinal-modal-backdrop { position:absolute; inset:0; background:rgba(2,6,23,.72); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.sinal-modal-dialog { position:relative; z-index:1; width:min(100%, 590px); box-sizing:border-box; max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow:auto; background:#fff; border-radius:22px; padding:30px; box-shadow:0 30px 80px rgba(2,6,23,.38); }
.sinal-auth-modal-dialog { width:min(100%, 520px); }
.sinal-modal-close { position:absolute; top:12px; right:12px; width:38px; height:38px; border:0; border-radius:50%; background:#eef2f7; color:#334155; font-size:1.5rem; line-height:1; cursor:pointer; }
.sinal-modal-heading { padding-right:42px; margin-bottom:22px; }
.sinal-modal-heading h2 { margin:4px 0 6px; color:var(--sinal-primary); font:800 1.7rem/1.15 'Outfit',sans-serif; }
.sinal-modal-heading p { margin:0; color:var(--sinal-text-light); }
body.sinal-modal-open { overflow:hidden !important; }

.sinal-btn-submit:focus-visible, .sinal-secondary-button:focus-visible,
.sinal-inline-action:focus-visible, .sinal-link-button:focus-visible,
.sinal-auth-tab:focus-visible, .sinal-modal-close:focus-visible,
.sinal-directory-actions a:focus-visible, .sinal-directory-actions button:focus-visible {
    outline:3px solid rgba(29,70,124,.35);
    outline-offset:3px;
}

.sinal-profile-grid, .sinal-directory-grid { display:grid; grid-template-columns:1fr; gap:22px; }
.sinal-directory-card { background:#fff; border:1px solid var(--sinal-border); border-radius:var(--sinal-radius-md); overflow:hidden; box-shadow:var(--sinal-shadow); display:flex; flex-direction:column; }
.sinal-directory-card-media { aspect-ratio:16/10; background:linear-gradient(135deg,var(--sinal-primary),var(--sinal-primary-dark)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sinal-directory-card-media img { width:100%; height:100%; object-fit:cover; }
.sinal-directory-initials { width:82px; height:82px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.15); color:#fff; font:800 1.8rem 'Outfit',sans-serif; border:2px solid rgba(255,255,255,.35); }
.sinal-directory-card-body { padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sinal-directory-card-body h3 { margin:0; color:var(--sinal-primary); font:800 1.2rem/1.25 'Outfit',sans-serif; }
.sinal-directory-meta { display:flex; flex-direction:column; gap:6px; color:var(--sinal-text-light); font-size:.86rem; }
.sinal-directory-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:auto; padding-top:10px; }
.sinal-directory-actions a, .sinal-directory-actions button { display:flex; align-items:center; justify-content:center; min-height:42px; padding:9px 12px; border-radius:10px; text-align:center; text-decoration:none; font-weight:800; font-size:.82rem; cursor:pointer; }
.sinal-directory-actions a { color:var(--sinal-primary); background:#eef4fb; border:1px solid #dbe7f5; }
.sinal-directory-actions button { color:#fff; background:var(--sinal-accent); border:1px solid var(--sinal-accent); }

@media (min-width:700px) {
    .sinal-profile-grid, .sinal-directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) {
    .sinal-directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:782px) {
    .sinal-system-screen { padding-top:calc(var(--sinal-header-offset, 72px) + 18px); padding-left:14px; padding-right:14px; }
    .sinal-card-box { padding:22px 16px; border-radius:16px; }
    .sinal-modal { padding:10px; align-items:flex-end; }
    .sinal-modal-dialog { box-sizing:border-box; max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); border-radius:20px 20px 10px 10px; padding:25px 18px; }
}
@media (max-width:560px) {
    .sinal-form-grid, .sinal-dashboard-summary-grid { grid-template-columns:1fr !important; }
    .sinal-field-full { grid-column:auto; }
    .sinal-directory-actions { grid-template-columns:1fr; }
}

/* 2.1.8 QA — filtros de catálogo */
.sinal-catalog-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:#17345d}
.sinal-catalog-filters input,.sinal-catalog-filters select{width:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:#fff;color:#0f172a;box-sizing:border-box}
.sinal-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;padding:0 10px;border:1px solid #cbd5e1;border-radius:8px;text-decoration:none;background:#fff;color:#1d467c}
.sinal-pagination .page-numbers.current{background:#1d467c;color:#fff;border-color:#1d467c}
@media (max-width:1024px){.sinal-catalog-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:640px){.sinal-catalog-filters{grid-template-columns:1fr!important}.sinal-catalog-filters>div{flex-wrap:wrap}.sinal-catalog-filters .sinal-btn-submit,.sinal-catalog-filters .sinal-button-link{width:100%;text-align:center;justify-content:center}}
@media (max-width:640px){.sinal-verification-card{grid-template-columns:1fr!important}.sinal-verification-card>div:first-child{max-width:180px;margin:0 auto}}