﻿/* =========================================
   DISEÑO REGISTRO / EDICIÓN - ESTILO FLAT & OCRE
   ========================================= */

/* Tarjeta principal: sin borde, sin sombra, fondo degradado ocre suave */
.tarjeta-borda-superior-destacada {
    border: none !important;
    box-shadow: none !important;
    /* Degradado muy suave: de un blanco/crema a un arena/durazno claro */
    background: linear-gradient(135deg, #fdfaf8 0%, #f4e8e1 100%) !important;
    border-radius: 1.25rem;
}

    /* Título: Lo pasamos de azul a un Gris casi Negro */
    .tarjeta-borda-superior-destacada h4.text-primary {
        color: #1e293b !important;
    }

    /* Subtítulo: Gris oscuro para que se lea perfecto sobre el fondo crema */
    .tarjeta-borda-superior-destacada p.text-muted {
        color: #475569 !important;
    }

    /* Labels de los inputs en gris muy oscuro */
    .tarjeta-borda-superior-destacada .form-label {
        color: #334155 !important;
    }

    /* Inputs y pre-iconos: Los forzamos a blanco puro para que contrasten contra el fondo */
    .tarjeta-borda-superior-destacada .bg-light {
        background-color: #ffffff !important;
        border-color: #e2e8f0 !important;
    }

    /* Los íconos dentro de los inputs: Los pasamos al Ocre/Terracota del logo */
    .tarjeta-borda-superior-destacada .input-group-text i.text-primary {
        color: #BC411D !important;
        opacity: 0.8 !important;
    }

    /* Botón principal (Guardar/Crear): Ocre fuerte, plano y sin sombras */
    .tarjeta-borda-superior-destacada .btn-primary {
        background-color: #BC411D !important;
        border-color: #BC411D !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

        .tarjeta-borda-superior-destacada .btn-primary:hover {
            background-color: #9d3616 !important; /* Apenas más oscuro al pasar el mouse */
            border-color: #9d3616 !important;
        }

    /* Enlaces (como los términos y condiciones) */
    .tarjeta-borda-superior-destacada a.text-primary {
        color: #BC411D !important;
    }

    /* Separador de la sección contraseña */
    .tarjeta-borda-superior-destacada .border-bottom {
        border-bottom-color: #e5d5cc !important;
    }

/* =========================================
   REGISTRO COMPACTO - AJUSTE FINAL
========================================= */

.tarjeta-borda-superior-destacada {
    max-width: 820px;
    margin: 0 auto !important;
    padding: 2rem 2.4rem !important;
    border-radius: 22px !important;
}

    .tarjeta-borda-superior-destacada .text-center.mb-4,
    .tarjeta-borda-superior-destacada .text-center.mb-md-5 {
        margin-bottom: 1.6rem !important;
    }

    .tarjeta-borda-superior-destacada .text-center.mt-3 {
        margin-top: 0 !important;
    }

    .tarjeta-borda-superior-destacada h4 {
        font-size: 1.35rem;
        margin-bottom: 0.35rem;
    }

    .tarjeta-borda-superior-destacada p.text-muted {
        font-size: 0.78rem !important;
        margin-bottom: 0;
    }

    .tarjeta-borda-superior-destacada .row.g-3,
    .tarjeta-borda-superior-destacada .row.g-md-4 {
        --bs-gutter-x: 1.35rem;
        --bs-gutter-y: 1.05rem;
    }

    .tarjeta-borda-superior-destacada .form-label {
        font-size: 0.82rem;
        margin-bottom: 0.35rem;
    }

    .tarjeta-borda-superior-destacada .input-group-text {
        padding: 0.55rem 0.75rem;
    }

        .tarjeta-borda-superior-destacada .input-group-text i {
            font-size: 0.82rem;
        }

    .tarjeta-borda-superior-destacada .form-control {
        min-height: 38px;
        padding: 0.52rem 0.75rem;
        font-size: 0.85rem;
    }

    .tarjeta-borda-superior-destacada small {
        font-size: 0.69rem !important;
        line-height: 1.25;
    }

    .tarjeta-borda-superior-destacada .text-center.mt-5 {
        margin-top: 1.6rem !important;
    }

    .tarjeta-borda-superior-destacada .form-check.mb-4 {
        margin-bottom: 1.25rem !important;
    }

    .tarjeta-borda-superior-destacada .form-check-label {
        font-size: 0.76rem;
    }

    .tarjeta-borda-superior-destacada .botonera-premium {
        gap: 0.75rem;
    }

    .tarjeta-borda-superior-destacada .btn-premium-accion,
    .tarjeta-borda-superior-destacada .btn-premium-secundario {
        padding: 0.68rem 1.15rem;
        font-size: 0.84rem;
    }

/* Menos aire general de la vista */
.container.mt-4.mb-5.pb-5 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-borda-superior-destacada {
        padding: 1.4rem !important;
        border-radius: 18px !important;
    }

    .container.mt-4.mb-5.pb-5 {
        margin-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}
/* =========================================
   AJUSTE ESPACIOS CHECK Y BOTONES
========================================= */

.tarjeta-borda-superior-destacada .text-center.mt-5 {
    margin-top: 0.9rem !important;
}

.tarjeta-borda-superior-destacada .form-check.mb-4 {
    margin-bottom: 0.7rem !important;
}

.tarjeta-borda-superior-destacada .botonera-premium {
    margin-top: 0 !important;
    gap: 0.7rem;
}
/* =========================================
   MOBILE MÁS COMPACTO
========================================= */
@media (max-width: 768px) {

    .tarjeta-borda-superior-destacada .row.g-3,
    .tarjeta-borda-superior-destacada .row.g-md-4 {
        --bs-gutter-y: 0.45rem;
    }

    .tarjeta-borda-superior-destacada .col-md-6 {
        margin-bottom: 0.15rem;
    }

    .tarjeta-borda-superior-destacada .form-label {
        margin-bottom: 0.22rem;
        font-size: 0.81rem;
    }

    .tarjeta-borda-superior-destacada .form-control {
        min-height: 36px;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
    }

    .tarjeta-borda-superior-destacada small {
        display: block;
        margin-top: 0.18rem;
        margin-bottom: 0;
        line-height: 1.15;
        font-size: 0.67rem !important;
    }

    .tarjeta-borda-superior-destacada .input-group {
        margin-bottom: 0.08rem;
    }

    .tarjeta-borda-superior-destacada .text-danger.small {
        margin-top: 0.15rem !important;
    }
}