/* =========================================================
   ELECTRINET GO — SISTEMA VISUAL COMPARTIDO
   Componentes reutilizables para los módulos del ERP
========================================================= */

/* =========================================================

   ELECTRINET GO UI KIT

   ÍNDICE

   01 - Variables
   02 - Reset
   03 - Layout
   04 - Tipografía
   05 - Header
   06 - Botones
   07 - Cards
   08 - Badges
   09 - Formularios
   10 - Buscador
   11 - Tablas
   12 - Utilidades
   13 - Responsive

========================================================= */

:root{

    /* =====================================================
       01 — COLORES CORPORATIVOS
    ===================================================== */

    --erp-azul:#06305B;
    --erp-azul-claro:#0b477f;
    --erp-azul-oscuro:#001d3d;
    --erp-naranja:#EB6C00;


    /* =====================================================
       02 — SUPERFICIES
    ===================================================== */

    --erp-fondo:#f7f9fb;

    --erp-surface:#ffffff;
    --erp-surface-soft:#fafbfd;


    /* =====================================================
       03 — TEXTO
    ===================================================== */

    --erp-text:#1f2937;
    --erp-text-soft:#64748b;
    --erp-text-light:#9ca3af;


    /* =====================================================
       04 — BORDES Y DIVISORES
    ===================================================== */

    --erp-border:#e5e7eb;
    --erp-divider:#eef2f7;


    /* =====================================================
       05 — RADIOS
    ===================================================== */

    --erp-radius-sm:12px;
    --erp-radius-md:18px;
    --erp-radius-lg:22px;
    --erp-radius-xl:28px;


    /* =====================================================
       06 — SOMBRAS
    ===================================================== */

    --erp-shadow-sm:0 6px 18px rgba(0,0,0,.05);
    --erp-shadow-md:0 12px 35px rgba(0,0,0,.08);
    --erp-shadow-lg:0 20px 45px rgba(0,0,0,.12);


    /* =====================================================
       07 — COMPATIBILIDAD TEMPORAL
       Mantener hasta migrar todos los módulos
    ===================================================== */

    --erp-blanco:var(--erp-surface);

    --erp-texto:var(--erp-text);
    --erp-texto-suave:var(--erp-text-soft);

    --erp-borde:var(--erp-border);

    --erp-radio-campo:6px;
    --erp-radio-card:14px;
    --erp-radio-header:var(--erp-radius-lg);

    --erp-sombra-suave:0 8px 24px rgba(0,0,0,.05);
    --erp-sombra-header:0 18px 45px rgba(6,48,91,.18);
}

/* Evita alterar módulos antes de migrarlos */
.erp-ui,
.erp-ui *,
.erp-ui *::before,
.erp-ui *::after{
    box-sizing:border-box;
}

/* =========================================================
   BOTÓN COMPARTIDO — VOLVER AL PANEL
   ========================================================= */

.erp-ui .ed-module-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-width:210px;
    min-height:48px;

    margin:0;
    padding:12px 18px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.20);
    border-radius:var(--erp-radio-campo);

    color:var(--erp-blanco) !important;

    font-family:Arial, sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:700;

    text-decoration:none !important;

    box-shadow:none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.erp-ui .ed-module-back:hover{
    background:var(--erp-blanco);
    border-color:var(--erp-blanco);

    color:var(--erp-azul) !important;

    transform:translateX(-2px);
}

.erp-ui .ed-module-back:focus{
    outline:none;

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.18);
}

@media(max-width:700px){

    .erp-ui .ed-module-back{
        width:100%;
        min-width:0;
    }
}

/* =========================================================
   CABECERA COMPARTIDA — MÓDULOS ELECTRINET GO
========================================================= */

.erp-ui .ed-module-header{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    
    min-width:0;
    overflow:hidden;

    margin-bottom:28px;
    padding:28px 30px;

    background:linear-gradient(
        135deg,
        var(--erp-azul),
        var(--erp-azul-oscuro)
    );

    border-radius:var(--erp-radio-header);

    color:var(--erp-blanco);

    box-shadow:var(--erp-sombra-header);
}

.erp-ui .ed-module-header-content{
    min-width:0;
    flex:1;
}

.erp-ui .ed-module-badge{
    display:inline-flex;
    align-items:center;

    margin-bottom:10px;
    padding:6px 11px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

    color:var(--erp-blanco);

    font-size:11px;
    line-height:1;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.8px;
}

.erp-ui .ed-module-title{
    margin:0;

    color:var(--erp-blanco);

    font-size:34px;
    line-height:1.1;
    font-weight:800;
}

.erp-ui .ed-module-description{
    max-width:680px;

    margin:10px 0 0;

    color:rgba(255,255,255,.78);

    font-size:15px;
    line-height:1.55;
}

.erp-ui .ed-module-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    flex-shrink:0;
    min-width:0;
}

@media(max-width:700px){

    .erp-ui .ed-module-header{
        align-items:stretch;
        flex-direction:column;

        padding:24px 20px;

        border-radius:16px;
    }

    .erp-ui .ed-module-title{
        font-size:28px;
    }

    .erp-ui .ed-module-header-actions{
        width:100%;
    }
}

/* =========================================================
   BUSCADOR COMPARTIDO
   ========================================================= */

.erp-ui .ed-search-box{
    position:relative;

    display:flex;
    align-items:center;

    margin-bottom:24px;
}

.erp-ui .ed-search-icon{
    position:absolute;

    left:18px;

    width:18px;
    height:18px;

    opacity:.45;

    pointer-events:none;
}

.erp-ui .ed-search-input{

    width:100%;
    min-height:54px;

    padding:0 18px 0 52px;

    border:1px solid var(--erp-borde);

    border-radius:var(--erp-radio-campo);

    background:#fff;

    font-size:15px;

    transition:
        border-color .20s,
        box-shadow .20s;
}

.erp-ui .ed-search-input:focus{

    outline:none;

    border-color:var(--erp-naranja);

    box-shadow:0 0 0 4px rgba(235,108,0,.10);
}

.erp-ui .ed-search-input::placeholder{

    color:#8a94a6;
}

/* =========================================================
      CARD BASE
   ========================================================= */

.erp-ui .ed-ui-card{
    display:flex;
    flex-direction:column;

    background:var(--erp-surface);

    border:1px solid var(--erp-border);
    border-radius:20px;

    box-shadow:var(--erp-shadow-sm);

    overflow:hidden;

    transition:
        border-color .20s,
        box-shadow .20s,
        transform .20s;
}

.erp-ui .ed-ui-card:hover{
    border-color:#d9e2ec;

    box-shadow:var(--erp-shadow-md);

    transform:translateY(-2px);
}

.erp-ui .ed-ui-card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    padding:20px 22px;

    border-bottom:1px solid var(--erp-divider);
}

.erp-ui .ed-ui-card-body{
    padding:22px;
}

.erp-ui .ed-ui-card-footer{
    padding:18px 22px;

    background:var(--erp-surface-soft);

    border-top:1px solid var(--erp-divider);
}

.erp-ui .ed-ui-card-title{
    margin:0;

    color:var(--erp-azul);

    font-size:22px;
    font-weight:800;
}

.erp-ui .ed-ui-card-subtitle{
    margin-top:6px;

    color:var(--erp-text-soft);

    font-size:14px;
    line-height:1.5;
}

/* =========================================================
      BADGES
   ========================================================= */

.erp-ui .ed-ui-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    min-height:28px;

    padding:6px 12px;

    border:1px solid transparent;
    border-radius:999px;

    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;

    white-space:nowrap;
}

.erp-ui .ed-ui-badge-primary{
    color:#fff;

    background:var(--erp-azul);
}

.erp-ui .ed-ui-badge-secondary{
    color:var(--erp-azul);

    background:#edf4fb;
    border-color:#d7e6f5;
}

.erp-ui .ed-ui-badge-success{
    color:#15803d;

    background:#ecfdf3;
    border-color:#bbf7d0;
}

.erp-ui .ed-ui-badge-warning{
    color:#a16207;

    background:#fffbeb;
    border-color:#fde68a;
}

.erp-ui .ed-ui-badge-danger{
    color:#dc2626;

    background:#fff1f2;
    border-color:#fecdd3;
}

/* =========================================================
      BOTONES
   ========================================================= */

.erp-ui .ed-ui-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:42px;

    padding:10px 18px;

    border:1px solid transparent;
    border-radius:12px;

    font-size:14px;
    line-height:1;
    font-weight:700;

    cursor:pointer;

    text-decoration:none !important;

    transition:
        background .20s,
        color .20s,
        border-color .20s,
        transform .20s,
        box-shadow .20s;
}

.erp-ui .ed-ui-btn:hover{
    transform:translateY(-1px);
}

.erp-ui .ed-ui-btn-primary{
    background:var(--erp-azul);
    color:#fff !important;
}

.erp-ui .ed-ui-btn-primary:hover{
    background:var(--erp-naranja);
    color:#fff !important;
}

.erp-ui .ed-ui-btn-secondary{
    background:var(--erp-surface);

    color:var(--erp-azul) !important;

    border-color:var(--erp-border);
}

.erp-ui .ed-ui-btn-secondary:hover{
    border-color:var(--erp-naranja);

    color:var(--erp-naranja) !important;
}

.erp-ui .ed-ui-btn-danger{
    background:#dc2626;

    color:#fff !important;
}

.erp-ui .ed-ui-btn-danger:hover{
    background:#b91c1c;

    color:#fff !important;
}

.erp-ui .ed-ui-btn:focus{
    outline:none;

    box-shadow:
        0 0 0 3px
        rgba(6,48,91,.14);
}

.erp-ui .ed-ui-btn:disabled{
    opacity:.45;

    cursor:not-allowed;

    transform:none;
}

/* =========================================================
      TIPOGRAFÍA
   ========================================================= */

.erp-ui .ed-text-xs{

    font-size:12px;
    line-height:1.4;
}

.erp-ui .ed-text-sm{

    font-size:14px;
    line-height:1.5;
}

.erp-ui .ed-text-md{

    font-size:16px;
    line-height:1.5;
}

.erp-ui .ed-text-lg{

    font-size:20px;
    line-height:1.4;
    font-weight:700;
}

.erp-ui .ed-text-xl{

    font-size:26px;
    line-height:1.2;
    font-weight:800;
}