/* ==========================================================================
   Servicios SM — CSS Base
   Paleta: primario #0F2557 | acento #F97316 | fondo #F8FAFC | texto #1E293B
   Prefijo .ssm- en todas las clases para evitar conflictos con Elementor
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables CSS
   -------------------------------------------------------------------------- */
:root {
    --ssm-primario:     #0F2557;
    --ssm-primario-dark: #091a40;
    --ssm-acento:       #F97316;
    --ssm-acento-dark:  #ea6a0a;
    --ssm-fondo:        #F8FAFC;
    --ssm-texto:        #1E293B;
    --ssm-texto-suave:  #64748B;
    --ssm-borde:        #E2E8F0;
    --ssm-exito:        #16A34A;
    --ssm-error:        #DC2626;
    --ssm-radio:        8px;
    --ssm-sombra:       0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --ssm-sombra-md:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
    --ssm-transicion:   200ms ease;
}

/* --------------------------------------------------------------------------
   Wrapper global de página
   -------------------------------------------------------------------------- */
.ssm-wrapper {
    background: var(--ssm-fondo);
    min-height: 60vh;
    padding: 40px 16px;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ssm-texto);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.ssm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--ssm-radio);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--ssm-transicion), opacity var(--ssm-transicion);
}

.ssm-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ssm-btn--primario {
    background: var(--ssm-acento);
    color: #fff;
}

.ssm-btn--primario:hover:not(:disabled) {
    background: var(--ssm-acento-dark);
}

.ssm-btn--secundario {
    background: transparent;
    color: var(--ssm-primario);
    border: 2px solid var(--ssm-primario);
}

.ssm-btn--secundario:hover:not(:disabled) {
    background: var(--ssm-primario);
    color: #fff;
}

.ssm-btn--full {
    width: 100%;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.ssm-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.ssm-form-field label {
    font-weight: 600;
    font-size: .9rem;
    color: var(--ssm-texto);
}

.ssm-form-field label span[aria-hidden] {
    color: var(--ssm-error);
    margin-left: 2px;
}

.ssm-form-field input[type="text"],
.ssm-form-field input[type="email"],
.ssm-form-field input[type="password"],
.ssm-form-field input[type="tel"],
.ssm-form-field textarea,
.ssm-form-field select {
    padding: 10px 14px;
    border: 1.5px solid var(--ssm-borde);
    border-radius: var(--ssm-radio);
    font-size: 1rem;
    color: var(--ssm-texto);
    background: #fff;
    transition: border-color var(--ssm-transicion), box-shadow var(--ssm-transicion);
    width: 100%;
    box-sizing: border-box;
}

.ssm-form-field input:focus,
.ssm-form-field textarea:focus,
.ssm-form-field select:focus {
    outline: none;
    border-color: var(--ssm-primario);
    box-shadow: 0 0 0 3px rgba(15,37,87,.12);
}

.ssm-form-hint {
    font-size: .8rem;
    color: var(--ssm-texto-suave);
}

.ssm-form-row {
    display: grid;
    gap: 16px;
}

.ssm-form-row--dos-cols {
    grid-template-columns: 1fr 1fr;
}

.ssm-form-row--entre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.ssm-fieldset {
    border: none;
    padding: 0;
    margin: 0 0 20px;
}

.ssm-fieldset__legend {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
    display: block;
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */
.ssm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mensajes de retroalimentación
   -------------------------------------------------------------------------- */
.ssm-mensaje {
    padding: 12px 16px;
    border-radius: var(--ssm-radio);
    font-size: .95rem;
    margin-bottom: 20px;
    font-weight: 500;
}

.ssm-mensaje--exito {
    background: #dcfce7;
    color: #166534;
    border-left: 4px solid var(--ssm-exito);
}

.ssm-mensaje--error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid var(--ssm-error);
}

/* --------------------------------------------------------------------------
   Auth — formularios de registro / login / recuperación
   -------------------------------------------------------------------------- */
.ssm-auth {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.ssm-auth__container {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--ssm-sombra-md);
    padding: 40px 36px;
}

.ssm-auth__titulo {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ssm-primario);
    margin: 0 0 6px;
}

.ssm-auth__subtitulo {
    color: var(--ssm-texto-suave);
    margin: 0 0 28px;
    font-size: .95rem;
}

.ssm-auth__subtitulo a,
.ssm-link--secundario {
    color: var(--ssm-acento);
    text-decoration: none;
    font-weight: 600;
}

.ssm-auth__subtitulo a:hover,
.ssm-link--secundario:hover {
    text-decoration: underline;
}

.ssm-auth__volver {
    text-align: center;
    margin-top: 20px;
    font-size: .9rem;
}

/* Tarjetas de selección de rol */
.ssm-rol-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.ssm-rol-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 10px;
    border: 2px solid var(--ssm-borde);
    border-radius: var(--ssm-radio);
    cursor: pointer;
    transition: border-color var(--ssm-transicion), background var(--ssm-transicion);
    gap: 6px;
}

.ssm-rol-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ssm-rol-card:has(input:checked) {
    border-color: var(--ssm-acento);
    background: #fff7ed;
}

.ssm-rol-card__icono {
    font-size: 1.8rem;
}

.ssm-rol-card__nombre {
    font-weight: 700;
    font-size: .9rem;
    color: var(--ssm-primario);
}

.ssm-rol-card__desc {
    font-size: .75rem;
    color: var(--ssm-texto-suave);
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Responsive — colapsar 2 cols en móvil
   -------------------------------------------------------------------------- */
@media (max-width: 540px) {
    .ssm-auth__container {
        padding: 28px 20px;
    }

    .ssm-form-row--dos-cols {
        grid-template-columns: 1fr;
    }

    .ssm-rol-cards {
        grid-template-columns: 1fr;
    }

    .ssm-form-row--entre {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}