/* Control de limpieza y cascajo - gris y naranja */
:root {
  --gris-0: #f5f5f6;
  --gris-1: #ffffff;
  --gris-2: #e6e6e8;
  --gris-3: #c9c9ce;
  --gris-4: #6f6f78;
  --gris-5: #2e2e33;
  --gris-6: #1b1b1f;
  --naranja: #E97132;
  --naranja-fuerte: #cf5b1e;
  --naranja-suave: #fdf0e8;
  --verde: #2f8f4e;
  --rojo: #c0392b;
  --amarillo: #e2b007;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
  --radio: 4px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Que el doble toque no haga zoom y que no se desfase la pantalla */
html { -webkit-text-size-adjust: 100%; }
button, a, .persona, .fila-lista, td.dia, .teclado-pin button { touch-action: manipulation; }

body {
  margin: 0;
  overscroll-behavior-y: contain;   /* que no rebote ni se recargue al jalar */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--gris-0);
  color: var(--gris-6);
  font-size: 16px;
  line-height: 1.4;
}

/* iPhone pinta de azul cualquier botón sin color propio: se le quita */
button, input, select, textarea { font-family: inherit; font-size: 16px; color: inherit; }
button { color: var(--gris-6); -webkit-appearance: none; appearance: none; }

.oculto { display: none !important; }

/* ---------- Encabezado ---------- */
header.barra {
  background: var(--gris-5);
  color: #fff;
  /* el env(...) es el espacio del reloj y la muesca del iPhone */
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 30;
}
header.barra .quien { flex: 1; min-width: 0; }
header.barra .quien b { display: block; font-size: 15px; }
header.barra .quien span { font-size: 12px; color: var(--gris-3); text-transform: uppercase; letter-spacing: .5px; }
header.barra .salir {
  background: none; border: 1px solid var(--gris-4); color: var(--gris-2) !important;
  padding: 6px 12px; border-radius: 3px; cursor: pointer;
}
/* Botón de las tres rayitas */
.boton-menu {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--gris-4);
  background: none; border-radius: 3px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.boton-menu i { display: block; width: 20px; height: 2px; background: #fff; }
.boton-menu:active { background: rgba(255,255,255,.12); }

/* Cajón del menú */
.cajon { position: fixed; inset: 0; background: rgba(20,20,25,.5); z-index: 40;
  display: flex; justify-content: flex-end; }
.cajon-panel {
  background: #fff; width: 78%; max-width: 320px; height: 100%; overflow-y: auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  box-shadow: -6px 0 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 8px;
}
.cajon-panel .cabeza-menu { display: flex; align-items: center; gap: 10px; }
.cajon-panel .titulo-menu { font-size: 13px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--gris-4); margin: 6px 0 4px; flex: 1; }
.cajon-panel .cerrar-menu { flex: none; width: 40px; height: 40px; border-radius: 3px;
  border: 1px solid var(--gris-2); background: var(--gris-0); color: var(--gris-4);
  font-size: 17px; cursor: pointer; }
.cajon-panel button.opcion {
  color: var(--gris-6);
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 15px 14px; border: 1px solid var(--gris-2); border-radius: 3px;
  background: #fff; cursor: pointer; font-size: 16px; font-weight: 600; min-height: 52px;
}
.cajon-panel button.opcion.activa { background: var(--naranja-suave); border-color: var(--naranja);
  color: var(--naranja-fuerte) !important; }
.cajon-panel button.opcion .contador {
  margin-left: auto; background: var(--naranja); color: #fff;
  border-radius: 2px; padding: 2px 9px; font-size: 13px;
}
.cajon-panel .separador { height: 1px; background: var(--gris-2); margin: 8px 0; }

.marca-titulo { font-weight: 700; letter-spacing: .5px; }
.marca-titulo em { color: var(--naranja); font-style: normal; }

/* Logo de ARCO */
.logo-barra { height: 30px; width: auto; flex: none; background: #fff;
  padding: 4px 6px; border-radius: 2px; }
.logo-login { height: 62px; width: auto; display: block; margin: 0 auto 18px; }

/* ---------- Contenedores ---------- */
.envoltura { max-width: 1100px; margin: 0 auto; padding: 16px; }
.envoltura.angosta { max-width: 560px; }

.tarjeta {
  background: var(--gris-1);
  border: 1px solid var(--gris-2);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
  margin-bottom: 14px;
}
.tarjeta h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris-4); }
.tarjeta h3 { margin: 0 0 6px; font-size: 17px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radio); padding: 12px 18px;
  background: var(--gris-2); color: var(--gris-6); cursor: pointer; font-weight: 600;
}
.btn:active { transform: translateY(1px); }
.btn.naranja { background: var(--naranja); color: #fff !important; }
.btn.naranja:hover { background: var(--naranja-fuerte); }
.btn.oscuro { background: var(--gris-5); color: #fff !important; }
.btn.verde { background: var(--verde); color: #fff !important; }
.btn.rojo { background: var(--rojo); color: #fff !important; }
.btn.gigante { width: 100%; padding: 22px; font-size: 19px; border-radius: 4px; }
.btn.chico { padding: 7px 12px; font-size: 14px; border-radius: 3px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Campos ---------- */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 600; color: var(--gris-4);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 12px; border: 1px solid var(--gris-3);
  border-radius: 3px; background: #fff;
}
/* el campo de fecha del iPhone trae su propio ancho y se salía de la caja */
.campo input[type="date"], .campo input[type="time"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; max-width: 100%; min-width: 0; text-align: left;
}

.campo select {
  -webkit-appearance: none; appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6f78' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
.campo textarea { min-height: 76px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--naranja); border-color: var(--naranja);
}
.ayuda { font-size: 13px; color: var(--gris-4); margin-top: 4px; }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login .caja { background: #fff; border-radius: 6px; box-shadow: var(--sombra); padding: 28px; width: 100%; max-width: 420px; }
.login h1 { margin: 0 0 4px; font-size: 22px; }
.login p.sub { margin: 0 0 22px; color: var(--gris-4); font-size: 14px; }
.lista-gente { display: grid; gap: 10px; }
.persona {
  color: var(--gris-6);
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--gris-2); border-radius: 4px; background: var(--gris-0);
  cursor: pointer; text-align: left; width: 100%;
}
.persona:hover { border-color: var(--naranja); background: var(--naranja-suave); }
.persona .ini {
  width: 40px; height: 40px; border-radius: 3px; background: var(--gris-5); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none;
}
.persona.rol-encargado .ini { background: var(--naranja); }
.persona b { display: block; }
.persona span { font-size: 13px; color: var(--gris-4); }

.teclado-pin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.teclado-pin button {
  color: var(--gris-6);
  padding: 18px; font-size: 22px; font-weight: 600; border: 1px solid var(--gris-2);
  background: var(--gris-0); border-radius: 4px; cursor: pointer;
}
.teclado-pin button:hover { background: var(--naranja-suave); }
.puntos-pin { display: flex; gap: 12px; justify-content: center; margin: 20px 0 4px; }
.puntos-pin i { width: 15px; height: 15px; border-radius: 2px; background: var(--gris-2); display: block; }
.puntos-pin i.lleno { background: var(--naranja); }

/* ---------- Estado del día ---------- */
.estado-hoy { text-align: center; padding: 8px 0 18px; }
.estado-hoy .fecha { font-size: 13px; letter-spacing: 1px; color: var(--gris-4); text-transform: uppercase; }
.estado-hoy .grande { font-size: 26px; font-weight: 700; margin-top: 4px; }

.linea { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--gris-2); font-size: 15px; }
.linea:last-child { border-bottom: none; }
.linea span:first-child { color: var(--gris-4); }
.linea span:last-child { font-weight: 600; text-align: right; }

.etiqueta {
  display: inline-block; padding: 3px 9px; border-radius: 2px; font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
.etiqueta.pendiente { background: #fdf3d6; color: #8a6400; }
.etiqueta.aprobado { background: #dff0e3; color: var(--verde); }
.etiqueta.rechazado { background: #fbe0dd; color: var(--rojo); }
.etiqueta.abierto { background: var(--naranja-suave); color: var(--naranja-fuerte); }

/* ---------- Pestañas ---------- */
.pestanas { display: flex; gap: 6px; background: var(--gris-2); padding: 5px; border-radius: 4px; margin-bottom: 16px; overflow-x: auto; }
.pestanas button {
  flex: 1; white-space: nowrap; border: none; background: none; padding: 10px 14px;
  border-radius: 3px; cursor: pointer; font-weight: 600; color: var(--gris-4);
}
.pestanas button.activa { background: #fff; color: var(--gris-6); box-shadow: var(--sombra); }
.pestanas button .contador {
  background: var(--naranja); color: #fff; border-radius: 2px; padding: 1px 8px;
  font-size: 12px; margin-left: 6px;
}

/* ---------- Tarjeta de aprobación ---------- */
.pendiente-tarjeta { border-left: 4px solid var(--naranja); }
.pendiente-tarjeta.ok { border-left-color: var(--verde); }
.pendiente-tarjeta.alerta { border-left-color: var(--rojo); }
.pendiente-tarjeta .encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pendiente-tarjeta .nota { background: var(--gris-0); border-radius: 3px; padding: 10px; font-size: 15px; margin: 10px 0; }
.acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.aviso { font-size: 13px; padding: 8px 10px; border-radius: 3px; margin-top: 8px; }
.aviso.malo { background: #fbe0dd; color: var(--rojo); }
.aviso.bueno { background: #dff0e3; color: var(--verde); }
.aviso.neutro { background: var(--gris-0); color: var(--gris-4); }

/* ---------- Tabla de la semana ---------- */
.envoltura-tabla { overflow-x: auto; }
table.semana { border-collapse: collapse; width: 100%; font-size: 13px; background: #fff; }
table.semana th, table.semana td { border: 1px solid var(--gris-3); padding: 6px 5px; text-align: center; }
table.semana th { background: #1F3864; color: #fff; font-weight: 600; font-size: 12px; }
table.semana td.nombre { text-align: left; background: #BFBFBF; font-weight: 600; white-space: nowrap; }
table.semana td.etq { background: #D9D9D9; font-size: 11px; letter-spacing: .5px; }
table.semana td.dia { cursor: pointer; min-width: 78px; }
table.semana td.dia:hover { outline: 2px solid var(--naranja); }
table.semana td.dia.pend { color: var(--gris-4); font-style: italic; }
table.semana tr.separa td { border: none; height: 10px; background: var(--gris-0); }

.barra-semana { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.barra-semana b { flex: 1; text-align: center; font-size: 15px; }
.barra-semana .btn { flex: none; }

.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 13px; }
.leyenda div { display: flex; align-items: center; gap: 6px; }
.leyenda i { width: 20px; height: 14px; display: block; border: 1px solid var(--gris-4); }

/* ---------- Fotos de la obra ---------- */
.boton-foto { width: 100%; min-height: 52px; }
.foto-lista img, .fotos-registro img {
  width: 100%; display: block; border-radius: 3px; border: 1px solid var(--gris-2);
  background: var(--gris-0);
}
.foto-lista .btn { margin-top: 8px; width: 100%; }
.fotos-registro { display: flex; gap: 8px; margin: 10px 0; }
.fotos-registro figure { flex: 1; margin: 0; cursor: pointer; }
.fotos-registro figcaption { font-size: 12px; color: var(--gris-4); text-align: center;
  margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Aviso de sin internet ---------- */
.aviso-conexion {
  padding: 10px 16px; font-size: 14px; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; justify-content: center; text-align: center;
}
.aviso-conexion.sin-senal { background: #fdf3d6; color: #8a6400; }
.aviso-conexion.subiendo { background: var(--naranja-suave); color: #8a4415; }
.aviso-conexion .btn { flex: none; }

/* ---------- Buscador de obras ---------- */
.busca-obra { position: relative; }
.busca-obra input#m-obra-texto {
  width: 100%; padding: 12px; border: 1px solid var(--gris-3);
  border-radius: 3px; background: #fff;
}
.lista-obras {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: #fff; border: 1px solid var(--gris-3); border-radius: 3px;
  max-height: 230px; overflow-y: auto; box-shadow: var(--sombra);
}
.lista-obras .obra-opcion {
  display: block; width: 100%; text-align: left; padding: 12px 14px;
  border: none; border-bottom: 1px solid var(--gris-2); background: #fff;
  cursor: pointer; font-size: 15px; color: var(--gris-6);
}
.lista-obras .obra-opcion:last-child { border-bottom: none; }
.lista-obras .obra-opcion:hover { background: var(--naranja-suave); }
.lista-obras .obra-opcion b { display: inline-block; min-width: 46px; }

/* Resultados de la búsqueda de direcciones */
.lista-lugares { border: 1px solid var(--gris-3); border-radius: 3px; margin-top: 8px;
  max-height: 220px; overflow-y: auto; }
.lista-lugares .obra-opcion { font-size: 14px; line-height: 1.35; }

/* ---------- Modal ---------- */
.fondo-modal {
  position: fixed; inset: 0; background: rgba(20,20,25,.55); display: flex;
  align-items: center; justify-content: center; z-index: 50;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto; overflow-x: hidden;
}
.modal {
  background: #fff; border-radius: 6px; padding: 20px;
  width: 100%; max-width: 460px;
  min-width: 0;            /* si no, un campo largo estira la caja y se sale */
  max-height: 90vh; overflow-y: auto; overflow-x: hidden;
}
/* nada de lo que va adentro puede ser más ancho que la caja */
.modal * { max-width: 100%; min-width: 0; box-sizing: border-box; }
.modal select, .modal input, .modal textarea { width: 100%; }
.modal .acciones { flex-wrap: wrap; }
/* el botón principal (lleva flex:1 propio) se queda con el espacio;
   los de al lado solo ocupan lo que miden */
.modal .acciones .btn { flex: 0 1 auto; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding-left: 12px; padding-right: 12px; }
.modal h3 { margin: 0 0 4px; }
.modal .sub { color: var(--gris-4); font-size: 14px; margin: 0 0 16px; }
.opciones-marca { display: grid; gap: 8px; }
.opciones-marca button {
  color: var(--gris-6);
  display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--gris-2);
  background: #fff; border-radius: 3px; cursor: pointer; text-align: left; font-weight: 600;
}
.opciones-marca button:hover { border-color: var(--naranja); }
.opciones-marca i { width: 22px; height: 16px; display: block; border: 1px solid var(--gris-4); flex: none; }

/* ---------- Listas ---------- */
.fila-lista { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gris-2); }
.fila-lista:last-child { border-bottom: none; }
.fila-lista .crece { flex: 1; min-width: 0; }
.fila-lista .clave { font-weight: 700; min-width: 54px; }
.vacio { text-align: center; color: var(--gris-4); padding: 26px 10px; }

.aviso-modo {
  background: var(--naranja-suave); border: 1px solid #f3cdb4; color: #8a4415;
  padding: 10px 14px; border-radius: 3px; font-size: 13px; margin-bottom: 14px;
}

a { color: var(--naranja-fuerte); }
a.btn { text-decoration: none; }

.pie { text-align: center; color: var(--gris-4); font-size: 12px;
  padding: 20px 0 calc(40px + env(safe-area-inset-bottom)); }

@media (max-width: 700px) {
  .envoltura { padding: 12px; }
  .tarjeta { padding: 14px; }

  /* dedos, no alfileres */
  .btn { padding: 14px 18px; min-height: 48px; }
  .btn.chico { padding: 10px 14px; min-height: 40px; }
  .linea { padding: 11px 0; }
  .fila-lista { padding: 12px 0; }
  .campo input, .campo select, .campo textarea { padding: 14px; }
  .pestanas button { padding: 12px 14px; }

  /* La hoja, apretadita pero que quepa la semana completa */
  table.semana.compacta { font-size: 11px; table-layout: fixed; width: 100%; }
  table.semana.compacta th, table.semana.compacta td { padding: 4px 1px; }
  table.semana.compacta th { font-size: 10px; }
  table.semana.compacta td.nombre { width: 52px; max-width: 52px; white-space: normal;
    font-size: 10px; line-height: 1.15; padding: 4px 2px; }
  table.semana.compacta td.etq { width: 40px; font-size: 8px; letter-spacing: 0; padding: 4px 1px; }
  table.semana.compacta th:first-child { width: 52px; font-size: 9px; }
  table.semana.compacta .col-puesto { display: none; }
  table.semana.compacta td.dia { min-width: 0; }
  .envoltura-tabla { -webkit-overflow-scrolling: touch; }

  .modal { padding: 18px 16px; }
  .acciones .btn { flex: 1 1 auto; white-space: nowrap; }
}

@media print { header.barra, .pestanas, .btn { display: none !important; } }


/* ============================================================
   LA HOJA PARA IMPRIMIR / GUARDAR COMO PDF
   En pantalla no se ve; solo aparece al imprimir.
   ============================================================ */
#zona-impresion { display: none; }

/* Todo tiene que caber en una sola hoja tamaño carta, como el original */
.hoja-impresa { font-family: Calibri, Arial, sans-serif; color: #000; width: 100%;
  page-break-inside: avoid; }
.hoja-impresa table { border-collapse: collapse; width: 100%; table-layout: fixed;
  page-break-inside: avoid; }
.hoja-impresa td { border: 1px solid #000; text-align: center; font-size: 7.5pt;
  padding: 1px 1px; height: 16px; line-height: 1.15; white-space: nowrap; }
/* los nombres sí pueden partirse en dos renglones, los horarios no */
.hoja-impresa .nombre, .hoja-impresa .obs-texto, .hoja-impresa .catalogo td {
  white-space: normal; word-wrap: break-word; }

.hoja-impresa .marco { margin-bottom: 6px; }
.hoja-impresa .titulo { font-size: 12pt; font-weight: bold; height: 48px;
  border: 2px solid #000; position: relative; }
.hoja-impresa .logo { position: absolute; right: 6px; top: 4px; height: 40px; }

.hoja-impresa .semana { background: #D9D9D9; font-weight: bold; font-size: 9pt; }
.hoja-impresa .dia-cab { background: #D9D9D9; font-weight: bold; }
.hoja-impresa .azul { background: #1F3864; color: #fff; font-weight: bold; }
.hoja-impresa .vacia { border: 1px solid #000; }
.hoja-impresa .nombre { background: #BFBFBF; font-size: 9pt; }
.hoja-impresa .etq { background: #D9D9D9; font-size: 7.5pt; }

.hoja-impresa .obs { margin-top: 8px; }
.hoja-impresa .obs-etq { width: 21%; }
.hoja-impresa .obs-texto { text-align: left; padding: 3px 6px; height: 30px; font-size: 8.5pt; }
.hoja-impresa .ancho { height: 16px; }

.hoja-impresa .pie-hoja { display: flex; gap: 34px; margin-top: 10px; align-items: flex-start;
  page-break-inside: avoid; }
.hoja-impresa .catalogo { width: 42%; }
.hoja-impresa .catalogo td { height: 14px; }
.hoja-impresa .catalogo .clave { width: 40%; font-weight: 600; }
.hoja-impresa .leyenda-hoja { width: 32%; }
.hoja-impresa .leyenda-hoja .muestra { width: 40%; font-weight: bold; }

.hoja-impresa .nombre { line-height: 1.15; }

@media print {
  @page { size: letter portrait; margin: 8mm; }
  body.imprimiendo > *:not(#zona-impresion) { display: none !important; }
  body.imprimiendo #zona-impresion { display: block !important; }
  body.imprimiendo { background: #fff; }
  .hoja-impresa td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}