html {
background: #52525a;
color-scheme: dark;
}
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #52525a;
min-height: 100vh;
}
body.app-page {
position: static;
inset: auto;
width: 100%;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
overscroll-behavior-y: auto;
touch-action: auto;
}
.app-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 54px;
z-index: 20;
background: #52525a;
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
box-sizing: border-box;
}
.app-brand {
display: flex;
align-items: center;
gap: 10px;
color: white;
font-size: 20px;
font-weight: bold;
}
.app-brand img {
width: 36px;
height: 36px;
border-radius: 8px;
}
.header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.header-action,
.header-logout {
width: auto;
padding: 7px 7px;
margin: 0;
background: transparent;
color: white;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: normal;
opacity: 0.82;
}
.header-action:hover,
.header-logout:hover {
background: rgba(255, 255, 255, 0.12);
opacity: 1;
}
.header-actions .header-action:first-child {
font-size: 14px;
font-weight: normal;
}
.header-back-pc {
display: none;
}
.app-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
min-height: calc(72px + env(safe-area-inset-bottom));
z-index: 999;
background: #52525a;
display: flex;
align-items: center;
justify-content: center;
gap: 57px;
box-sizing: border-box;
padding: 8px 16px calc(8px + env(safe-area-inset-bottom)) 16px;
transform: translateZ(0);
}
.footer-action {
width: auto;
min-width: 96px;
min-height: 42px;
padding: 8px 14px;
margin: 0;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 15px;
font-weight: bold;
line-height: 1;
}
.footer-action:hover {
background: rgba(255, 255, 255, 0.16);
}
.app-page .login-container {
padding-top: 68px;
padding-bottom: calc(100px + env(safe-area-inset-bottom));
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow: visible;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
}
.login-container {
width: 100%;
max-width: 500px;
margin: auto;
min-height: calc(100vh - 26px);
min-height: calc(100svh - 26px);
background: white;
padding: 30px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
text-align: center;
font-size: 32px;
margin-bottom: 40px;
color: #333;
}
input,
select {
width: 100%;
padding: 18px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 12px;
font-size: 18px;
box-sizing: border-box;
background: white;
color: #333;
}
button {
width: 100%;
padding: 22px;
background: #007bff;
color: white;
border: none;
border-radius: 12px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background: #0056b3;
}
button:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.logout {
background: #dc3545;
}
.logout:hover {
background: #b02a37;
}
#resultado {
margin-top: 20px;
text-align: center;
font-size: 20px;
color: green;
}
#mensaje {
text-align: center;
color: red;
margin-top: 20px;
font-size: 18px;
}
.aviso-ios {
width: 100%;
margin: 0 0 14px 0;
padding: 12px;
box-sizing: border-box;
border: 1px solid #d1d5db;
border-radius: 8px;
background: #f8fafc;
color: #333;
font-size: 14px;
line-height: 1.35;
text-align: center;
}
#pendientes {
text-align: center;
color: orange;
margin-top: 15px;
font-size: 16px;
}
.boton-fichado {
background-color: #28a745 !important;
}
.compact-container {
justify-content: center;
align-items: center;
padding: 14px;
}
.app-page .compact-container {
justify-content: center;
}
.app-page .panel-pendientes,
.app-page .exportar-container,
.app-page .mis-fichajes-container,
.app-page .documentos-container {
justify-content: flex-start;
}
.compact-container > * {
width: 100%;
max-width: 440px;
}
.compact-container br {
display: none;
}
.compact-container h1 {
font-size: 23px;
margin: 8px 0 16px 0;
}
.compact-container input,
.compact-container select {
padding: 12px;
margin-bottom: 10px;
border-radius: 9px;
font-size: 16px;
}
.compact-container #obras {
min-height: 52px;
line-height: 1.35;
}
.compact-container #obras option {
padding: 12px;
font-size: 14px;
line-height: 1.6;
}
.selector-obra,
.selector-lista {
width: 100%;
padding: 13px;
margin-top: 0;
background: white;
color: #333;
border: 1px solid #ccc;
text-align: left;
font-weight: normal;
line-height: 1.3;
}
.selector-obra:hover,
.selector-lista:hover {
background: #f7f7f7;
}
.lista-obras,
.lista-seleccion {
width: 100%;
max-height: 72svh;
overflow-y: auto;
margin-top: 0;
margin-bottom: 8px;
border: 1px solid #ddd;
border-radius: 9px;
background: white;
}
.compact-container .lista-obras,
.compact-container .lista-seleccion {
max-height: 74svh;
}
.obra-opcion,
.seleccion-opcion {
width: 100%;
padding: 15px 12px;
margin: 0 !important;
background: white;
color: #333;
border: none;
border-bottom: 1px solid #eee;
border-radius: 0;
font-size: 15px;
font-weight: normal;
text-align: left;
line-height: 1.35;
}
.obra-opcion:hover,
.seleccion-opcion:hover {
background: #eef4fb;
}
.compact-container button {
padding: 13px;
margin-top: 36px;
border-radius: 9px;
font-size: 17px;
}
.compact-container .boton-fichar-principal {
min-height: 57px;
padding: 18px 13px;
font-size: 20px;
font-weight: bold;
}
.compact-container #resultado,
.compact-container #pendientes {
margin-top: 10px;
margin-bottom: 4px;
font-size: 15px;
}
.confirmacion-fichaje {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.48);
}
.confirmacion-fichaje-caja {
width: 100%;
max-width: 360px;
padding: 22px;
box-sizing: border-box;
border-radius: 10px;
background: white;
color: #222;
text-align: center;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
.confirmacion-fichaje-caja h2 {
margin: 0 0 16px 0;
color: #222;
font-size: 21px;
}
.confirmacion-fichaje-caja p {
margin: 8px 0;
color: #333;
font-size: 16px;
line-height: 1.3;
}
.confirmacion-fichaje-caja button {
width: 100%;
margin-top: 16px;
}
.confirmacion-fichaje-caja .boton-secundario {
margin-top: 10px;
background: #6b7280;
}
.confirmacion-fichaje-caja .boton-secundario:hover {
background: #4b5563;
}
.compact-container .selector-obra,
.compact-container .selector-lista {
margin-top: 0;
}
.compact-container .obra-opcion,
.compact-container .seleccion-opcion {
padding: 15px 12px;
margin: 0 !important;
font-size: 15px;
}
.supervision-container {
min-height: 100vh;
min-height: 100dvh;
height: auto;
max-height: none;
overflow: visible;
}
body.supervision-page {
position: static;
inset: auto;
width: 100%;
height: auto;
min-height: 100vh;
min-height: 100dvh;
overflow-y: auto;
overscroll-behavior-y: auto;
-webkit-overflow-scrolling: touch;
}
.supervision-container .selector-lista {
margin-bottom: 19px;
}
.supervision-container .lista-seleccion,
.supervision-container .lista-obras {
max-height: 74svh;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.fichaje-item {
width: 100%;
padding: 10px 12px;
margin: 0 0 7px 0;
background: #f5f5f5;
color: #333;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
font-weight: normal;
text-align: left;
line-height: 1.25;
}
.fichaje-item:hover {
background: #e9eef5;
}
.fecha-correcciones {
margin-bottom: 16px;
}
input[type="date"].fecha-correcciones {
color-scheme: light;
}
input[type="date"].fecha-correcciones::-webkit-calendar-picker-indicator {
width: 22px;
height: 22px;
opacity: 1;
cursor: pointer;
}
.exportar-fichajes {
width: 100%;
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid #ddd;
}
.exportar-fichajes h2 {
margin-bottom: 12px;
}
.exportar-fichajes label {
display: block;
margin: 8px 0 6px 0;
color: #333;
font-size: 14px;
text-align: left;
}
.exportar-fichajes button {
margin-top: 8px;
}
.supervision-exportar {
margin-top: 24px;
}
.supervision-exportar input {
margin-bottom: 10px;
}
.exportar-container {
justify-content: flex-start;
}
.vista-previa-exportacion {
width: 100%;
margin-top: 12px;
}
.preview-resumen,
.preview-trabajador,
.preview-incidencias {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
margin-bottom: 8px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
text-align: left;
font-size: 14px;
}
.preview-trabajador {
display: flex;
flex-direction: column;
gap: 4px;
}
.preview-trabajador span {
font-size: 13px;
}
.preview-incidencias {
border: 1px solid #f0b429;
background: #fff8e6;
}
.preview-incidencias.sin-incidencias {
border-color: #b7dfc3;
background: #edf9f0;
}
.preview-incidencias span {
display: block;
margin-top: 5px;
font-size: 13px;
}
.mis-fichajes-container {
justify-content: flex-start;
}
.selector-mes-fichajes {
width: 100%;
max-width: 260px;
padding: 11px 12px;
margin-bottom: 14px;
box-sizing: border-box;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: white;
color: #222;
font-size: 16px;
color-scheme: light;
}
.selector-mes-fichajes::-webkit-calendar-picker-indicator {
width: 22px;
height: 22px;
opacity: 1;
cursor: pointer;
}
.mis-fichajes-dia {
width: 100%;
margin-bottom: 14px;
}
.mis-fichajes-dia h2 {
margin: 0 0 8px 0;
padding: 8px 10px;
border-radius: 8px;
background: #e5e7eb;
color: #222;
font-size: 16px;
text-align: left;
}
.mis-fichaje-item {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
padding: 11px 12px;
margin-bottom: 8px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
text-align: left;
}
.mis-fichaje-item span,
.mis-fichaje-item small,
.mis-fichaje-item em {
font-size: 13px;
}
.mis-fichaje-item em {
color: #666;
font-style: normal;
}
.mis-fichaje-anulado {
background: #fff1f1;
border: 1px solid #e3b6b6;
}
.documentos-container {
gap: 12px;
}
.documentos-container label {
width: 100%;
display: block;
margin: 6px 0 6px 0;
color: #333;
font-size: 15px;
font-weight: bold;
}
.documentos-container input,
.documentos-container select,
.documentos-container textarea {
padding: 12px;
margin-bottom: 10px;
border-radius: 9px;
font-size: 16px;
}
.selector-anio-nominas {
width: 100%;
margin: 8px 0 12px 0;
}
.documento-item {
width: 100%;
padding: 0;
margin: 0 0 8px 0;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
background: #f5f5f5;
color: #333;
line-height: 1.25;
}
.documento-nombre {
width: 100%;
padding: 14px 12px;
margin: 0;
background: #f5f5f5;
color: #333;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
text-align: left;
line-height: 1.25;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.documento-nombre:hover {
background: #eeeeee;
}
.documento-nombre span {
flex: 1;
}
.documento-nombre small {
flex: 0 0 auto;
padding: 4px 6px;
border-radius: 6px;
background: #fff3cd;
color: #9a6700;
font-size: 11px;
font-weight: bold;
}
.documento-panel-titulo {
width: 100%;
margin: 6px 0 10px 0;
padding: 10px 12px;
box-sizing: border-box;
border-radius: 8px;
background: #e5e7eb;
color: #333;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.documento-pendiente-info {
width: 100%;
padding: 12px;
margin: 0 0 8px 0;
border: 1px solid #ddd;
border-radius: 8px;
box-sizing: border-box;
background: #f5f5f5;
color: #333;
line-height: 1.25;
}
.documento-pendiente-info strong,
.documento-pendiente-info span,
.documento-pendiente-info small {
display: block;
}
.documento-pendiente-info strong {
margin-bottom: 4px;
font-size: 16px;
}
.documento-pendiente-info span {
margin-bottom: 4px;
font-size: 15px;
}
.documento-pendiente-info small {
color: #6b7280;
font-size: 13px;
}
.modal-pin-nomina {
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
padding: 18px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.45);
}
.modal-pin-caja {
width: 100%;
max-width: 320px;
padding: 18px;
border-radius: 8px;
box-sizing: border-box;
background: #f5f5f5;
color: #333;
text-align: center;
}
.modal-pin-caja label {
display: block;
margin-bottom: 12px;
color: #333;
font-size: 22px;
font-weight: bold;
}
.modal-pin-caja input {
width: 100%;
padding: 14px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 22px;
text-align: center;
letter-spacing: 0;
}
.modal-pin-caja p {
min-height: 18px;
margin: 8px 0 0 0;
color: #b91c1c;
font-size: 14px;
}
.modal-pin-botones {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.documento-acciones {
width: 100%;
padding: 0 12px 12px 12px;
box-sizing: border-box;
}
.documento-confirmado {
color: #166534 !important;
font-weight: bold;
}
.documento-boton-secundario,
.documento-boton-descargar,
.documento-boton-anular,
.documento-boton-importar,
.documento-boton-confirmar,
.documento-boton-pendientes {
padding: 12px;
margin-top: 6px;
border-radius: 9px;
font-size: 16px;
}
.documento-boton-secundario {
background: #4b5563;
}
.documento-boton-descargar {
background: #2563eb;
}
.documento-boton-anular {
background: #b91c1c;
}
.documento-boton-confirmar {
background: #1f9d55;
}
.documento-boton-pendientes {
margin-top: 0;
margin-bottom: 12px;
background: #b45309;
}
.documento-boton-importar {
margin-bottom: 16px;
background: #166534;
}
.documento-importacion-linea {
width: 100%;
box-sizing: border-box;
padding: 9px 10px;
margin-bottom: 7px;
border: 1px solid #d1d5db;
border-radius: 7px;
background: #ffffff;
color: #111827;
font-size: 14px;
text-align: left;
}
.documento-importacion-linea.titulo {
margin-top: 12px;
background: #f3f4f6;
font-weight: bold;
}
.documento-importacion-linea.ok {
border-color: #86efac;
background: #f0fdf4;
color: #166534;
}
.documento-importacion-linea.aviso,
.documento-importacion-linea.faltante {
border-color: #facc15;
background: #fffbeb;
color: #92400e;
}
.documento-importacion-linea.error {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}
@media (min-width: 760px) {
.documentos-container {
max-width: 760px;
}
}
.trabajador-fichajes {
margin-bottom: 18px;
}
.trabajador-titulo {
padding: 10px 12px;
margin-bottom: 8px;
background: #1e3a5f;
color: white;
border-radius: 8px;
font-size: 17px;
font-weight: bold;
}
.fichaje-cabecera {
margin-bottom: 6px;
font-weight: bold;
}
.fichaje-linea {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.fichaje-evento {
width: 100%;
padding: 9px 8px;
margin: 0;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
.fichaje-evento.entrada {
background: #1f9d55;
}
.fichaje-evento.entrada:hover {
background: #177a42;
}
.fichaje-evento.salida {
background: #c2410c;
}
.fichaje-evento.salida:hover {
background: #9a3412;
}
.fichaje-evento:disabled {
background: #d6d6d6;
color: #777;
}
.panel-pendientes {
justify-content: flex-start;
gap: 14px;
}
.panel-pendientes button {
font-size: 17px;
}
.panel-pendientes h1 {
font-size: 24px;
margin: 8px 0 10px 0;
}
.panel-pendientes h2 {
font-size: 18px;
margin: 12px 0 10px 0;
text-align: left;
color: #333;
}
.panel-seccion {
width: 100%;
}
.panel-gestion-toolbar {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
}
.panel-gestion-toolbar .fecha-correcciones,
.panel-gestion-toolbar .boton-anadir-fichaje {
width: 100%;
}
.panel-mapa {
display: none;
margin-top: 8px;
}
#mapaFichajes {
width: 100%;
height: 340px;
overflow: hidden;
border: 1px solid #d4d4d8;
border-radius: 8px;
background: #eef0f3;
}
#mapaFichajes .leaflet-popup-content {
color: #222;
font-size: 14px;
line-height: 1.35;
}
.pendiente-card {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding: 12px 14px;
margin: 0 0 10px 0;
border-radius: 8px;
text-align: left;
line-height: 1.25;
}
.pendiente-card b {
font-size: 17px;
}
.pendiente-card span,
.pendiente-card small {
font-size: 15px;
opacity: 0.95;
}
.pendiente-entrada {
background: #1f9d55;
}
.pendiente-entrada:hover {
background: #177a42;
}
.pendiente-salida {
background: #c2410c;
}
.pendiente-salida:hover {
background: #9a3412;
}
.pendiente-vacio {
width: 100%;
box-sizing: border-box;
padding: 12px;
margin-bottom: 10px;
border-radius: 8px;
background: #f5f5f5;
color: #333;
text-align: left;
}
.panel-vacaciones select,
.panel-vacaciones input,
.panel-vacaciones textarea {
width: 100%;
box-sizing: border-box;
margin-bottom: 8px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
background: white;
color: #222;
font-size: 15px;
}
.vacaciones-fechas {
display: grid;
grid-template-columns: 1fr auto;
gap: 8px;
}
.vacaciones-seleccionadas {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.vacacion-dia-seleccionado {
width: auto;
padding: 8px 10px;
margin: 0;
border-radius: 999px;
background: #e0ecff;
color: #1d4ed8;
font-size: 14px;
}
.boton-vacaciones-secundario,
.boton-vacaciones-guardar {
width: auto;
min-height: 38px;
padding: 9px 12px;
margin: 0;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
}
.boton-vacaciones-secundario {
background: #6b7280;
}
.boton-vacaciones-secundario:hover {
background: #4b5563;
}
.boton-vacaciones-guardar {
background: #2563eb;
}
.boton-vacaciones-guardar:hover {
background: #1d4ed8;
}
#vacacionesDiaNuevo {
color-scheme: light;
}
#vacacionesDiaNuevo::-webkit-calendar-picker-indicator {
width: 22px;
height: 22px;
opacity: 1;
cursor: pointer;
}
.calendario-vacaciones-panel {
width: 100%;
box-sizing: border-box;
}
.vacaciones-controles {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: center;
margin-bottom: 14px;
}
.vacaciones-controles select {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 10px;
border: 1px solid #111827;
border-radius: 6px;
background: white;
color: #111827;
font-size: 15px;
}
.contador-vacaciones {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 7px 10px;
border: 1px solid #111827;
border-radius: 6px;
background: #f9fafb;
color: #111827;
font-size: 14px;
font-weight: 700;
}
.calendario-vacaciones {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.calendario-mes {
width: 100%;
box-sizing: border-box;
padding: 10px;
border: 1px solid #111827;
border-radius: 8px;
background: #ffffff;
}
.calendario-mes h3 {
margin: 0 0 8px 0;
color: #111827;
font-size: 15px;
text-align: center;
}
.calendario-mes-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 4px;
}
.calendario-dia-semana,
.calendario-dia-vacio,
.calendario-dia {
aspect-ratio: 1 / 1;
min-width: 0;
}
.calendario-dia-semana {
display: flex;
align-items: center;
justify-content: center;
color: #4b5563;
font-size: 11px;
font-weight: 700;
}
.calendario-dia {
width: 100%;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #ffffff;
color: #111827;
font-size: 12px;
font-weight: 700;
}
.calendario-dia:hover {
background: #eef2ff;
}
.calendario-dia.fin-semana {
background: #f3f4f6;
color: #6b7280;
}
.calendario-dia.vacaciones {
border-color: #b91c1c;
background: #dc2626;
color: white;
}
.calendario-dia.vacaciones:hover {
background: #b91c1c;
}
.calendario-dia.festivo {
border-color: #9ca3af;
background: #e5e7eb;
color: #4b5563;
}
.calendario-dia.convenio {
border-color: #f2c94c;
background: #fff4c7;
color: #7a4f01;
}
.calendario-dia.festivo-local {
border-color: #93c5fd;
background: #dbeafe;
color: #1e3a8a;
}
.calendario-dia.baja {
border-color: #15803d;
background: #22c55e;
color: white;
}
.calendario-dia.baja:hover {
background: #15803d;
}
.calendario-dia.con-fichajes {
box-shadow: inset 0 -4px 0 #2563eb;
}
.calendario-dia.seleccionado {
outline: 3px solid #111827;
outline-offset: 1px;
}
.calendario-dia:disabled {
cursor: not-allowed;
opacity: 0.75;
}
.modal-fichajes {
position: fixed;
inset: 0;
z-index: 80;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.55);
}
.modal-fichajes.abierto {
display: flex;
}
.modal-fichajes-contenido {
width: min(520px, 100%);
max-height: min(72vh, 620px);
display: flex;
flex-direction: column;
box-sizing: border-box;
border: 1px solid #111827;
border-radius: 8px;
background: white;
color: #111827;
overflow: hidden;
}
.modal-fichajes-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid #d1d5db;
background: #f3f4f6;
}
.modal-fichajes-cabecera h2 {
margin: 0;
color: #111827;
font-size: 17px;
text-align: left;
}
.modal-fichajes-cabecera button {
width: auto;
min-height: 34px;
margin: 0;
padding: 7px 10px;
border-radius: 6px;
background: #52525a;
color: white;
font-size: 13px;
}
.mis-fichajes-detalle {
width: 100%;
box-sizing: border-box;
padding: 12px;
background: white;
color: #111827;
text-align: left;
overflow-y: auto;
}
.mis-fichajes-detalle:empty {
min-height: 0;
}
.mis-fichajes-aviso-vacaciones {
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
padding: 9px 10px;
border-radius: 6px;
background: #dc2626;
color: white;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.mis-fichajes-aviso-baja {
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
padding: 9px 10px;
border-radius: 6px;
background: #22c55e;
color: white;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.vacacion-empleado {
width: 100%;
box-sizing: border-box;
margin-top: 10px;
border: 1px solid #111827;
border-radius: 8px;
overflow: hidden;
background: white;
}
.vacacion-empleado-titulo {
padding: 9px 10px;
background: #f3f4f6;
color: #111827;
font-weight: bold;
text-align: left;
}
.vacacion-empleado-dias {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 10px;
}
.vacacion-dia-anual {
width: auto;
padding: 8px 10px;
margin: 0;
border-radius: 999px;
background: #e0ecff;
color: #1d4ed8;
font-size: 14px;
}
.vacaciones-motivo {
min-height: 74px;
resize: vertical;
}
.vacacion-item {
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
margin-top: 8px;
border: 1px solid #d8dee8;
border-left: 4px solid #2563eb;
border-radius: 8px;
background: #f8fafc;
color: #222;
text-align: left;
}
.vacacion-item span,
.vacacion-item small {
font-size: 13px;
color: #4b5563;
}
.vacacion-anular {
margin-top: 5px;
padding: 8px;
background: #6b7280;
font-size: 13px;
}
.resolver-pendiente {
width: 100%;
}
.resolver-pendiente h2 {
text-align: center;
}
.resolver-pendiente .selector-lista,
.resolver-pendiente .selector-obra {
margin-bottom: 18px;
font-size: 17px;
}
.resolver-pendiente .obra-opcion,
.resolver-pendiente .seleccion-opcion {
font-size: 15px;
}
.resolver-pendiente .selector-bloqueado,
.resolver-pendiente .selector-bloqueado:hover,
#vistaFormulario .selector-bloqueado {
background: #f1f1f1;
color: #666;
cursor: not-allowed;
opacity: 1;
}
.acciones-resolver {
width: 100%;
}
.acciones-resolver button {
margin-top: 18px;
}
.boton-anular-registro {
background: #b91c1c;
}
.boton-anular-registro:hover {
background: #991b1b;
}
@media (min-width: 900px) {
body {
background: #f3f4f6;
}
.app-header {
height: 62px;
padding: 10px 28px;
}
.app-brand {
font-size: 22px;
}
.header-back-pc {
display: inline-block;
}
.app-footer {
min-height: 58px;
padding: 8px 20px;
}
.app-page .login-container {
width: calc(100% - 48px);
max-width: 1320px;
min-height: calc(100vh - 120px);
margin: 0 auto;
padding: 82px 24px 86px 24px;
}
.compact-container {
max-width: 760px;
}
.panel-pendientes,
.vacaciones-container,
.documentos-container,
.exportar-container,
.mis-fichajes-container {
max-width: 1320px;
}
.vacaciones-container {
align-items: stretch;
gap: 14px;
}
.vacaciones-controles {
grid-template-columns: 160px minmax(280px, 1fr) 120px;
gap: 12px;
}
.calendario-vacaciones {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.calendario-mes {
padding: 9px;
border-radius: 6px;
}
.calendario-mes h3 {
font-size: 14px;
}
.calendario-dia {
border-radius: 5px;
font-size: 11px;
}
.panel-pendientes {
gap: 10px;
color: #1f2933;
}
.panel-pendientes h1 {
width: 100%;
margin: 0 0 8px 0;
color: #1f2933;
font-size: 20px;
letter-spacing: 0;
text-align: left;
}
#vistaGeneral {
width: 100%;
display: grid;
grid-template-columns: 285px 285px minmax(420px, 1fr);
gap: 14px;
align-items: start;
}
.panel-gestion-toolbar {
grid-column: 1 / -1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 10px;
}
#fechaPanel {
width: 190px;
max-width: 190px;
height: 40px;
padding: 8px 10px 8px 12px;
margin-bottom: 0;
border: 1px solid #cbd5e1;
border-radius: 6px;
background: #ffffff;
color: #1f2933;
font-size: 14px;
}
#fechaPanel::-webkit-calendar-picker-indicator {
margin-left: 8px;
}
.panel-gestion-toolbar .boton-anadir-fichaje {
width: auto;
min-height: 40px;
padding: 8px 14px;
margin: 0;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
}
.panel-seccion {
min-width: 0;
padding: 12px;
box-sizing: border-box;
border: 1px solid #111827;
border-radius: 6px;
background: #ffffff;
}
#entradasPendientes,
#salidasPendientes,
#fichajesHoy {
min-width: 0;
}
.panel-entradas {
grid-column: 1;
}
.panel-salidas {
grid-column: 2;
}
.panel-fichados {
grid-column: 3;
}
.panel-mapa {
display: block;
grid-column: 1 / -1;
}
.panel-vacaciones {
grid-column: 1 / -1;
}
#mapaFichajes {
height: 390px;
border-color: #111827;
border-radius: 6px;
}
.panel-seccion h2 {
margin: -12px -12px 10px -12px;
padding: 10px 12px 9px 12px;
border-top: 3px solid #64748b;
border-bottom: 1px solid #dbe1ea;
border-radius: 6px 6px 0 0;
background: #f8fafc;
color: #1f2937;
font-size: 14px;
font-weight: 700;
letter-spacing: 0;
}
.panel-seccion:nth-of-type(1) h2 {
border-top-color: #16a34a;
}
.panel-seccion:nth-of-type(2) h2 {
border-top-color: #dc2626;
}
.panel-seccion:nth-of-type(3) h2 {
border-top-color: #2563eb;
}
.pendiente-card {
min-height: 0;
padding: 9px 10px;
margin-bottom: 7px;
border: 1px solid #111827;
border-left-width: 4px;
border-radius: 6px;
background: #ffffff;
color: #1f2933;
}
.pendiente-card b {
color: #111827;
font-size: 13px;
font-weight: 700;
}
.pendiente-card span,
.pendiente-card small {
color: #4b5563;
font-size: 12px;
opacity: 1;
}
.pendiente-entrada {
border-left-color: #16a34a;
}
.pendiente-entrada:hover {
background: #f0fdf4;
}
.pendiente-salida {
border-left-color: #dc2626;
}
.pendiente-salida:hover {
background: #fef2f2;
}
.pendiente-vacio {
padding: 9px 10px;
border: 1px dashed #d1d5db;
border-radius: 6px;
background: #f9fafb;
color: #6b7280;
font-size: 13px;
}
.panel-vacaciones {
display: grid;
grid-template-columns: 320px minmax(360px, 1fr) auto;
gap: 8px;
align-items: start;
}
.panel-vacaciones h2,
.panel-vacaciones #vacacionesAnio,
.panel-vacaciones .vacaciones-seleccionadas {
grid-column: 1 / -1;
}
.panel-vacaciones select,
.panel-vacaciones input,
.panel-vacaciones textarea {
margin-bottom: 0;
padding: 8px 9px;
border-radius: 6px;
font-size: 13px;
}
.panel-vacaciones button {
min-height: 37px;
padding: 8px 10px;
margin: 0;
border-radius: 6px;
font-size: 13px;
}
.panel-vacaciones .vacaciones-fechas button,
.panel-vacaciones .vacacion-dia-seleccionado,
.panel-vacaciones .vacacion-dia-anual {
width: auto;
}
.vacaciones-motivo {
min-height: 37px;
}
.vacacion-item {
padding: 8px 9px;
margin-top: 7px;
border-color: #111827;
border-radius: 6px;
}
.trabajador-fichajes {
margin-bottom: 9px;
border: 1px solid #111827;
border-radius: 6px;
overflow: hidden;
background: #ffffff;
}
.trabajador-titulo {
padding: 7px 9px;
background: #f8fafc;
color: #1f2933;
border-bottom: 1px solid #e5e7eb;
font-size: 13px;
font-weight: 700;
}
.fichaje-item {
padding: 8px 9px;
margin: 0;
border: none;
border-bottom: 1px solid #edf0f4;
border-radius: 0;
background: #ffffff;
font-size: 12px;
}
.fichaje-item:last-child {
border-bottom: none;
}
.fichaje-cabecera {
margin-bottom: 5px;
color: #374151;
font-size: 12px;
font-weight: 600;
line-height: 1.25;
}
.fichaje-linea {
gap: 6px;
}
.fichaje-evento {
padding: 7px 6px;
border: 1px solid transparent;
border-radius: 5px;
font-size: 12px;
font-weight: 700;
color: #1f2933;
}
.fichaje-evento.entrada {
border-color: #bbf7d0;
background: #dcfce7;
color: #166534;
}
.fichaje-evento.entrada:hover {
background: #bbf7d0;
}
.fichaje-evento.salida {
border-color: #fecaca;
background: #fee2e2;
color: #991b1b;
}
.fichaje-evento.salida:hover {
background: #fecaca;
}
.fichaje-evento:disabled {
border-color: #e5e7eb;
background: #f3f4f6;
color: #9ca3af;
}
#vistaFormulario,
#resolverPendiente {
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.documento-item,
.mis-fichaje-item,
.preview-resumen,
.preview-trabajador,
.preview-incidencias {
font-size: 14px;
}
.selector-mes-fichajes {
max-width: 220px;
padding: 9px 10px;
border-radius: 6px;
font-size: 14px;
}
#listaMisFichajes {
width: 100%;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.mis-fichajes-dia {
margin-bottom: 0;
padding: 10px;
box-sizing: border-box;
border: 1px solid #111827;
border-radius: 6px;
background: #ffffff;
}
.mis-fichajes-dia h2 {
margin: -10px -10px 9px -10px;
padding: 8px 10px;
border-bottom: 1px solid #d1d5db;
border-radius: 6px 6px 0 0;
background: #f3f4f6;
font-size: 14px;
font-weight: 700;
}
.mis-fichajes-dia .mis-fichaje-item {
padding: 8px 9px;
margin-bottom: 7px;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.vista-previa-exportacion {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.preview-resumen,
.preview-incidencias {
grid-column: 1 / -1;
}
.footer-action {
min-width: 120px;
}
}