@import '_content/justtime.components.informes/justtime.components.informes.17njq7bwn3.bundle.scp.css';

/* /Componentes/Layout/LoginLayout.razor.rz.scp.css */
/* Login: lienzo de pantalla completa; la pagina dibuja las dos columnas. */
.login-main[b-zvuayo9j6j] {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--jt-white);
}
/* /Componentes/Layout/MainLayout.razor.rz.scp.css */
.marca-ico[b-9skealw7tq] { color: var(--jt-brand); font-size: var(--jt-font-size-xl); }

.acceso-msg[b-9skealw7tq] {
    max-width: 480px;
    margin: 48px auto;
    padding: 0 16px;
}

/* --- Ambiente: franja de 3 px bajo la barra + chip del mismo color ------------------------------------ */
/* Desarrollo neutro, Preproduccion ambar, Produccion rojo marca. El chip repite el color porque la barra es
   oscura: la franja se ve de lejos, el chip dice el nombre. */
.franja-ambiente[b-9skealw7tq] { height: 3px; width: 100%; }
.franja-desarrollo[b-9skealw7tq]   { background: var(--jt-gray-mid); }
.franja-preproduccion[b-9skealw7tq] { background: var(--jt-warning); }
.franja-produccion[b-9skealw7tq]   { background: var(--jt-brand); }

.amb-desarrollo[b-9skealw7tq]   { background: var(--jt-gray-bg);  color: var(--jt-gray-mid);  border-color: var(--jt-gray-light); }
.amb-preproduccion[b-9skealw7tq] { background: var(--jt-warning);  color: var(--jt-gray-dark); border-color: var(--jt-warning); }
.amb-produccion[b-9skealw7tq]   { background: var(--jt-brand);    color: var(--jt-white);     border-color: var(--jt-brand); }

/* --- Badge "N listos para publicar" -------------------------------------------------------------------- */
/* Va junto al usuario (que ya empuja el resto a la derecha): el badge lleva su propio margen izquierdo auto y el
   usuario pierde el suyo cuando le sigue. */
.listos[b-9skealw7tq] {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 10px;
    background: var(--jt-warning); color: var(--jt-gray-dark);
    font-size: var(--jt-font-size-sm); font-weight: 700;
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
    transition: background .12s ease, border-color .12s ease;
}
.listos:hover[b-9skealw7tq] { background: var(--jt-white); border-color: var(--jt-warning); color: var(--jt-gray-dark); }
.listos:focus-visible[b-9skealw7tq] { outline: 2px solid var(--jt-white); outline-offset: 2px; }
.listos + .usuario[b-9skealw7tq] { margin-left: 0; }

/* Cerrar sesion (login del estudio): formulario POST en linea dentro de la barra */
.salir[b-9skealw7tq] { margin: 0; }

/* Chip "Modo dev" sobre la barra oscura: la variante global (rojo oscuro sobre rojo translucido) no se lee aqui. */
.jt-navbar .jt-chip-estandar[b-9skealw7tq] {
    background: rgba(255, 255, 255, .14);
    color: var(--jt-white);
    border-color: rgba(255, 255, 255, .35);
}

/* --- Enlace "Destinos" (solo Preproduccion) ---------------------------------------------------------- */
.nav-destinos[b-9skealw7tq] {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 4px;
    color: var(--jt-gray-light); text-decoration: none; font-size: var(--jt-font-size-sm);
    border: 1px solid transparent;
}
.nav-destinos:hover[b-9skealw7tq] { color: var(--jt-white); border-color: rgba(255, 255, 255, .35); }
.nav-destinos:focus-visible[b-9skealw7tq] { outline: 2px solid var(--jt-white); outline-offset: 2px; }

/* --- Badge "Publicando… 3/11" (publicacion en segundo plano) ------------------------------------------ */
.publicando[b-9skealw7tq] {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 10px; border-radius: 10px;
    background: rgba(255, 255, 255, .14); color: var(--jt-white);
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: var(--jt-font-size-sm); font-weight: 700; text-decoration: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.publicando:hover[b-9skealw7tq] { background: rgba(255, 255, 255, .24); color: var(--jt-white); }
.publicando:focus-visible[b-9skealw7tq] { outline: 2px solid var(--jt-white); outline-offset: 2px; }
.publicando.pub-enviando i[b-9skealw7tq] { color: var(--jt-brand); }
.publicando.pub-ok[b-9skealw7tq] { background: var(--jt-success); border-color: var(--jt-success); }
.publicando.pub-error[b-9skealw7tq] { background: var(--jt-brand); border-color: var(--jt-brand); }
.publicando + .listos[b-9skealw7tq], .publicando + .usuario[b-9skealw7tq] { margin-left: 0; }
.publicando .girando[b-9skealw7tq] { display: inline-block; animation: lay-gira-b-9skealw7tq .9s linear infinite; }
@keyframes lay-gira-b-9skealw7tq { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .publicando .girando[b-9skealw7tq] { animation: none; } }
/* /Componentes/Pages/Destinos.razor.rz.scp.css */
/* Pagina Destinos: mas ancha que el catalogo (la matriz crece a lo ancho con los catalogos). */
.contenido[b-2tcs3zv5hu] {
    padding: 16px;
    max-width: 1680px;
    margin: 0 auto;
}

.titulo[b-2tcs3zv5hu] {
    margin: 0;
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: var(--jt-font-size-xl);
    color: var(--jt-gray-dark);
}

.bajada[b-2tcs3zv5hu] { font-size: var(--jt-font-size-sm); color: var(--jt-gray-mid); }
/* /Componentes/Pages/Home.razor.rz.scp.css */
/* 1440 y no 1200: el catalogo dejo de ser una tabla sola y ahora lleva la
   columna de carpetas al lado. Con 1200 el ancho del arbol se lo comia a las
   columnas de la tabla, que es donde esta la informacion. */
.contenido[b-7knfllg7pw] {
    padding: 16px;
    max-width: 1440px;
    margin: 0 auto;
}
/* /Componentes/Pages/Login.razor.rz.scp.css */
/* Login del estudio (ETAPA1_PUBLICACION 8.1): pantalla completa a dos columnas. Izquierda la marca sobre gris oscuro
   (mismo gris que la barra del portal), derecha el formulario sobre blanco. Las tarjetas de ambiente llevan el color de
   la franja que se vera despues en el portal: Desarrollo neutro (gris medio), Preproduccion ambar. */

.lg[b-w6ta13bsfq] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(340px, 44%) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
}

/* Franja del ambiente: crece de izquierda a derecha al enviar (la misma que pinta el portal bajo la barra). */
.lg-franja[b-w6ta13bsfq] {
    position: fixed; top: 0; left: 0; z-index: 10;
    height: 3px; width: 0;
    background: var(--jt-brand);
    transition: width .6s cubic-bezier(.2, .8, .2, 1);
}
.lg[data-ambiente="desarrollo"] .lg-franja[b-w6ta13bsfq] { background: var(--jt-gray-mid); }
.lg[data-ambiente="preproduccion"] .lg-franja[b-w6ta13bsfq] { background: var(--jt-warning); }
.lg.entrando .lg-franja[b-w6ta13bsfq] { width: 100%; }

/* ---- columna de marca --------------------------------------------------------------------------------- */
.lg-marca[b-w6ta13bsfq] {
    display: flex; flex-direction: column; gap: 32px;
    padding: 40px 48px;
    color: var(--jt-white);
    background:
        radial-gradient(120% 70% at 100% 100%, color-mix(in srgb, var(--jt-brand) 32%, transparent) 0%, transparent 60%),
        radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--jt-brand-dark) 40%, transparent) 0%, transparent 70%),
        var(--jt-gray-dark);
}
.lg-logo[b-w6ta13bsfq] { font-family: var(--jt-font-display); font-weight: 700; font-size: var(--jt-font-size-xl); letter-spacing: .01em; }
.lg-logo i[b-w6ta13bsfq] { color: var(--jt-brand); margin-right: 4px; }
.lg-logo b[b-w6ta13bsfq] { color: var(--jt-brand); }

.lg-marca-cuerpo[b-w6ta13bsfq] { margin-top: auto; margin-bottom: auto; max-width: 460px; animation: lg-sube-b-w6ta13bsfq .5s ease both; }
.lg-titulo[b-w6ta13bsfq] {
    margin: 0 0 10px;
    font-family: var(--jt-font-display); font-weight: 700;
    font-size: calc(var(--jt-font-size-xl) * 2.3); line-height: 1.05; letter-spacing: -.01em;
}
.lg-bajada[b-w6ta13bsfq] { margin: 0 0 28px; font-size: var(--jt-font-size-lg); color: var(--jt-gray-light); }

.lg-ambientes[b-w6ta13bsfq] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lg-ambientes li[b-w6ta13bsfq] { display: flex; gap: 12px; align-items: flex-start; }
.lg-ambientes li > i[b-w6ta13bsfq] {
    flex: none; width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--jt-font-size-lg);
    background: rgba(255, 255, 255, .08); border-left: 3px solid var(--jt-gray-light);
}
.lg-ambientes li.amb-preproduccion > i[b-w6ta13bsfq] { border-left-color: var(--jt-warning); color: var(--jt-warning); }
.lg-amb-nom[b-w6ta13bsfq] { font-weight: 700; font-size: var(--jt-font-size-md); }
.lg-amb-txt[b-w6ta13bsfq] { font-size: var(--jt-font-size-sm); color: var(--jt-gray-light); }

.lg-pie[b-w6ta13bsfq] { font-size: var(--jt-font-size-xs); color: var(--jt-gray-light); opacity: .7; }

/* ---- columna del formulario ----------------------------------------------------------------------------- */
.lg-form-col[b-w6ta13bsfq] { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--jt-white); }
.lg-caja[b-w6ta13bsfq] { width: 100%; max-width: 400px; animation: lg-sube-b-w6ta13bsfq .5s ease .08s both; transition: opacity .3s ease; }
.lg.entrando .lg-caja[b-w6ta13bsfq] { opacity: .75; }

.lg-h2[b-w6ta13bsfq] { margin: 0; font-family: var(--jt-font-display); font-weight: 700; font-size: calc(var(--jt-font-size-xl) * 1.4); color: var(--jt-gray-dark); }
.lg-sub[b-w6ta13bsfq] { margin: 4px 0 18px; font-size: var(--jt-font-size-md); color: var(--jt-gray-mid); }

/* Tarjetas de ambiente: radios nativos (teclado y lector de pantalla gratis) bajo una tarjeta grande. */
.lg-destinos[b-w6ta13bsfq] {
    border: 0; margin: 0 0 20px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.lg-tarjeta[b-w6ta13bsfq] {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    min-height: 104px; padding: 14px 16px;
    border: 2px solid var(--jt-gray-light); border-top-width: 5px; border-radius: 8px;
    background: var(--jt-white); cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.lg-tarjeta.t-desarrollo[b-w6ta13bsfq] { border-top-color: var(--jt-gray-mid); }
.lg-tarjeta.t-preproduccion[b-w6ta13bsfq] { border-top-color: var(--jt-warning); }
.lg-tarjeta:hover[b-w6ta13bsfq] { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.lg-tarjeta:has(.lg-radio:checked)[b-w6ta13bsfq] {
    border-color: var(--jt-brand);
    background: color-mix(in srgb, var(--jt-brand) 4%, var(--jt-white));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--jt-brand) 14%, transparent);
}
.lg-tarjeta.t-desarrollo:has(.lg-radio:checked)[b-w6ta13bsfq] { border-top-color: var(--jt-gray-mid); }
.lg-tarjeta.t-preproduccion:has(.lg-radio:checked)[b-w6ta13bsfq] { border-top-color: var(--jt-warning); }
.lg-tarjeta:has(.lg-radio:focus-visible)[b-w6ta13bsfq] { outline: 3px solid var(--jt-brand-dark); outline-offset: 2px; }

.lg-radio[b-w6ta13bsfq] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

.lg-tecla[b-w6ta13bsfq] {
    position: absolute; top: 8px; right: 10px;
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px;
    border: 1px solid var(--jt-gray-light); background: var(--jt-gray-bg);
    font-size: var(--jt-font-size-xs); font-weight: 700; line-height: 18px; text-align: center; color: var(--jt-gray-mid);
}
.lg-tarjeta-ico[b-w6ta13bsfq] { font-size: calc(var(--jt-font-size-xl) * 1.3); color: var(--jt-gray-mid); }
.lg-tarjeta.t-preproduccion .lg-tarjeta-ico[b-w6ta13bsfq] { color: color-mix(in srgb, var(--jt-warning) 55%, var(--jt-gray-dark)); }
.lg-tarjeta-nom[b-w6ta13bsfq] { font-family: var(--jt-font-display); font-weight: 600; font-size: var(--jt-font-size-lg); color: var(--jt-gray-dark); }
.lg-tarjeta-ok[b-w6ta13bsfq] {
    position: absolute; top: 8px; left: 12px;
    color: var(--jt-brand); font-size: var(--jt-font-size-md);
    opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.lg-tarjeta:has(.lg-radio:checked) .lg-tarjeta-ok[b-w6ta13bsfq] { opacity: 1; transform: none; }

/* Campos con validacion inline: el mensaje aparece solo despues de que el usuario toco el campo (:user-invalid). */
.lg-campo[b-w6ta13bsfq] { margin-bottom: 14px; }
.lg-input[b-w6ta13bsfq] { padding: 9px 10px; font-size: var(--jt-font-size-md); }
.lg-input:user-invalid[b-w6ta13bsfq] { border-color: var(--jt-brand-dark); }
.lg-err-inline[b-w6ta13bsfq] { display: none; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--jt-font-size-xs); color: var(--jt-brand-dark); }
.lg-input:user-invalid ~ .lg-err-inline[b-w6ta13bsfq] { display: flex; }

.lg-entrar[b-w6ta13bsfq] {
    width: 100%; justify-content: center; margin-top: 6px;
    padding: 11px 16px; font-size: var(--jt-font-size-md); font-weight: 700;
}
.lg-entrar:focus-visible[b-w6ta13bsfq] { outline: 3px solid var(--jt-brand-dark); outline-offset: 2px; }
.lg-entrar-txt[b-w6ta13bsfq], .lg-entrar-espera[b-w6ta13bsfq] { display: inline-flex; align-items: center; gap: 6px; }
.lg-entrar-espera[b-w6ta13bsfq] { display: none; }
.lg.entrando .lg-entrar[b-w6ta13bsfq] { pointer-events: none; background: var(--jt-brand-dark); border-color: var(--jt-brand-dark); }
.lg.entrando .lg-entrar-txt[b-w6ta13bsfq] { display: none; }
.lg.entrando .lg-entrar-espera[b-w6ta13bsfq] { display: inline-flex; }
.lg-gira[b-w6ta13bsfq] { display: inline-block; animation: lg-gira-b-w6ta13bsfq .9s linear infinite; }

/* Error en una franja bajo el boton (no un modal ni un alert arriba). */
.lg-franja-msg[b-w6ta13bsfq] {
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 12px; padding: 9px 12px; border-radius: 4px;
    font-size: var(--jt-font-size-sm);
    animation: lg-sube-b-w6ta13bsfq .25s ease;
}
.lg-franja-msg.error[b-w6ta13bsfq] {
    background: color-mix(in srgb, var(--jt-brand) 6%, var(--jt-white));
    border-left: 3px solid var(--jt-brand); color: var(--jt-brand-dark);
}
.lg-franja-msg.info[b-w6ta13bsfq] { background: var(--jt-gray-bg); border-left: 3px solid var(--jt-gray-mid); color: var(--jt-gray-mid); }

.lg-ayuda[b-w6ta13bsfq] { margin: 18px 0 0; font-size: var(--jt-font-size-xs); color: var(--jt-gray-mid); }
.lg-ayuda kbd[b-w6ta13bsfq] {
    padding: 0 5px; border-radius: 3px; border: 1px solid var(--jt-gray-light);
    background: var(--jt-gray-bg); color: var(--jt-gray-dark); font-size: var(--jt-font-size-xs);
}

@keyframes lg-sube-b-w6ta13bsfq { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lg-gira-b-w6ta13bsfq { to { transform: rotate(360deg); } }

/* Angosto (hasta 960 px, tablet y movil): una sola columna, la marca se vuelve una cabecera compacta sobre el formulario.
   Con dos columnas por debajo de 960 px la del formulario quedaba cortada. */
@media (max-width: 960px) {
    .lg[b-w6ta13bsfq] { grid-template-columns: 1fr; }
    .lg-marca[b-w6ta13bsfq] { padding: 20px 24px; gap: 12px; }
    .lg-marca-cuerpo[b-w6ta13bsfq] { margin: 0; }
    .lg-titulo[b-w6ta13bsfq] { font-size: calc(var(--jt-font-size-xl) * 1.5); }
    .lg-bajada[b-w6ta13bsfq] { margin-bottom: 12px; font-size: var(--jt-font-size-md); }
    .lg-pie[b-w6ta13bsfq] { display: none; }
    .lg-form-col[b-w6ta13bsfq] { align-items: flex-start; padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-marca-cuerpo[b-w6ta13bsfq], .lg-caja[b-w6ta13bsfq], .lg-franja-msg[b-w6ta13bsfq], .lg-gira[b-w6ta13bsfq] { animation: none; }
    .lg-franja[b-w6ta13bsfq], .lg-tarjeta[b-w6ta13bsfq], .lg-tarjeta-ok[b-w6ta13bsfq] { transition: none; }
}