/* ============================================================
   BLOQUE 1: HOJA DE ESTILOS - PANTALLA COMPANIES
   Diseno Corporate Blue profesional + Responsive completo
   Mobile-first approach, Calibri en todo
   ============================================================ */

/* ============================================================
   BLOQUE 2: RESET GLOBAL Y VARIABLES CSS
   Variables permiten cambios globales rapidos
   ============================================================ */
:root {
    --color-navy:        #0F1B2D;                     /* Azul marino corporativo */
    --color-blue:        #1E60C8;                     /* Azul corporativo brillante */
    --color-blue-dark:   #174E9F;                     /* Azul mas oscuro hover */
    --color-blue-light:  #E8F0FC;                     /* Azul muy claro fondo */
    --color-bg:          #EEF2F7;                     /* Fondo gris azulado claro profesional */
    --color-white:       #ffffff;                     /* Blanco puro */
    --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 muy suave */
    --color-yellow:      #FFFBEB;                     /* Amarillo claro campos activos */
    --color-red:         #dc143c;                     /* Rojo errores */
    --color-green:       #00a651;                     /* Verde exito */
    --shadow-card:       0 1px 3px rgba(15, 27, 45, 0.08);  /* Sombra sutil */
    --shadow-modal:      0 25px 60px rgba(0, 0, 0, 0.5);    /* Sombra dramatica */
    --radius-sm:         4px;                         /* Radio pequeno */
    --radius-md:         6px;                         /* Radio mediano */
    --radius-lg:         10px;                        /* Radio grande */
}

* {
    margin: 0;                                        /* Sin margenes default */
    padding: 0;                                       /* Sin padding default */
    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;              /* Texto suave en webkit */
    -moz-osx-font-smoothing: grayscale;               /* Texto suave en firefox */
}

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

/* ============================================================
   BLOQUE 3: HEADER CORPORATIVO SUPERIOR
   Layout flexbox con responsive
   ============================================================ */
.fre-header {
    background: var(--color-navy);                    /* Azul marino */
    color: var(--color-white);                        /* Texto blanco */
    padding: 14px 28px;                               /* Espacio interno */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: space-between;                   /* Separa logo y acciones */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);        /* Sombra inferior */
    border-bottom: 3px solid var(--color-blue);       /* Linea azul */
    flex-wrap: wrap;                                  /* Wrap en moviles */
    gap: 12px;                                        /* Espacio si hay wrap */
}

.fre-header-logo {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 12px;                                        /* Espacio logo-texto */
    min-width: 0;                                     /* Permite shrink */
}

.fre-header-logo-icon {
    width: 36px;                                      /* Ancho icono */
    height: 36px;                                     /* Alto icono */
    background: var(--color-blue);                    /* Azul */
    border-radius: var(--radius-md);                  /* Bordes redondeados */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    flex-shrink: 0;                                   /* No reducir tamano */
}

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

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

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

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

.fre-header-user-name {
    font-size: 13px;                                  /* Tamano nombre */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-white);                        /* Blanco */
}

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

.fre-logout-button {
    background: transparent;                          /* Sin fondo */
    border: 1px solid var(--color-blue);              /* Borde azul */
    color: var(--color-white);                        /* Texto blanco */
    padding: 8px 16px;                                /* Espacio interno */
    border-radius: var(--radius-md);                  /* Bordes redondeados */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 12px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.5px;                            /* Espaciado */
    cursor: pointer;                                  /* Cursor mano */
    transition: background 0.2s ease, border-color 0.2s ease;  /* Transicion */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 6px;                                         /* Espacio icono-texto */
    text-transform: uppercase;                        /* Mayusculas */
    min-height: 36px;                                 /* Altura tactil */
}

.fre-logout-button:hover {
    background: var(--color-red);                     /* Rojo al hover */
    border-color: var(--color-red);                   /* Borde rojo */
}

/* ============================================================
   BLOQUE 4: CONTENEDOR PRINCIPAL
   ============================================================ */
.fre-container {
    max-width: 1200px;                                /* Ancho maximo */
    margin: 0 auto;                                   /* Centrado */
    padding: 28px;                                    /* Espacio interno */
}

/* ============================================================
   BLOQUE 5: BARRA SUPERIOR DE LA PAGINA
   ============================================================ */
.fre-page-header {
    display: flex;                                    /* Flexbox */
    justify-content: space-between;                   /* Separa items */
    align-items: center;                              /* Centrado vertical */
    margin-bottom: 24px;                              /* Espacio inferior */
    flex-wrap: wrap;                                  /* Wrap */
    gap: 16px;                                        /* Espacio entre items */
}

.fre-page-title-wrapper {
    display: flex;                                    /* Flexbox */
    flex-direction: column;                           /* Columna */
}

.fre-page-eyebrow {
    font-size: 11px;                                  /* Tamano chico */
    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: 13px;                                  /* Tamano subtitulo */
    color: var(--color-text-muted);                   /* Gris */
    margin-top: 4px;                                  /* Espacio superior */
}

/* ============================================================
   BLOQUE 6: BOTONES (primary y secondary)
   ============================================================ */
.fre-button-primary,
.fre-button-secondary {
    padding: 11px 22px;                               /* Espacio interno */
    border-radius: var(--radius-md);                  /* Bordes redondeados */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 13px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    cursor: pointer;                                  /* Cursor mano */
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;  /* Transicion */
    display: inline-flex;                             /* Inline flex */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    gap: 8px;                                         /* Espacio icono-texto */
    text-transform: uppercase;                        /* Mayusculas */
    min-height: 42px;                                 /* Altura tactil */
}

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

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

.fre-button-primary:active {
    transform: translateY(0);                         /* Vuelve a posicion */
}

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

.fre-button-secondary {
    background: var(--color-white);                   /* Fondo blanco */
    color: var(--color-text-soft);                    /* Texto gris */
    border: 1px solid var(--color-border);            /* Borde gris claro */
}

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

/* ============================================================
   BLOQUE 7: GRID DE STAT CARDS (Owner, Authorized, Created, Remaining)
   4 tarjetas codificadas por color con icono + label + valor
   ============================================================ */
.fre-stats-grid {
    display: flex;                                    /* Flexbox horizontal */
    flex-wrap: wrap;                                  /* Wrap en pantallas chicas */
    gap: 12px;                                        /* Espacio entre cards */
}

.fre-stat-card {
    background: var(--color-white);                   /* Fondo blanco */
    border: 1px solid var(--color-border);            /* Borde gris claro */
    border-left: 5px solid var(--color-blue);         /* Borde lateral grueso (color por tipo) */
    border-radius: var(--radius-md);                  /* Bordes medianos */
    padding: 16px 24px;                               /* Espacio interno mayor */
    min-width: 170px;                                 /* Ancho minimo */
    box-shadow: var(--shadow-card);                   /* Sombra sutil */
    display: flex;                                    /* Flexbox */
    flex-direction: column;                           /* Stack vertical */
    gap: 6px;                                         /* Espacio entre head y valor */
}

/* Cabecera del stat card: icono + label */
.fre-stat-head {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 8px;                                         /* Espacio icono-label */
}

.fre-stat-head i {
    font-size: 16px;                                  /* Tamano icono */
    color: var(--color-blue);                         /* Default azul */
}

.fre-stat-label {
    font-size: 13px;                                  /* Tamano label */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    color: var(--color-text-muted);                   /* Gris */
}

/* Valor numerico grande */
.fre-stat-value {
    font-size: 30px;                                  /* Tamano valor */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino default */
    line-height: 1;                                   /* Altura linea ajustada */
}

/* Valor como texto (no numero, ej Owner) */
.fre-stat-value-text {
    font-size: 22px;                                  /* Mas chico para texto largo */
    line-height: 1.2;                                 /* Altura linea texto */
    word-break: break-word;                           /* Romper palabras largas */
}

/* Colores especificos por tipo de stat card */
.fre-stat-owner {
    border-left-color: #1E60C8;                       /* Azul corporativo */
}
.fre-stat-owner .fre-stat-head i { color: #1E60C8; }  /* Icono azul */

.fre-stat-authorized {
    border-left-color: #6a1b9a;                       /* Morado */
}
.fre-stat-authorized .fre-stat-head i,
.fre-stat-authorized .fre-stat-value { color: #6a1b9a; }  /* Morado */

.fre-stat-created {
    border-left-color: var(--color-green);            /* Verde */
}
.fre-stat-created .fre-stat-head i,
.fre-stat-created .fre-stat-value { color: var(--color-green); }  /* Verde */

.fre-stat-remaining {
    border-left-color: var(--color-red);              /* Rojo */
}
.fre-stat-remaining .fre-stat-head i,
.fre-stat-remaining .fre-stat-value { color: var(--color-red); }  /* Rojo */

/* ============================================================
   BLOQUE 8: TABLA DE EMPRESAS (vista desktop)
   ============================================================ */
.fre-table-wrapper {
    background: var(--color-white);                   /* Fondo blanco */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    overflow: hidden;                                 /* Recorta */
    box-shadow: var(--shadow-card);                   /* Sombra sutil */
}

.fre-table {
    width: 100%;                                      /* Ancho completo */
    border-collapse: collapse;                        /* Sin doble borde */
    font-size: 15px;                                  /* +2px segun pedido */
}

.fre-table thead {
    background: var(--color-navy);                    /* Azul marino */
    color: var(--color-white);                        /* Texto blanco */
}

.fre-table thead th {
    padding: 12px 18px;                               /* Espacio interno */
    text-align: left;                                 /* Alineacion */
    font-size: 13px;                                  /* +2px segun pedido */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    text-transform: uppercase;                        /* Mayusculas */
}

.fre-table tbody tr {
    border-bottom: 1px solid var(--color-border-soft);  /* Linea divisoria */
    transition: background 0.15s ease;                /* Transicion */
}

.fre-table tbody tr:hover {
    background: #F8FAFC;                              /* Fondo gris hover */
}

.fre-table tbody tr:last-child {
    border-bottom: none;                              /* Sin borde ultima */
}

.fre-table tbody td {
    padding: 8px 18px;                                /* Vertical mas compacto */
    color: var(--color-text);                         /* Texto */
    vertical-align: middle;                           /* Alineado vertical */
}

.fre-table-empty {
    color: #94A3B8;                                   /* Gris */
}

.fre-table-id {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 15px;                                  /* +2px adicionales */
    background: var(--color-navy);                    /* Azul marino */
    color: var(--color-white);                        /* Blanco */
    padding: 4px 11px;                                /* Padding ajustado */
    border-radius: var(--radius-sm);                  /* Bordes pequenos */
    font-weight: 700;                                 /* Negrita */
}

.fre-table-code {
    font-family: 'Consolas', 'Courier New', monospace;  /* Monoespaciada */
    font-size: 15px;                                  /* +1px sobre lo anterior, +3 sobre el original */
    background: var(--color-border-soft);             /* Fondo gris */
    padding: 4px 10px;                                /* Espacio interno */
    border-radius: var(--radius-sm);                  /* Bordes pequenos */
    color: var(--color-blue);                         /* Azul */
    font-weight: 700;                                 /* Negrita */
}

.fre-table-name {
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino */
    font-size: 17px;                                  /* +2px adicionales */
}

.fre-table-alias {
    display: inline-block;                            /* Inline-block */
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 13px;                                  /* +2px segun pedido */
    background: #FEF3C7;                              /* Amarillo claro */
    color: #92400E;                                   /* Marron */
    padding: 3px 10px;                                /* Padding */
    border-radius: var(--radius-sm);                  /* Bordes */
    font-weight: 700;                                 /* Negrita */
}

/* ============================================================
   BLOQUE 8B: BOTONES DE ACCION EN TABLA Y CARDS
   Badges de texto con fondos solidos:
   - OPEN   = verde
   - INFO   = azul
   - DELETE = rojo oscuro
   ============================================================ */
.fre-actions-cell {
    display: flex;                                    /* Flexbox */
    gap: 8px;                                         /* Espacio entre botones */
    align-items: center;                              /* Centrado vertical */
}

.fre-action-btn {
    color: #ffffff;                                   /* Texto blanco brillante */
    border: none;                                     /* Sin borde */
    padding: 8px 16px;                                /* Padding del badge */
    border-radius: var(--radius-md);                  /* Bordes */
    cursor: pointer;                                  /* Cursor */
    display: inline-flex;                             /* Flex */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    font-size: 13px;                                  /* Tamano texto */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.6px;                            /* Spacing entre letras */
    min-width: 72px;                                  /* Ancho minimo uniforme */
    font-family: inherit;                             /* Fuente del sistema */
    transition: all 0.15s ease;                       /* Transicion */
    line-height: 1;                                   /* Altura limpia */
}

.fre-action-btn span {
    color: #ffffff;                                   /* Asegurar texto blanco aun en span hijo */
}

.fre-action-open {
    background: #00a651;                              /* Verde */
}
.fre-action-open:hover {
    background: #00833f;                              /* Verde mas oscuro */
    transform: translateY(-1px);
}

.fre-action-info {
    background: #1E60C8;                              /* Azul */
}
.fre-action-info:hover {
    background: #174E9F;                              /* Azul mas oscuro */
    transform: translateY(-1px);
}

.fre-action-delete {
    background: #991B1B;                              /* Rojo oscuro */
}
.fre-action-delete:hover {
    background: #7F1313;                              /* Rojo aun mas oscuro */
    transform: translateY(-1px);
}

.fre-card-actions {
    margin-top: 10px;                                 /* Espacio superior */
    padding-top: 10px;                                /* Padding superior */
    border-top: 1px solid var(--color-border-soft);   /* Linea divisoria */
}

/* ============================================================
   BLOQUE 9: CARDS PARA MOVIL (ocultas en desktop)
   ============================================================ */
.fre-cards-wrapper {
    display: none;                                    /* Oculto en desktop */
    flex-direction: column;                           /* Stack vertical */
    gap: 12px;                                        /* Espacio entre cards */
}

.fre-card {
    background: var(--color-white);                   /* Fondo blanco */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    padding: 16px;                                    /* Espacio interno */
    box-shadow: var(--shadow-card);                   /* Sombra sutil */
    border-left: 4px solid var(--color-blue);         /* Linea azul lateral */
}

.fre-card-header {
    display: flex;                                    /* Flexbox */
    justify-content: space-between;                   /* Separa items */
    align-items: center;                              /* Centrado vertical */
    margin-bottom: 8px;                               /* Espacio inferior */
    gap: 12px;                                        /* Espacio */
}

.fre-card-name {
    font-size: 15px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-navy);                         /* Azul marino */
    flex: 1;                                          /* Ocupa espacio */
    min-width: 0;                                     /* Permite shrink */
    overflow: hidden;                                 /* Recorta */
    text-overflow: ellipsis;                          /* Puntos suspensivos */
    white-space: nowrap;                              /* Sin wrap */
}

.fre-card-code {
    font-family: 'Consolas', 'Courier New', monospace;  /* Monoespaciada */
    font-size: 11px;                                  /* Tamano */
    color: var(--color-blue);                         /* Azul */
    background: var(--color-border-soft);             /* Fondo gris */
    padding: 2px 8px;                                 /* Espacio interno */
    border-radius: var(--radius-sm);                  /* Bordes pequenos */
    display: inline-block;                            /* Inline-block */
    margin-bottom: 10px;                              /* Espacio inferior */
    font-weight: 700;                                 /* Negrita */
}

.fre-card-row {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 8px;                                         /* Espacio icono-texto */
    padding: 4px 0;                                   /* Espacio vertical */
    font-size: 13px;                                  /* Tamano */
    color: var(--color-text-soft);                    /* Gris */
}

.fre-card-row i {
    color: var(--color-blue);                         /* Iconos azules */
    width: 16px;                                      /* Ancho fijo */
    text-align: center;                               /* Centrado */
    flex-shrink: 0;                                   /* No reducir */
}

/* ============================================================
   BLOQUE 10: BADGES DE ESTADO
   ============================================================ */
.fre-badge {
    display: inline-block;                            /* Inline-block */
    padding: 3px 10px;                                /* Espacio interno */
    border-radius: var(--radius-sm);                  /* Bordes pequenos */
    font-size: 11px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    text-transform: uppercase;                        /* Mayusculas */
    white-space: nowrap;                              /* Sin wrap */
}

.fre-badge-active {
    background: #DCFCE7;                              /* Verde claro */
    color: #15803D;                                   /* Verde oscuro */
}

.fre-badge-inactive {
    background: #FEE2E2;                              /* Rojo claro */
    color: #B91C1C;                                   /* Rojo oscuro */
}

/* ============================================================
   BLOQUE 11: ESTADO VACIO (sin empresas)
   ============================================================ */
.fre-empty-state {
    background: var(--color-white);                   /* Fondo blanco */
    border: 1px dashed #CBD5E1;                       /* Borde punteado */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    padding: 60px 28px;                               /* Espacio interno */
    text-align: center;                               /* Centrado */
}

.fre-empty-icon {
    width: 72px;                                      /* Ancho */
    height: 72px;                                     /* Alto */
    background: var(--color-blue-light);              /* Azul muy claro */
    border-radius: 50%;                               /* Circular */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    margin: 0 auto 18px auto;                         /* Centrado */
    color: var(--color-blue);                         /* Azul */
    font-size: 32px;                                  /* Tamano icono */
}

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

.fre-empty-text {
    font-size: 14px;                                  /* Tamano */
    color: var(--color-text-muted);                   /* Gris */
    margin-bottom: 24px;                              /* Espacio inferior */
    max-width: 400px;                                 /* Ancho maximo */
    margin-left: auto;                                /* Centrado */
    margin-right: auto;                               /* Centrado */
    line-height: 1.5;                                 /* Altura linea */
}

/* ============================================================
   BLOQUE 12: ESTADO DE CARGA
   ============================================================ */
.fre-loading-state {
    text-align: center;                               /* Centrado */
    padding: 60px 28px;                               /* Espacio interno */
    color: var(--color-text-muted);                   /* Gris */
    font-size: 14px;                                  /* Tamano */
}

.fre-loading-state .fre-spinner {
    border-color: rgba(30, 96, 200, 0.2);             /* Borde azul claro */
    border-top-color: var(--color-blue);              /* Borde azul */
    width: 28px;                                      /* Ancho */
    height: 28px;                                     /* Alto */
    margin: 0 auto 12px auto;                         /* Centrado */
    display: block;                                   /* Bloque para centrar */
}

/* ============================================================
   BLOQUE 13: MODAL DE NUEVA EMPRESA
   ============================================================ */
.fre-modal-overlay {
    position: fixed;                                  /* Fijo */
    inset: 0;                                         /* Cubre toda pantalla */
    background: rgba(15, 27, 45, 0.75);               /* Azul semi-transparente */
    display: none;                                    /* Oculto */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    z-index: 1000;                                    /* Encima */
    backdrop-filter: blur(4px);                       /* Blur fondo */
    padding: 20px;                                    /* Padding para moviles */
    animation: freFadeIn 0.2s ease;                   /* Animacion entrada */
}

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

@keyframes freFadeIn {
    from { opacity: 0; }                              /* Invisible */
    to   { opacity: 1; }                              /* Visible */
}

.fre-modal {
    background: var(--color-white);                   /* Fondo blanco */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    width: 520px;                                     /* Ancho fijo */
    max-width: 100%;                                  /* Maximo */
    max-height: 90vh;                                 /* Altura maxima */
    overflow-y: auto;                                 /* Scroll vertical */
    box-shadow: var(--shadow-modal);                  /* Sombra dramatica */
    animation: freModalEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);  /* Animacion entrada */
}

@keyframes freModalEnter {
    0%   { opacity: 0; transform: scale(0.9); }       /* Inicio pequeno */
    100% { opacity: 1; transform: scale(1);   }       /* Tamano completo */
}

.fre-modal-header {
    background: var(--color-navy);                    /* Azul marino */
    color: var(--color-white);                        /* Blanco */
    padding: 16px 24px;                               /* Espacio interno */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    justify-content: space-between;                   /* Separa items */
    border-bottom: 3px solid var(--color-blue);       /* Linea azul */
}

.fre-modal-title {
    font-size: 15px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 10px;                                        /* Espacio */
}

.fre-modal-close {
    background: transparent;                          /* Sin fondo */
    border: none;                                     /* Sin borde */
    color: var(--color-white);                        /* Blanco */
    font-size: 18px;                                  /* Tamano */
    cursor: pointer;                                  /* Cursor mano */
    padding: 6px 10px;                                /* Espacio interno */
    border-radius: var(--radius-sm);                  /* Bordes pequenos */
    transition: background 0.2s ease;                 /* Transicion */
    min-width: 36px;                                  /* Tamano tactil */
    min-height: 36px;                                 /* Tamano tactil */
}

.fre-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);             /* Fondo claro */
}

.fre-modal-body {
    padding: 24px;                                    /* Espacio interno */
}

.fre-modal-footer {
    background: #F8FAFC;                              /* Gris muy claro */
    padding: 14px 24px;                               /* Espacio interno */
    display: flex;                                    /* Flexbox */
    justify-content: flex-end;                        /* Botones derecha */
    gap: 10px;                                        /* Espacio botones */
    border-top: 1px solid var(--color-border);        /* Linea divisoria */
    flex-wrap: wrap;                                  /* Wrap en moviles */
}

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

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

.fre-form-label {
    display: block;                                   /* Bloque */
    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 rojo */
    color: var(--color-red);                          /* Rojo */
}

.fre-form-input {
    width: 100%;                                      /* Ancho completo */
    padding: 10px 14px;                               /* Espacio interno */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-md);                  /* Bordes medianos */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 15px;                                  /* Tamano (16px+ evita zoom iOS) */
    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;  /* Transicion */
    outline: none;                                    /* Sin outline */
    min-height: 44px;                                 /* Altura tactil */
}

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

/* ============================================================
   BLOQUE 15: 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 del modal */
    backdrop-filter: blur(4px);                       /* Blur */
    padding: 20px;                                    /* Padding moviles */
    animation: freFadeIn 0.2s ease;                   /* Animacion */
}

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

.fre-flash-modal {
    background: var(--color-white);                   /* Fondo blanco */
    border-radius: var(--radius-lg);                  /* Bordes grandes */
    padding: 28px 32px;                               /* Espacio interno */
    max-width: 440px;                                 /* Ancho maximo */
    width: 100%;                                      /* Ancho completo */
    box-shadow: var(--shadow-modal);                  /* Sombra */
    text-align: center;                               /* Centrado */
    animation: freModalEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fre-flash-icon {
    width: 60px;                                      /* Ancho */
    height: 60px;                                     /* Alto */
    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); }   /* Verde */
.fre-flash-icon.fre-error   { background: var(--color-red); }     /* Rojo */
.fre-flash-icon.fre-warning { background: var(--color-blue); }    /* Azul */
.fre-flash-icon.fre-info    { background: var(--color-blue); }    /* Azul */

.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 largas */
}

.fre-flash-button {
    padding: 10px 30px;                               /* Espacio interno */
    border: none;                                     /* Sin borde */
    border-radius: var(--radius-md);                  /* Bordes medianos */
    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 mano */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    transition: background 0.2s ease;                 /* Transicion */
    text-transform: uppercase;                        /* Mayusculas */
    min-height: 40px;                                 /* Tamano tactil */
}

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

/* ============================================================
   BLOQUE 16: SPINNER DE CARGA
   ============================================================ */
.fre-spinner {
    display: inline-block;                            /* Inline-block */
    width: 14px;                                      /* Ancho */
    height: 14px;                                     /* Alto */
    border: 2px solid rgba(255, 255, 255, 0.3);       /* Borde claro */
    border-top-color: var(--color-white);             /* Borde superior blanco */
    border-radius: 50%;                               /* Circular */
    animation: freSpin 0.7s linear infinite;          /* Rotacion */
}

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

/* ============================================================
   BLOQUE 16B: MODAL DE INFORMACION DE EMPRESA
   Estilos especificos para el modal Info (mas ancho, secciones)
   Letras 2px mas grandes que el resto
   ============================================================ */
.fre-modal-info {
    width: 600px;                                     /* Mas ancho que el default */
    max-width: 100%;                                  /* Maximo en moviles */
}

.fre-info-section {
    margin-bottom: 22px;                              /* Espacio entre secciones */
    padding-bottom: 18px;                             /* Padding inferior */
    border-bottom: 1px solid var(--color-border-soft);  /* Linea divisoria */
}

.fre-info-section:last-child {
    margin-bottom: 0;                                 /* Sin margen el ultimo */
    padding-bottom: 0;                                /* Sin padding */
    border-bottom: none;                              /* Sin linea */
}

.fre-info-section-title {
    display: flex;                                    /* Flexbox */
    align-items: center;                              /* Centrado vertical */
    gap: 9px;                                         /* Espacio icono-texto */
    font-size: 13px;                                  /* +2px segun pedido */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.8px;                            /* Espaciado letras */
    color: var(--color-blue);                         /* Azul corporativo */
    margin-bottom: 14px;                              /* Espacio inferior */
    text-transform: uppercase;                        /* Mayusculas */
}

.fre-info-section-title i {
    font-size: 16px;                                  /* Icono */
}

.fre-info-row {
    display: flex;                                    /* Flexbox */
    padding: 8px 0;                                   /* Padding vertical */
    gap: 14px;                                        /* Gap label-value */
    flex-wrap: wrap;                                  /* Wrap si es chico */
    align-items: flex-start;                         /* Top alignment */
}

.fre-info-label {
    flex: 0 0 110px;                                  /* Ancho fijo */
    font-size: 14px;                                  /* +2px segun pedido */
    font-weight: 700;                                 /* Negrita */
    color: var(--color-text-soft);                    /* Gris */
    padding-top: 4px;                                 /* Alinear con value */
}

.fre-info-value {
    flex: 1;                                          /* Ocupa resto */
    min-width: 0;                                     /* Permite shrink */
    font-size: 14px;                                  /* +2px segun pedido */
    color: var(--color-text);                         /* Texto principal */
    display: flex;                                    /* Flex para boton copy inline */
    align-items: center;                              /* Centrado vertical */
    gap: 8px;                                         /* Gap value-boton */
    flex-wrap: wrap;                                  /* Wrap si es chico */
    line-height: 1.4;                                 /* Altura linea */
    word-break: break-all;                            /* Romper palabras largas */
}

.fre-info-value > span:first-child {
    flex: 1;                                          /* Ocupa espacio */
    min-width: 0;                                     /* Permite shrink */
}

.fre-info-mono {
    font-family: 'Consolas', 'Courier New', monospace;  /* Monoespaciada */
    font-size: 14px;                                  /* +2px segun pedido */
    color: var(--color-navy);                         /* Azul marino */
    font-weight: 700;                                 /* Negrita */
}

/* Boton para copiar al clipboard */
.fre-copy-btn {
    background: var(--color-white);                   /* Blanco */
    border: 1px solid var(--color-border);            /* Borde */
    color: var(--color-blue);                         /* Azul */
    width: 32px;                                      /* Ancho */
    height: 32px;                                     /* Alto */
    border-radius: var(--radius-sm);                  /* Bordes */
    cursor: pointer;                                  /* Cursor */
    display: inline-flex;                             /* Flex */
    align-items: center;                              /* Centrado vertical */
    justify-content: center;                          /* Centrado horizontal */
    font-size: 13px;                                  /* Tamano icono */
    transition: all 0.15s ease;                       /* Transicion */
    flex-shrink: 0;                                   /* No reducir */
}

.fre-copy-btn:hover {
    background: var(--color-blue);                    /* Azul al hover */
    color: var(--color-white);                        /* Blanco */
    border-color: var(--color-blue);                  /* Borde azul */
}

.fre-copy-btn.fre-copied {
    background: var(--color-green);                   /* Verde si copiado */
    color: var(--color-white);                        /* Blanco */
    border-color: var(--color-green);                 /* Borde verde */
}

/* Input del alias con boton inline */
.fre-alias-input-wrap {
    display: flex;                                    /* Flexbox */
    gap: 8px;                                         /* Gap */
    width: 100%;                                      /* Ancho completo */
    flex-wrap: wrap;                                  /* Wrap moviles */
}

.fre-alias-input {
    flex: 1;                                          /* Ocupa espacio */
    min-width: 180px;                                 /* Ancho minimo */
    padding: 10px 14px;                               /* Padding */
    border: 1px solid var(--color-border);            /* Borde */
    border-radius: var(--radius-md);                  /* Bordes */
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 15px;                                  /* +2px segun pedido */
    color: var(--color-navy);                         /* Azul marino */
    background: var(--color-white);                   /* Blanco */
    transition: all 0.2s ease;                        /* Transicion */
    outline: none;                                    /* Sin outline */
    min-height: 40px;                                 /* Tactil */
    font-weight: 700;                                 /* Negrita */
}

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

.fre-alias-hint {
    font-size: 12px;                                  /* Hint chico */
    color: var(--color-text-muted);                   /* Gris */
    margin-top: 6px;                                  /* Espacio superior */
    width: 100%;                                      /* Ancho completo */
}

.fre-button-small {
    padding: 9px 18px;                                /* Padding */
    border-radius: var(--radius-md);                  /* Bordes */
    background: var(--color-blue);                    /* Azul */
    color: var(--color-white);                        /* Blanco */
    border: none;                                     /* Sin borde */
    font-family: 'Calibri', sans-serif;               /* Calibri */
    font-size: 13px;                                  /* Tamano */
    font-weight: 700;                                 /* Negrita */
    letter-spacing: 0.5px;                            /* Espaciado letras */
    cursor: pointer;                                  /* Cursor */
    text-transform: uppercase;                        /* Mayusculas */
    transition: background 0.2s ease;                 /* Transicion */
    display: inline-flex;                             /* Flex */
    align-items: center;                              /* Centrado vertical */
    gap: 6px;                                         /* Gap */
    min-height: 40px;                                 /* Tactil */
    white-space: nowrap;                              /* Sin wrap */
}

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

.fre-button-small:disabled {
    background: #cccccc;                              /* Gris */
    cursor: not-allowed;                              /* No permitido */
}

/* URL del alias destacada */
.fre-alias-url {
    font-family: 'Consolas', 'Courier New', monospace;
    color: var(--color-blue);                         /* Azul */
    font-weight: 700;                                 /* Negrita */
}

.fre-alias-empty {
    color: var(--color-text-muted) !important;        /* Gris si no hay alias */
    font-weight: 400 !important;                      /* Sin negrita */
}

/* ============================================================
   BLOQUE 17: FOOTER OBLIGATORIO
   ============================================================ */
.fre-footer {
    position: fixed;                                  /* Fijo abajo */
    bottom: 0;                                        /* Pegado */
    left: 0;                                          /* Izquierda */
    width: 100%;                                      /* Ancho completo */
    background: rgba(0, 0, 0, 0.85);                  /* Negro semi-trans */
    color: var(--color-white);                        /* Blanco */
    padding: 10px 20px;                               /* Espacio interno */
    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;                                        /* Espacio items */
}

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

.fre-footer-item i.fre-icon-phone { color: #00ff7f; } /* Verde brillante */
.fre-footer-item i.fre-icon-email { color: #ff4757; } /* Rojo */
.fre-footer-item i.fre-icon-web   { color: #1e90ff; } /* Azul */
.fre-footer-item i.fre-icon-copy  { color: #ba68c8; } /* Morado */

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

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

/* ============================================================
   BLOQUE 18: RESPONSIVE - TABLET (<=768px)
   En tablet/movil: ocultar tabla, mostrar cards
   ============================================================ */
@media (max-width: 768px) {
    .fre-header {
        padding: 12px 16px;                           /* Padding menor */
    }
    .fre-header-user-info {
        display: none;                                /* Oculta info en tablet/movil */
    }
    .fre-container {
        padding: 18px 16px;                           /* Padding menor */
    }
    .fre-page-title {
        font-size: 22px;                              /* Titulo mas chico */
    }
    .fre-page-eyebrow {
        font-size: 10px;                              /* Eyebrow mas chico */
    }
    .fre-stats {
        padding: 14px 18px;                           /* Padding menor */
    }

    /* Stat cards en grid 2 columnas en tablet */
    .fre-stats-grid {
        width: 100%;                                  /* Ancho completo */
        display: grid;                                /* Grid en tablet */
        grid-template-columns: 1fr 1fr;               /* 2 columnas iguales */
        gap: 10px;                                    /* Espacio entre cards */
    }
    .fre-stat-card {
        min-width: 0;                                 /* Permite shrink */
        padding: 14px 18px;                           /* Padding tablet */
    }
    .fre-stat-value {
        font-size: 26px;                              /* Mas chico */
    }
    .fre-stat-value-text {
        font-size: 19px;                              /* Mas chico */
    }
    .fre-stat-label {
        font-size: 12px;                              /* Label tablet */
    }

    /* Ocultar tabla, mostrar cards */
    .fre-table-wrapper {
        display: none;                                /* Oculta tabla */
    }
    .fre-cards-wrapper {
        display: flex;                                /* Muestra cards */
    }

    .fre-empty-state {
        padding: 40px 20px;                           /* Padding menor */
    }
    .fre-modal-body {
        padding: 18px;                                /* Padding menor */
    }
    .fre-modal-footer {
        padding: 12px 18px;                           /* Padding menor */
    }
}

/* ============================================================
   BLOQUE 19: RESPONSIVE - MOVIL (<=480px)
   ============================================================ */
@media (max-width: 480px) {
    .fre-header {
        padding: 10px 14px;                           /* Padding menor */
        gap: 8px;                                     /* Espacio menor */
    }
    .fre-header-logo-text {
        font-size: 13px;                              /* Mas chico */
        letter-spacing: 0.5px;                        /* Menos espaciado */
    }
    .fre-header-logo-icon {
        width: 32px;                                  /* Mas chico */
        height: 32px;                                 /* Mas chico */
    }
    .fre-header-logo-icon i {
        font-size: 15px;                              /* Mas chico */
    }
    .fre-button-primary,
    .fre-button-secondary {
        padding: 10px 16px;                           /* Padding menor */
        font-size: 12px;                              /* Mas chico */
        letter-spacing: 0.5px;                        /* Menos espaciado */
    }
    .fre-logout-button {
        padding: 8px 12px;                            /* Padding menor */
        font-size: 11px;                              /* Mas chico */
    }
    .fre-logout-button span {
        display: none;                                /* Oculta texto, solo icono */
    }
    .fre-page-title {
        font-size: 20px;                              /* Titulo */
    }
    .fre-page-subtitle {
        font-size: 12px;                              /* Subtitulo */
    }
    .fre-modal-footer {
        flex-direction: column-reverse;               /* Botones vertical */
    }
    .fre-modal-footer button {
        width: 100%;                                  /* Ancho completo */
    }
    .fre-footer {
        font-size: 11px;                              /* Mas chico */
        padding: 8px 12px;                            /* Padding menor */
        gap: 12px;                                    /* Menos gap */
    }
    body {
        padding-bottom: 70px;                         /* Mas espacio por footer wrap */
    }
}

/* ============================================================
   BLOQUE EXTRA: BORRADO DE EMPRESA
   - modal de delete con paso 1 (nombre) y paso 2 (password)
   (El boton .fre-action-delete se define en BLOQUE 8B, mas arriba)
   ============================================================ */

/* Header del modal en modo danger (rojo) */
.fre-modal-header-danger {
    background: var(--color-red);
    border-bottom: 3px solid #a01030;
}

/* Boton danger en el footer del modal */
.fre-button-danger {
    background: var(--color-red);
    color: var(--color-white);
    border: 1px solid var(--color-red);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.fre-button-danger:hover:not(:disabled) {
    background: #a01030;
    border-color: #a01030;
}
.fre-button-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Banner de advertencia dentro del modal */
.fre-delete-warning {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #7F1D1D;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 18px;
    line-height: 1.45;
}
.fre-delete-warning i {
    font-size: 22px;
    color: var(--color-red);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Bloques de paso */
.fre-delete-step {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
    background: #fafbfd;
}

.fre-delete-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 6px;
    font-size: 14px;
}

.fre-delete-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-red);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.fre-delete-help {
    color: var(--color-text-soft);
    font-size: 13px;
    line-height: 1.45;
    margin: 6px 0 10px;
}

.fre-delete-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-family: inherit;
    background: var(--color-white);
    color: var(--color-text);
    box-sizing: border-box;
}
.fre-delete-input:focus {
    outline: none;
    border-color: var(--color-red);
    box-shadow: 0 0 0 3px rgba(220, 20, 60, 0.15);
}

.fre-delete-error {
    color: var(--color-red);
    font-size: 12.5px;
    margin-top: 6px;
    min-height: 18px;
}