/* =============================================================================
   justtime.web.reportes - CSS global del satelite
   Tokens del sistema de diseño JustTime (replicados: cada app tiene su propio
   wwwroot) + sustitutos HTML puro de los controles Syncfusion (jt-btn, jt-input,
   jt-label, jt-panel, jt-chip) segun directrices del ui-designer.
   ============================================================================= */

:root {
    /* Colores oficiales JustTime */
    --jt-brand:        #F01E29;
    --jt-brand-dark:   #900A0B;
    --jt-black:        #000000;
    --jt-gray-dark:    #282828;
    --jt-gray-mid:     #3D3D3D;
    --jt-gray-light:   #D8D8D8;
    --jt-gray-bg:      #F8F8F8;
    --jt-white:        #FFFFFF;
    --jt-success:      #198754;
    --jt-warning:      #ffc107;
    --jt-info:         #0dcaf0;
    --jt-danger:       #dc3545;

    /* Tipografia */
    --jt-font-display: 'Funnel Display', 'Segoe UI', system-ui;
    --jt-font-body:    'Tahoma', 'Segoe UI', system-ui;
    --text-size:       0.85rem;
    --jt-font-size-xs:   0.68rem;
    --jt-font-size-sm:   0.72rem;
    --jt-font-size-base: var(--text-size);
    --jt-font-size-md:   0.85rem;
    --jt-font-size-lg:   1rem;
    --jt-font-size-xl:   1.15rem;
}

body {
    font-family: var(--jt-font-body);
    font-size: var(--jt-font-size-base);
    color: var(--jt-gray-dark);
    background: var(--jt-gray-bg);
    margin: 0;
}

/* --- Botones ---------------------------------------------------------------- */
.jt-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--jt-font-body);
    font-size: var(--jt-font-size-base);
    padding: 6px 14px; border-radius: 4px;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s, border-color .15s;
    text-decoration: none;
}
.jt-btn-brand         { background: var(--jt-brand); border-color: var(--jt-brand); color: var(--jt-white); }
.jt-btn-brand:hover   { background: var(--jt-brand-dark); border-color: var(--jt-brand-dark); }
.jt-btn-outline       { background: var(--jt-white); border-color: var(--jt-gray-light); color: var(--jt-gray-dark); }
.jt-btn-outline:hover { border-color: var(--jt-gray-mid); background: var(--jt-gray-bg); }
.jt-btn:disabled      { opacity: .55; cursor: not-allowed; }
.jt-btn-sm            { padding: 4px 10px; font-size: var(--jt-font-size-sm); }

/* --- Inputs y labels ---------------------------------------------------------- */
.jt-input {
    font-family: var(--jt-font-body);
    font-size: var(--jt-font-size-base);
    color: var(--jt-gray-dark);
    border: 1px solid var(--jt-gray-light);
    border-radius: 4px; padding: 5px 8px; width: 100%;
    background: var(--jt-white);
}
.jt-input:focus {
    outline: none; border-color: var(--jt-brand);
    box-shadow: 0 0 0 2px rgba(240, 30, 41, 0.15);
}
.jt-label {
    font-family: var(--jt-font-body);
    font-size: var(--jt-font-size-sm);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--jt-gray-mid);
    margin-bottom: 2px; display: block;
}
.req { color: var(--jt-brand); }

/* --- Paneles ------------------------------------------------------------------ */
.jt-panel {
    background: var(--jt-white);
    border: 1px solid var(--jt-gray-light);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.jt-panel-header {
    background: var(--jt-brand-dark);
    color: var(--jt-white);
    font-size: var(--jt-font-size-sm);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
}
.jt-panel-body { padding: 12px; }
.jt-panel-body.sin-padding { padding: 0; }

/* --- Chips de ambito ------------------------------------------------------------ */
.jt-chip {
    display: inline-block; padding: 2px 10px;
    border-radius: 10px;
    font-size: var(--jt-font-size-xs);
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; border: 1px solid transparent;
    white-space: nowrap;
}
/* Ambito del informe (lo fija el ambiente): Justtime = marca, Cliente = verde. */
.jt-chip-justtime   { background: color-mix(in srgb, var(--jt-brand) 10%, transparent);   color: var(--jt-brand-dark); border-color: color-mix(in srgb, var(--jt-brand) 30%, transparent); }
.jt-chip-cliente    { background: color-mix(in srgb, var(--jt-success) 10%, transparent); color: var(--jt-success);    border-color: color-mix(in srgb, var(--jt-success) 30%, transparent); }
/* Los tres siguientes ya no son ambitos: se usan para "Sin guardar", "declarada", "Actual", "N filas" y "Modo dev". */
.jt-chip-estandar   { background: rgba(240, 30, 41, .10); color: var(--jt-brand-dark); border-color: rgba(240, 30, 41, .30); }
.jt-chip-compartido { background: rgba(25, 135, 84, .10); color: var(--jt-success);    border-color: rgba(25, 135, 84, .30); }
.jt-chip-privado    { background: var(--jt-gray-bg);      color: var(--jt-gray-mid);   border-color: var(--jt-gray-light); }
.jt-chip-ok         { background: rgba(25, 135, 84, .10); color: var(--jt-success);    border-color: rgba(25, 135, 84, .30); }

/* --- Navbar del satelite --------------------------------------------------------- */
.jt-navbar {
    background: var(--jt-gray-dark);
    color: var(--jt-white);
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
}
.jt-navbar .marca {
    font-family: var(--jt-font-display);
    font-size: var(--jt-font-size-lg);
    font-weight: 700; color: var(--jt-white);
}
.jt-navbar .marca b { color: var(--jt-brand); }
.jt-navbar .usuario {
    margin-left: auto;
    font-size: var(--jt-font-size-sm);
    color: var(--jt-gray-light);
}