/*
La hoja de estilos del portal.
DE DONDE SALEN LOS COLORES
Del logotipo de Proyectiva y de ningun sitio mas: el rojo del cuadrado de
abajo a la derecha, el naranja del de en medio y el durazno de la diagonal.
Los grises no son grises puros: llevan una pizca de naranja dentro, para que
el conjunto se lea como una sola paleta y no como una marca pegada encima de
una plantilla.
ES UNA HERRAMIENTA DE TRABAJO, NO UNA PAGINA DE VENTA. Alguien va a estar
aqui repartiendo doscientos documentos al mes. Manda la densidad, la
legibilidad de una tabla larga y que el estado de cada fila se vea de un
vistazo. Nada de animaciones que hagan esperar.
*/
:root {
--rojo: #FA1E00;
--naranja: #FF4B10;
--durazno: #FFB5A1;
--durazno-suave: #FFEDE7;
--tinta: #17120F;
--tinta-2: #5A4F49;
--tinta-3: #8C7F78;
--fondo: #FBF8F7;
--papel: #FFFFFF;
--linea: #E8DFDA;
--linea-2: #F2EBE7;
--ok: #0F7A4A;
--ok-fondo: #E8F6EF;
--aviso: #9A5B00;
--aviso-fondo: #FFF3E0;
--malo: #B3261E;
--malo-fondo: #FDECEA;
--radio: 10px;
--sombra: 0 1px 2px rgba(23,18,15,.06), 0 4px 12px rgba(23,18,15,.04);
--fuente: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
--tinta: #F5EFEC;
--tinta-2: #C2B6B0;
--tinta-3: #8E827C;
--fondo: #16120F;
--papel: #1F1A17;
--linea: #332B26;
--linea-2: #292220;
--durazno-suave: #35211A;
--ok-fondo: #10291E;
--aviso-fondo: #33240E;
--malo-fondo: #341916;
--sombra: 0 1px 2px rgba(0,0,0,.4);
}
}
:root[data-tema="oscuro"] {
--tinta: #F5EFEC; --tinta-2: #C2B6B0; --tinta-3: #8E827C;
--fondo: #16120F; --papel: #1F1A17;
--linea: #332B26; --linea-2: #292220;
--durazno-suave: #35211A;
--ok-fondo: #10291E; --aviso-fondo: #33240E; --malo-fondo: #341916;
--sombra: 0 1px 2px rgba(0,0,0,.4);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fondo);
color: var(--tinta);
font: 15px/1.55 var(--fuente);
-webkit-font-smoothing: antialiased;
}
a { color: var(--rojo); }
/* ── la cabecera ─────────────────────────────────────────────────────────── */
.cabecera {
background: var(--papel);
border-bottom: 1px solid var(--linea);
position: sticky; top: 0; z-index: 20;
}
.cabecera .dentro {
max-width: 1240px; margin: 0 auto; padding: 12px 20px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marca img { width: 30px; height: 30px; display: block; }
.marca .nombre { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.marca .bajada {
font-size: 10.5px; color: var(--tinta-2); letter-spacing: .02em;
margin-top: 2px; display: block;
}
/* El puente entre las dos empresas. Se nombra a AXA con texto, no con su
logotipo: es marca de un tercero y no nos corresponde usarla. */
.puente {
display: flex; align-items: center; gap: 9px;
padding: 5px 12px; border-radius: 999px;
background: var(--durazno-suave); border: 1px solid var(--linea);
font-size: 11.5px; font-weight: 600; color: var(--tinta-2);
white-space: nowrap;
}
.puente .flecha { color: var(--naranja); font-weight: 700; }
.menu { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.menu a {
padding: 7px 12px; border-radius: 8px; text-decoration: none;
color: var(--tinta-2); font-size: 13.5px; font-weight: 600;
}
.menu a:hover { background: var(--linea-2); color: var(--tinta); }
.menu a.aqui { background: var(--tinta); color: var(--papel); }
.menu .quien {
font-size: 12px; color: var(--tinta-3); padding-left: 10px;
margin-left: 6px; border-left: 1px solid var(--linea);
}
.globo {
display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 5px;
border-radius: 999px; background: var(--rojo); color: #fff;
font-size: 11px; font-weight: 700; text-align: center;
}
/* ── estructura ──────────────────────────────────────────────────────────── */
.hoja { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.titulo { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; }
.subtitulo { color: var(--tinta-2); font-size: 13.5px; margin: 0 0 20px; }
.tarjeta {
background: var(--papel); border: 1px solid var(--linea);
border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px;
}
.tarjeta + .tarjeta { margin-top: 16px; }
.rejilla { display: grid; gap: 14px; }
@media (min-width: 900px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }
/* ── botones ─────────────────────────────────────────────────────────────── */
.boton {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 16px; border-radius: 8px; border: 1px solid transparent;
background: var(--rojo); color: #fff;
font: 600 13.5px var(--fuente); cursor: pointer; text-decoration: none;
}
.boton:hover { background: #D91A00; }
.boton:disabled { background: var(--tinta-3); cursor: not-allowed; }
.boton.suave { background: var(--papel); color: var(--tinta); border-color: var(--linea); }
.boton.suave:hover { background: var(--linea-2); }
.boton.chico { padding: 5px 10px; font-size: 12px; }
/* ── formularios ─────────────────────────────────────────────────────────── */
label.campo { display: block; font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], input[type=date], select {
width: 100%; padding: 9px 11px; border: 1px solid var(--linea);
border-radius: 8px; background: var(--papel); color: var(--tinta);
font: 14px var(--fuente);
}
input:focus, select:focus { outline: 2px solid var(--naranja); outline-offset: -1px; border-color: var(--naranja); }
/* ── entrar ──────────────────────────────────────────────────────────────── */
.entrada { max-width: 400px; margin: 8vh auto; }
.entrada .marca { justify-content: center; margin-bottom: 22px; }
.entrada .marca img { width: 42px; height: 42px; }
.entrada .marca .nombre { font-size: 26px; }
/* ── filtros ─────────────────────────────────────────────────────────────── */
.filtros { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 820px) { .filtros { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr auto; } }
/* ── tabla ───────────────────────────────────────────────────────────────── */
.marco { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
text-align: left; padding: 10px 12px; background: var(--linea-2);
font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
color: var(--tinta-2); font-weight: 700; white-space: nowrap;
position: sticky; top: 0;
}
td { padding: 9px 12px; border-top: 1px solid var(--linea-2); vertical-align: middle; }
tbody tr:hover { background: var(--linea-2); }
td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; }
td.archivo { font-weight: 600; word-break: break-word; min-width: 240px; }
.etiqueta {
display: inline-block; padding: 2px 9px; border-radius: 999px;
font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.etiqueta.listo { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.revisar { background: var(--aviso-fondo); color: var(--aviso); }
.etiqueta.pendiente { background: var(--linea-2); color: var(--tinta-3); }
.etiqueta.ocr { background: var(--durazno-suave); color: var(--naranja); }
.ya { font-size: 11px; color: var(--ok); font-weight: 700; }
/* ── zona de arrastre ────────────────────────────────────────────────────── */
.soltar {
border: 2px dashed var(--durazno); border-radius: 14px;
padding: 40px 24px; text-align: center; background: var(--papel);
transition: background .12s, border-color .12s;
}
.soltar.encima { border-color: var(--rojo); background: var(--durazno-suave); }
.soltar .grande { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.soltar .chico { color: var(--tinta-2); font-size: 13px; }
.barra { height: 7px; background: var(--linea-2); border-radius: 999px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--naranja); width: 0; transition: width .2s; }
/* ── avisos ──────────────────────────────────────────────────────────────── */
.aviso { padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.aviso.malo { background: var(--malo-fondo); color: var(--malo); border: 1px solid currentColor; }
.aviso.ok { background: var(--ok-fondo); color: var(--ok); border: 1px solid currentColor; }
.aviso.ojo { background: var(--aviso-fondo); color: var(--aviso); border: 1px solid currentColor; }
.dato { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--linea-2); }
.dato:last-child { border-bottom: 0; }
.dato b { font-variant-numeric: tabular-nums; }
.pie { color: var(--tinta-3); font-size: 11.5px; text-align: center; padding: 26px 20px; }
.acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.acciones .cuenta { font-size: 13px; color: var(--tinta-2); }
.asignar { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-left: 6px; }
.asignar select { width: auto; padding: 3px 7px; font-size: 12px; }
.asignar .campo-nueva { display: inline-flex; gap: 5px; align-items: center; }
.asignar .campo-nueva input { width: 170px; padding: 3px 7px; font-size: 12px; }
/* `hidden` tiene que ganar SIEMPRE. Sin este `!important`, cualquier regla que
ponga `display` sobre `.campo-nueva` —incluida la de arriba— lo haría visible
aunque el atributo estuviera puesto, porque una clase gana a `[hidden]`. */
[hidden] { display: none !important; }
/* ── EL MÓVIL ────────────────────────────────────────────────────────────────
Una tabla de seis columnas en una pantalla de 375 px no se lee: o se sale por
el lado o queda en letra diminuta. Por debajo de 720 px cada fila se convierte
en una tarjeta, y cada celda lleva delante su título — que se saca del propio
`| ` con `data-col`, así no hay dos listas de encabezados que mantener. */
@media (max-width: 719px) {
.hoja { padding: 16px 12px 48px; }
.cabecera .dentro { padding: 10px 12px; gap: 10px; }
.marca .nombre { font-size: 17px; }
.puente { font-size: 10.5px; padding: 4px 9px; }
.menu { width: 100%; margin-left: 0; gap: 2px; }
.menu a { padding: 6px 9px; font-size: 12.5px; }
.menu .quien { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
.titulo { font-size: 19px; }
.marco { border: 0; background: transparent; overflow-x: visible; }
table, tbody, tr, td { display: block; width: 100%; }
thead { display: none; }
tbody tr {
background: var(--papel); border: 1px solid var(--linea);
border-radius: var(--radio); box-shadow: var(--sombra);
margin-bottom: 10px; padding: 10px 12px;
}
tbody tr:hover { background: var(--papel); }
td {
border-top: 0; padding: 4px 0;
display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
td::before {
content: attr(data-col);
font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
color: var(--tinta-3); font-weight: 700; flex-shrink: 0;
}
/* El nombre del archivo manda: ocupa la línea entera y sin etiqueta delante. */
td.archivo { display: block; font-size: 14.5px; padding-bottom: 8px; }
td.archivo::before { content: none; }
td.num { text-align: right; }
/* La casilla de selección, arriba a la derecha de la tarjeta. */
td:first-child { float: right; padding: 0; }
td:first-child::before { content: none; }
.asignar { margin-left: 0; width: 100%; }
.asignar select, .asignar .campo-nueva input { width: 100%; }
.asignar .campo-nueva { width: 100%; }
.filtros { grid-template-columns: 1fr 1fr; }
.filtros > div:first-child { grid-column: 1 / -1; }
.filtros > div:last-child { grid-column: 1 / -1; }
.acciones .boton { flex: 1; justify-content: center; }
.soltar { padding: 28px 16px; }
}
/* ══════════════════════════════════════════════════════════════════════════
VACACIONES
Añadido sobre la hoja del portal para no tener dos marcas distintas de la
misma empresa. Los colores, los grises y el radio salen de arriba.
══════════════════════════════════════════════════════════════════════════ */
/* ── el estado de una solicitud, de un vistazo ── */
.etiqueta.aprobada { background: var(--ok-fondo); color: var(--ok); }
.etiqueta.rechazada { background: var(--malo-fondo); color: var(--malo); }
.etiqueta.cancelada { background: var(--linea-2); color: var(--tinta-3); }
.etiqueta.encurso { background: var(--durazno-suave); color: var(--naranja); }
/* ── la ventana de cada quien: abierta, cerrada o sin fecha ── */
.ventana {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 14px 16px; border-radius: var(--radio); margin-bottom: 16px;
border: 1px solid var(--linea);
}
.ventana.abierta { background: var(--ok-fondo); border-color: transparent; }
.ventana.cerrada { background: var(--aviso-fondo); border-color: transparent; }
.ventana.sinfecha{ background: var(--malo-fondo); border-color: transparent; }
.ventana .rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
font-weight: 700; color: var(--tinta-2); }
.ventana .fechas { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ventana .nota { font-size: 13px; color: var(--tinta-2); flex-basis: 100%; }
/* ── el veredicto de la simulación ── */
.veredicto { border-radius: var(--radio); padding: 16px 18px; margin: 16px 0;
border: 1px solid var(--linea); background: var(--papel); }
.veredicto.si { border-left: 4px solid var(--ok); }
.veredicto.no { border-left: 4px solid var(--malo); }
.veredicto h3 { margin: 0 0 10px; font-size: 15px; }
.veredicto ul { margin: 8px 0 0; padding-left: 18px; }
.veredicto li { margin-bottom: 5px; font-size: 13.5px; }
.veredicto .motivo { color: var(--malo); }
.veredicto .aviso { color: var(--aviso); }
/* Las fechas resultantes, en grande: es lo que la persona vino a ver. */
.resultado { display: flex; gap: 26px; flex-wrap: wrap; margin: 14px 0 4px;
padding: 14px 0; border-top: 1px solid var(--linea-2);
border-bottom: 1px solid var(--linea-2); }
.resultado div { min-width: 92px; }
.resultado .rotulo { display: block; font-size: 11px; text-transform: uppercase;
letter-spacing: .06em; color: var(--tinta-3); font-weight: 700; }
.resultado .dato { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
/* ── el cupo del segmento ── */
.cupos { display: grid; gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.cupo { border: 1px solid var(--linea); border-radius: var(--radio);
padding: 12px 14px; background: var(--papel); }
.cupo .seg { font-weight: 700; font-size: 14px; }
.cupo .cifra { font-size: 22px; font-weight: 700; letter-spacing: -.02em;
margin: 4px 0 2px; }
.cupo .de { color: var(--tinta-3); font-size: 13px; font-weight: 400; }
.cupo .quien { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }
.cupo.lleno { border-color: var(--naranja); background: var(--durazno-suave); }
.cupo.solo { border-style: dashed; }
/* ── barrita de ocupación ── */
.barra { height: 5px; border-radius: 3px; background: var(--linea-2);
overflow: hidden; margin-top: 8px; }
.barra i { display: block; height: 100%; background: var(--ok); }
.barra i.lleno { background: var(--naranja); }
/* ── avisos de la página ── */
.mensaje { padding: 11px 14px; border-radius: var(--radio); font-size: 13.5px;
margin-bottom: 16px; }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok); }
.mensaje.malo { background: var(--malo-fondo); color: var(--malo); }
/* ── el formulario de pedir ── */
.pedir { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: end; }
.pedir label { display: block; font-size: 12px; font-weight: 700;
color: var(--tinta-2); margin-bottom: 5px; }
.pedir input, .pedir select { width: 100%; }
.pedir .ancho { grid-column: 1 / -1; }
/* Quien no puede pedir ve el formulario apagado, no escondido: así entiende
qué le espera cuando le toque. */
.apagado { opacity: .45; pointer-events: none; }
.vacio { text-align: center; padding: 34px 16px; color: var(--tinta-3);
font-size: 13.5px; }
@media (max-width: 700px) {
.pedir { grid-template-columns: 1fr; }
.resultado { gap: 14px; }
.resultado div { min-width: 76px; }
}
/* Dos columnas: el formulario manda, el cupo acompaña. Va en una clase y no
en un style= en línea porque una media query no puede pisar un estilo en
línea, y en el móvil tiene que caer a una sola columna. */
.dos-columnas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 820px) {
.dos-columnas { grid-template-columns: 1fr; }
}
/* ── Tablas de vacaciones en el móvil ──────────────────────────────────────
La hoja del portal convierte cada fila en una tarjeta y flota la PRIMERA
celda a la derecha, porque allí esa celda es la casilla de selección. Aquí
la primera celda es el NOMBRE de la persona, que tiene que encabezar la
tarjeta. Sin esto, el nombre salía flotando a la derecha y las demás celdas
aparecían sin rótulo. Los rótulos salen de data-col en cada | . */
@media (max-width: 719px) {
table.vac td:first-child {
float: none; display: block; padding: 2px 0 8px;
font-size: 15px; font-weight: 700;
}
table.vac td:first-child::before { content: none; }
/* Una celda vacía —la de los botones cuando no hay nada que hacer— no debe
dejar una línea con su rótulo colgando. */
table.vac td:empty { display: none; }
}
/* Un saludo personal. Se distingue de los avisos del sistema —que van en
verde o rojo— porque no es una notificación de estado: es para la persona. */
.saludo {
background: var(--durazno-suave); color: var(--naranja);
border-radius: var(--radio); padding: 13px 16px; margin-bottom: 16px;
font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
/* La ventana concedida a mano se marca, para que se vea que no sale de la
regla del aniversario sino de un permiso. */
.ventana.excepcional { background: var(--durazno-suave); border-color: transparent; }
.ventana.excepcional .rotulo { color: var(--naranja); }
.etiqueta.excepcional { background: var(--durazno-suave); color: var(--naranja); }
/* Cambiar la decisión de una solicitud ya resuelta. */
.cambiar { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.cambiar select { padding: 4px 7px; font-size: 12px; }
/* Lo que cada segmento tiene por venir, dentro de su cuadro de cobertura.
Es lo que hace visible que aprobar sirvió de algo: sin esto el cuadro
marcaba cero hasta el día mismo de las vacaciones. */
.agenda { list-style: none; margin: 10px 0 0; padding: 8px 0 0;
border-top: 1px solid var(--linea-2); }
.agenda li { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
font-size: 12px; padding: 2px 0; color: var(--tinta-2); }
.agenda .cuando { font-variant-numeric: tabular-nums; color: var(--tinta);
font-weight: 600; white-space: nowrap; }
.agenda .nombre { color: var(--tinta-2); }
.agenda li.pendiente .cuando { color: var(--tinta-2); font-weight: 400; }
/* Las fechas que ya están cogidas en el segmento. Sin nombres: quien las pidió
es asunto suyo y de la Dirección Comercial, no del resto del equipo. */
.tomadas { list-style: none; margin: 0; padding: 0; }
.tomadas li {
display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600;
padding: 8px 11px; margin-bottom: 6px; border-radius: 8px;
background: var(--linea-2); color: var(--tinta-2);
border-left: 3px solid var(--tinta-3);
}
/* Cuántos hay fuera en ese tramo. El número, nunca el nombre. */
.tomadas .cuantas { font-size: 12px; font-weight: 400; color: var(--tinta-3);
white-space: nowrap; }
/* ── La decisión de Luis, sin leer ──────────────────────────────────────────
Va arriba del todo y pide acuse de recibo. No es un aviso de sistema de los
que se desvanecen: es una noticia sobre las vacaciones de esa persona, y
tiene que verla aunque entre tres días después. */
.novedad {
border-radius: var(--radio); padding: 15px 17px; margin-bottom: 16px;
border-left: 4px solid var(--tinta-3); background: var(--papel);
box-shadow: var(--sombra);
}
.novedad.rechazada { border-left-color: var(--malo); background: var(--malo-fondo); }
.novedad.cancelada { border-left-color: var(--aviso); background: var(--aviso-fondo); }
.novedad.aprobada { border-left-color: var(--ok); background: var(--ok-fondo); }
.novedad .cabeza { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.novedad.rechazada .cabeza { color: var(--malo); }
.novedad.cancelada .cabeza { color: var(--aviso); }
.novedad.aprobada .cabeza { color: var(--ok); }
.novedad .fechas { font-size: 13.5px; font-weight: 600; margin-top: 3px; }
.novedad .porque { font-size: 13.5px; margin: 8px 0 0; color: var(--tinta); }
.novedad .quien { font-size: 12px; margin: 6px 0 10px; color: var(--tinta-2); }
|