/* ============================================================
   BLOQUE 1: HOJA DE ESTILOS - CREAR NUEVA EMPRESA
   Diseno consistente con CssCompanies, fondo claro profesional
   ============================================================ */

/* ============================================================
   BLOQUE 2: VARIABLES Y RESET
   ============================================================ */
:root {
    --color-navy:        #0F1B2D;                     /* Azul marino corporativo */
    --color-blue:        #1E60C8;                     /* Azul corporativo brillante */
    --color-blue-dark:   #174E9F;                     /* Azul oscuro hover */
    --color-blue-light:  #E8F0FC;                     /* Azul muy claro */
    --color-bg:          #EEF2F7;                     /* Fondo claro profesional */
    --color-white:       #ffffff;                     /* Blanco */
    --color-text:        #0F1B2D;                     /* Texto principal */
    --color-text-soft:   #475569;                     /* Texto secundario */
    --color-text-muted:  #64748B;                     /* Texto terciario */
    --color-border:      #E2E8F0;                     /* Borde claro */
    --color-border-soft: #F1F5F9;                     /* Borde suave */
    --color-yellow:      #FFFBEB;                     /* Amarillo campos activos */
    --color-red:         #dc143c;                     /* Rojo */
    --color-green:       #00a651;                     /* Verde */
    --shadow-card:       0 1px 3px rgba(15, 27, 45, 0.08);
    --shadow-modal:      0 25px 60px rgba(0, 0, 0, 0.5);
    --radius-sm:         4px;
    --radius-md:         6px;
    --radius-lg:         10px;
}

* {
    margin: 0;                                        /* Sin margenes */
    padding: 0;                                       /* Sin padding */
    box-sizing: border-box;                           /* Box-sizing incluido */
}

html, body {
    min-height: 100%;                                 /* Altura minima */
    font-family: 'Calibri', 'Calibri Light', sans-serif;  /* Calibri */
    background: var(--color-bg);                      /* Fondo claro */
    color: var(--color-text);                         /* Texto oscuro */
    -webkit-font-smoothing: antialiased;
}

body {
    padding-bottom: 50px;                             /* Espacio para footer fijo */
}

/* ============================================================
   BLOQUE 3: HEADER CORPORATIVO (igual a Companies)
   ============================================================ */
.fre-header {
    background: var(--color-navy);                    /* Azul marino */
    color: var(--color-white);                        /* Texto blanco */
    padding: 14px 28px;                               /* Padding */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: space-between;                   /* Separa items */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);        /* Sombra */
    border-bottom: 3px solid var(--color-blue);       /* Linea azul */
    flex-wrap: wrap;                                  /* Wrap */
    gap: 12px;                                        /* Gap */
}

.fre-header-logo {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 12px;                                        /* Gap */
}

.fre-header-logo-icon {
    width: 36px; height: 36px;                        /* Tamano */
    background: var(--color-blue);                    /* Azul */
    border-radius: var(--radius-md);                  /* Bordes */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
}

.fre-header-logo-icon i {
    font-size: 18px;                                  /* Tamano icono */
    color: var(--color-white);                        /* Blanco */
}

.fre-header-logo-text {
    font-size: 15px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
}

.fre-header-user {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 16px;                                        /* Gap */
    flex-wrap: wrap;                                  /* Wrap */
}

.fre-header-user-info {
    display: flex;                                    /* Flexbox */
    flex-direction: column;                           /* Vertical */
    align-items: flex-end;                            /* Derecha */
    line-height: 1.3;                                 /* Altura linea */
}

.fre-header-user-name {
    font-size: 13px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
}

.fre-header-user-email {
    font-size: 11px;                                  /* Tamano */
    color: #94A3B8;                                   /* Gris */
}

/* ============================================================
   BLOQUE 4: BOTON BACK
   ============================================================ */
.fre-back-button {
    background: transparent;                          /* Sin fondo */
    border: 1px solid var(--color-blue);              /* Borde azul */
    color: var(--color-white);                        /* Texto blanco */
    padding: 8px 16px;                                /* Padding */
    border-radius: var(--radius-md);                  /* Bordes */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 12px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    cursor: pointer;                                  /* Cursor */
    transition: background 0.2s ease;                 /* Transicion */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 6px;                                         /* Gap */
    text-transform: uppercase;                        /* Mayusculas */
    text-decoration: none;                            /* Sin subrayado */
    min-height: 36px;                                 /* Tamano tactil */
}

.fre-back-button:hover {
    background: var(--color-blue);                    /* Azul al hover */
}

/* ============================================================
   BLOQUE 5: CONTENEDOR PRINCIPAL
   ============================================================ */
.fre-container {
    max-width: 800px;                                 /* Mas estrecho que Companies */
    margin: 0 auto;                                   /* Centrado */
    padding: 28px;                                    /* Padding */
}

.fre-page-header {
    margin-bottom: 24px;                              /* Espacio inferior */
}

.fre-page-eyebrow {
    font-size: 11px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 1.5px;                            /* Espaciado letras */
    color: var(--color-blue);                         /* Azul */
    margin-bottom: 4px;                               /* Espacio inferior */
}

.fre-page-title {
    font-size: 26px;                                  /* Tamano titulo */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino */
    line-height: 1.2;                                 /* Altura linea */
}

.fre-page-subtitle {
    font-size: 14px;                                  /* Tamano */
    color: var(--color-text-muted);                   /* Gris */
    margin-top: 6px;                                  /* Espacio superior */
    line-height: 1.5;                                 /* Altura linea */
}

/* ============================================================
   BLOQUE 6: CARD DEL FORMULARIO
   ============================================================ */
.fre-form-card {
    background: var(--color-white);                   /* Fondo blanco */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    padding: 28px;                                    /* Padding */
    box-shadow: var(--shadow-card);                   /* Sombra */
    margin-bottom: 16px;                              /* Espacio inferior */
}

/* ============================================================
   BLOQUE 7: FORMULARIO
   ============================================================ */
.fre-form-group {
    margin-bottom: 18px;                              /* Espacio entre grupos */
}

.fre-form-group:last-child {
    margin-bottom: 0;                                 /* Sin margen el ultimo */
}

.fre-form-label {
    display: block;                                   /* Bloque completo */
    font-size: 12px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-text-soft);                    /* Gris */
    margin-bottom: 6px;                               /* Espacio inferior */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    text-transform: uppercase;                        /* Mayusculas */
}

.fre-form-label-required::after {
    content: ' *';                                    /* Asterisco */
    color: var(--color-red);                          /* Rojo */
}

.fre-form-input {
    width: 100%;                                      /* Ancho completo */
    padding: 11px 14px;                               /* Padding */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-md);                  /* Bordes */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 15px;                                  /* Tamano */
    color: var(--color-text);                         /* Texto */
    background: var(--color-white);                   /* Fondo blanco */
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    outline: none;                                    /* Sin outline */
    min-height: 44px;                                 /* Tamano tactil */
}

.fre-form-input:focus {
    border-color: var(--color-blue);                  /* Borde azul */
    background: var(--color-yellow);                  /* Amarillo claro (regla) */
    box-shadow: 0 0 0 3px rgba(30, 96, 200, 0.15);    /* Halo azul */
}

.fre-form-input:read-only {
    background: #F8FAFC;                              /* Gris muy claro */
    color: var(--color-text-muted);                   /* Gris */
    cursor: not-allowed;                              /* Cursor no permitido */
}

.fre-form-hint {
    font-size: 12px;                                  /* Tamano */
    color: var(--color-text-muted);                   /* Gris */
    margin-top: 6px;                                  /* Espacio superior */
    line-height: 1.4;                                 /* Altura linea */
}

/* ============================================================
   BLOQUE 8: VISTA PREVIA (preview de codigo/folder/db)
   ============================================================ */
.fre-preview-card {
    background: var(--color-blue-light);              /* Fondo azul claro */
    border: 1px solid #C5DCF9;                        /* Borde azul claro */
    border-left: 4px solid var(--color-blue);         /* Borde lateral azul */
    border-radius: var(--radius-md);                  /* Bordes */
    padding: 16px 20px;                               /* Padding */
    margin-bottom: 18px;                              /* Espacio inferior */
}

.fre-preview-title {
    font-size: 12px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-blue);                         /* Azul */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    margin-bottom: 8px;                               /* Espacio inferior */
    text-transform: uppercase;                        /* Mayusculas */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 6px;                                         /* Gap */
}

.fre-preview-row {
    display: flex;                                    /* Flexbox */
    padding: 4px 0;                                   /* Padding vertical */
    font-size: 13px;                                  /* Tamano */
    line-height: 1.5;                                 /* Altura linea */
    flex-wrap: wrap;                                  /* Wrap */
    gap: 8px;                                         /* Gap */
}

.fre-preview-label {
    color: var(--color-text-soft);                    /* Gris */
    font-weight: 700;                                 /* Negrita */
    min-width: 100px;                                 /* Ancho minimo */
}

.fre-preview-value {
    font-family: 'Consolas', 'Courier New', monospace;  /* Monoespaciada */
    color: var(--color-navy);                         /* Azul marino */
    font-weight: 700;                                 /* Negrita */
    word-break: break-all;                            /* Romper palabras */
    flex: 1;                                          /* Ocupa espacio */
}

/* ============================================================
   BLOQUE 9: BOTONES DE ACCION
   ============================================================ */
.fre-form-actions {
    display: flex;                                    /* Flexbox */
    justify-content: flex-end;                        /* Botones derecha */
    gap: 10px;                                        /* Gap */
    flex-wrap: wrap;                                  /* Wrap */
    padding-top: 18px;                                /* Padding superior */
    border-top: 1px solid var(--color-border);        /* Linea separadora */
}

.fre-button-primary,
.fre-button-secondary {
    padding: 11px 24px;                               /* Padding */
    border-radius: var(--radius-md);                  /* Bordes */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 13px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    cursor: pointer;                                  /* Cursor */
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    display: inline-flex;                             /* Inline flex */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    gap: 8px;                                         /* Gap */
    text-transform: uppercase;                        /* Mayusculas */
    min-height: 44px;                                 /* Tamano tactil */
    text-decoration: none;                            /* Sin subrayado */
}

.fre-button-primary {
    background: var(--color-blue);                    /* Azul */
    color: var(--color-white);                        /* Blanco */
    border: none;                                     /* Sin borde */
    box-shadow: 0 4px 12px rgba(30, 96, 200, 0.25);   /* Sombra */
}

.fre-button-primary:hover {
    background: var(--color-blue-dark);               /* Azul oscuro */
    transform: translateY(-1px);                      /* Sube */
    box-shadow: 0 6px 16px rgba(30, 96, 200, 0.35);   /* Sombra mas fuerte */
}

.fre-button-primary:disabled {
    background: #cccccc;                              /* Gris deshabilitado */
    cursor: not-allowed;                              /* No permitido */
    box-shadow: none;                                 /* Sin sombra */
    transform: none;                                  /* Sin transformacion */
}

.fre-button-secondary {
    background: var(--color-white);                   /* Blanco */
    color: var(--color-text-soft);                    /* Gris */
    border: 1px solid var(--color-border);            /* Borde */
}

.fre-button-secondary:hover {
    background: var(--color-bg);                      /* Fondo claro */
    border-color: var(--color-blue);                  /* Borde azul */
    color: var(--color-blue);                         /* Texto azul */
}

/* ============================================================
   BLOQUE 10: PROGRESS DIALOG (durante el provisioning)
   ============================================================ */
.fre-progress-overlay {
    position: fixed;                                  /* Fijo */
    inset: 0;                                         /* Cubre todo */
    background: rgba(15, 27, 45, 0.85);               /* Azul semi-trans */
    display: none;                                    /* Oculto */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    z-index: 1500;                                    /* Encima */
    backdrop-filter: blur(4px);                       /* Blur */
    padding: 20px;                                    /* Padding moviles */
}

.fre-progress-overlay.fre-show {
    display: flex;                                    /* Mostrar */
}

.fre-progress-modal {
    background: var(--color-white);                   /* Blanco */
    border-radius: var(--radius-lg);                  /* Bordes */
    padding: 32px;                                    /* Padding */
    max-width: 480px;                                 /* Ancho maximo */
    width: 100%;                                      /* Ancho completo */
    box-shadow: var(--shadow-modal);                  /* Sombra */
    text-align: center;                               /* Centrado */
}

.fre-progress-spinner {
    width: 56px; height: 56px;                        /* Tamano */
    border: 4px solid rgba(30, 96, 200, 0.2);         /* Borde claro */
    border-top-color: var(--color-blue);              /* Borde superior azul */
    border-radius: 50%;                               /* Circular */
    animation: freSpin 0.8s linear infinite;          /* Rotacion */
    margin: 0 auto 16px auto;                         /* Centrado */
}

@keyframes freSpin {
    to { transform: rotate(360deg); }                 /* Rotacion completa */
}

.fre-progress-title {
    font-size: 18px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino */
    margin-bottom: 8px;                               /* Espacio inferior */
}

.fre-progress-message {
    font-size: 14px;                                  /* Tamano */
    color: var(--color-text-muted);                   /* Gris */
    line-height: 1.5;                                 /* Altura linea */
}

.fre-progress-steps {
    margin-top: 18px;                                 /* Espacio superior */
    text-align: left;                                 /* Izquierda */
    background: var(--color-bg);                      /* Fondo claro */
    border-radius: var(--radius-md);                  /* Bordes */
    padding: 14px 18px;                               /* Padding */
}

.fre-progress-step {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 10px;                                        /* Gap */
    font-size: 13px;                                  /* Tamano */
    color: var(--color-text-muted);                   /* Gris */
    padding: 4px 0;                                   /* Padding vertical */
    transition: color 0.3s ease;                      /* Transicion */
}

.fre-progress-step.fre-done {
    color: var(--color-green);                        /* Verde si completado */
}

.fre-progress-step.fre-active {
    color: var(--color-blue);                         /* Azul si activo */
    font-weight: 700;                                 /* Negrita */
}

.fre-progress-step i {
    width: 16px;                                      /* Ancho */
    text-align: center;                               /* Centrado */
}

/* ============================================================
   BLOQUE 11: FLASH MODAL (mensajes profesionales)
   ============================================================ */
.fre-flash-overlay {
    position: fixed;                                  /* Fijo */
    inset: 0;                                         /* Cubre todo */
    background: rgba(15, 27, 45, 0.75);               /* Azul semi-trans */
    display: none;                                    /* Oculto */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    z-index: 2000;                                    /* Encima */
    backdrop-filter: blur(4px);                       /* Blur */
    padding: 20px;                                    /* Padding moviles */
}

.fre-flash-overlay.fre-show {
    display: flex;                                    /* Mostrar */
}

.fre-flash-modal {
    background: var(--color-white);                   /* Blanco */
    border-radius: var(--radius-lg);                  /* Bordes */
    padding: 28px 32px;                               /* Padding */
    max-width: 480px;                                 /* Ancho maximo */
    width: 100%;                                      /* Ancho completo */
    box-shadow: var(--shadow-modal);                  /* Sombra */
    text-align: center;                               /* Centrado */
}

.fre-flash-icon {
    width: 60px; height: 60px;                        /* Tamano */
    margin: 0 auto 14px auto;                         /* Centrado */
    border-radius: 50%;                               /* Circular */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    font-size: 28px;                                  /* Tamano icono */
    color: var(--color-white);                        /* Blanco */
}

.fre-flash-icon.fre-success { background: var(--color-green); }
.fre-flash-icon.fre-error   { background: var(--color-red); }
.fre-flash-icon.fre-warning { background: var(--color-blue); }
.fre-flash-icon.fre-info    { background: var(--color-blue); }

.fre-flash-title {
    font-size: 18px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino */
    margin-bottom: 6px;                               /* Espacio inferior */
}

.fre-flash-message {
    font-size: 14px;                                  /* Tamano */
    color: var(--color-text-soft);                    /* Gris */
    margin-bottom: 18px;                              /* Espacio inferior */
    line-height: 1.5;                                 /* Altura linea */
    word-wrap: break-word;                            /* Wrap palabras */
}

.fre-flash-button {
    padding: 10px 30px;                               /* Padding */
    border: none;                                     /* Sin borde */
    border-radius: var(--radius-md);                  /* Bordes */
    background: var(--color-blue);                    /* Azul */
    color: var(--color-white);                        /* Blanco */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 13px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    cursor: pointer;                                  /* Cursor */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    text-transform: uppercase;                        /* Mayusculas */
    min-height: 40px;                                 /* Tamano tactil */
}

.fre-flash-button:hover {
    background: var(--color-blue-dark);               /* Azul oscuro */
}

/* ============================================================
   BLOQUE 12: FOOTER OBLIGATORIO
   ============================================================ */
.fre-footer {
    position: fixed;                                  /* Fijo */
    bottom: 0; left: 0;                               /* Pegado abajo */
    width: 100%;                                      /* Ancho completo */
    background: rgba(0, 0, 0, 0.85);                  /* Negro */
    color: var(--color-white);                        /* Blanco */
    padding: 10px 20px;                               /* Padding */
    text-align: center;                               /* Centrado */
    font-size: 12px;                                  /* Tamano */
    z-index: 20;                                      /* Encima */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    flex-wrap: wrap;                                  /* Wrap */
    gap: 16px;                                        /* Gap */
}

.fre-footer-item {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 6px;                                         /* Gap */
}

.fre-footer-item i.fre-icon-phone { color: #00ff7f; }
.fre-footer-item i.fre-icon-email { color: #ff4757; }
.fre-footer-item i.fre-icon-web   { color: #1e90ff; }
.fre-footer-item i.fre-icon-copy  { color: #ba68c8; }

.fre-footer-item a {
    color: var(--color-white);                        /* Blanco */
    text-decoration: none;                            /* Sin subrayado */
}

.fre-footer-item a:hover {
    text-decoration: underline;                       /* Subrayado */
}

/* ============================================================
   BLOQUE 13: RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .fre-header {
        padding: 12px 16px;                           /* Padding menor */
    }
    .fre-header-user-info {
        display: none;                                /* Oculta info usuario */
    }
    .fre-container {
        padding: 18px 16px;                           /* Padding menor */
    }
    .fre-page-title {
        font-size: 22px;                              /* Mas chico */
    }
    .fre-form-card {
        padding: 20px;                                /* Padding menor */
    }
    .fre-preview-label {
        min-width: 80px;                              /* Ancho menor */
    }
}

@media (max-width: 480px) {
    .fre-header-logo-text {
        font-size: 13px;                              /* Mas chico */
    }
    .fre-back-button span {
        display: none;                                /* Oculta texto */
    }
    .fre-form-actions {
        flex-direction: column-reverse;               /* Vertical */
    }
    .fre-form-actions button,
    .fre-form-actions a {
        width: 100%;                                  /* Ancho completo */
    }
    .fre-footer {
        font-size: 11px;                              /* Mas chico */
        padding: 8px 12px;                            /* Padding menor */
        gap: 12px;                                    /* Gap menor */
    }
    body {
        padding-bottom: 70px;                         /* Mas espacio footer */
    }
}