:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #dfe3e8;
  --text: #1c1f26;
  --text-muted: #5b6472;
  --primary: #2757c7;
  --primary-hover: #1e46a3;
  --danger: #c0392b;
  --danger-hover: #a5301f;
  --ok-bg: #eaf6ec;
  --ok-text: #1e6b34;
  --warn-bg: #fdf3e0;
  --warn-text: #8a5a00;
  --info-bg: #e3edfd;
  --info-text: #1d4d99;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1d2025;
    --border: #33373f;
    --text: #e7e9ec;
    --text-muted: #9aa2ad;
    --primary: #5b8cff;
    --primary-hover: #7ba1ff;
    --danger: #e5766a;
    --danger-hover: #ef8e83;
    --ok-bg: #17301e;
    --ok-text: #7fd996;
    --warn-bg: #362a10;
    --warn-text: #f0c463;
    --info-bg: #16233d;
    --info-text: #8fb4f5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

header.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.app-header .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.app-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.app-title span { display: block; font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }

nav.app-nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav.app-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 12px;
  border-radius: 6px;
}
nav.app-nav a:hover { background: var(--bg); color: var(--text); }
nav.app-nav a.activa { background: var(--primary); color: #fff; font-weight: 600; }

/* El manual tiene que verse a simple vista entre el resto de enlaces, que
   son todos texto plano del mismo color -- por eso lleva su propio fondo en
   vez de heredar el estilo gris de nav.app-nav a. */
nav.app-nav a.enlace-ayuda {
  background: var(--warn-bg);
  color: var(--warn-text);
  font-weight: 600;
  margin-left: 4px;
}
nav.app-nav a.enlace-ayuda:hover { background: var(--warn-text); color: var(--warn-bg); }
nav.app-nav a.enlace-ayuda.activa { background: var(--warn-text); color: #fff; }

.usuario-sesion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.usuario-sesion a { color: var(--text-muted); font-size: 0.8rem; }
.usuario-sesion a:hover { color: var(--text); }

/* Pantalla de login: la tarjeta centrada tanto de ancho como de alto,
   funciona igual en PC que en móvil porque no depende del tamaño exacto de
   la cabecera -- solo de la mitad de la altura visible. */
.pantalla-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 24px 16px;
}

main { padding: 24px 0 60px; }

h1 { font-size: 1.35rem; margin: 0 0 4px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
.ayuda { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 20px; line-height: 1.5; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; }

.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* Registrar tiempos: dos columnas independientes en vez de una sola rejilla —
   "qué se hizo" a la izquierda, "quién y cuánto" a la derecha. Cada columna es
   una pila vertical con su propio alto, así el bloque de cantidad (que cambia
   de alto según el modo) no puede estirar la columna de al lado como pasaba
   dentro de una rejilla compartida. */
.dos-columnas { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.columna { flex: 1 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }

label.campo { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 4px; }
input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.92rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-size: 0.92rem;
  font-family: inherit;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--primary-hover); }
.btn.secundario { background: transparent; color: var(--primary); border: 1px solid var(--border); }
.btn.secundario:hover { background: var(--bg); }
.btn.peligro { background: var(--danger); }
.btn.peligro:hover { background: var(--danger-hover); }
.btn.pequeno { padding: 6px 12px; font-size: 0.82rem; }

table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
th, td { text-align: left; padding: 9px 11px; font-size: 0.86rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-muted); font-weight: 600; background: var(--bg); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
.tabla-scroll { overflow-x: auto; border-radius: 10px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.pastilla { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.pastilla.ok { background: var(--ok-bg); color: var(--ok-text); }
.pastilla.warn { background: var(--warn-bg); color: var(--warn-text); }
.pastilla.info { background: var(--info-bg); color: var(--info-text); }
.pastilla.gris { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.aviso { padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 14px; line-height: 1.45; }
.aviso.ok { background: var(--ok-bg); color: var(--ok-text); }
.aviso.warn { background: var(--warn-bg); color: var(--warn-text); }
.aviso.info { background: var(--info-bg); color: var(--info-text); }

.vacio { color: var(--text-muted); background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 28px; text-align: center; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.stat-card .n { font-size: 1.5rem; font-weight: 700; }
.stat-card .etiqueta { color: var(--text-muted); font-size: 0.8rem; }

.formula { font-size: 0.85rem; color: var(--text-muted); }
.formula strong { color: var(--text); font-variant-numeric: tabular-nums; }

.op-lista { list-style: none; margin: 0; padding: 0; }
.op-lista li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.op-lista li:last-child { border-bottom: none; }
.op-lista .orden { color: var(--text-muted); font-size: 0.8rem; min-width: 22px; }
.op-lista .nombre { flex: 1 1 260px; font-size: 0.9rem; }

details.conversion-op { margin-top: 5px; }
details.conversion-op > summary {
  cursor: pointer;
  font-size: 0.79rem;
  color: var(--text-muted);
  padding: 3px 0;
}
details.conversion-op > summary strong { color: var(--text); }
details.conversion-op[open] > summary { color: var(--primary); margin-bottom: 8px; }

.form-conversion {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.bloque-conversion { margin-bottom: 12px; }
.bloque-conversion:last-of-type { margin-bottom: 0; }
.bloque-conversion .etiqueta-bloque {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 5px;
}
/* Alta de un tipo de trabajo desde la pantalla de registrar: aparece dentro
   de la misma tarjeta, separada del formulario para que se vea que es otra
   cosa. */
.bloque-alta {
  margin-top: 18px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.etiqueta-bloque {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 5px;
}
/* Cuando un texto de ayuda se movió a un tooltip (title) sobre un elemento
   que no parece interactivo por sí mismo (encabezados, botones), este
   subrayado discontinuo avisa de que hay más información al pasar el ratón. */
.etiqueta-bloque[title], h1[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
}

.bloque-conversion > input { width: 110px; }
.bloque-conversion .ayuda { display: inline; margin: 0 0 0 8px; font-size: 0.78rem; }

/* Cuando la operación se hace una vez por trabajo, el resto de la
   conversión se ignora: se atenúa para que quede claro. */
.resto-conversion.anulado { opacity: 0.4; }
.resto-conversion.anulado::before {
  content: "Se ignora: la operación se hace una vez por trabajo";
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warn-text);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 5px 9px;
  margin-bottom: 8px;
}

.bloque-variables {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin: 12px 0;
}

.resultado-medidas { margin: 8px 0 0; }

.medidas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; }
.medidas-grid .campo { font-size: 0.76rem; margin: 0; }
.medidas-grid input { margin-top: 3px; padding: 6px 8px; font-size: 0.85rem; }
.acciones { display: flex; gap: 5px; flex-wrap: wrap; }

details.editar summary { cursor: pointer; color: var(--primary); font-size: 0.82rem; padding: 4px 0; }
details.editar[open] { margin-bottom: 10px; }

/* ------------------------------------------------- lista + detalle
   Con muchos elementos, mostrarlos todos desplegados obligaba a un scroll
   constante: la lista se queda fija a la izquierda y solo se despliega el
   seleccionado. */
.maestro-detalle {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  align-items: start;
}
.panel-lista {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.panel-lista .alta-rapida { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }

.lista-seleccion { list-style: none; margin: 0; padding: 0; }
.lista-seleccion li a {
  display: flex;
  /* Los nombres largos ("Calendario sobremesa A5 horizontal") se cortaban con
     puntos suspensivos y no se distinguían entre sí: ahora parten en dos
     líneas y el contador se queda arriba a la derecha. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  line-height: 1.35;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 0.89rem;
  margin-bottom: 2px;
}
.lista-seleccion li a:hover { background: var(--bg); }
.lista-seleccion li a.activa { background: var(--primary); color: #fff; font-weight: 600; }
.lista-seleccion .etiqueta-nombre { overflow-wrap: anywhere; }
.lista-seleccion .conteo {
  flex: 0 0 auto;
  background: var(--bg);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.lista-seleccion li a.activa .conteo { background: rgba(255, 255, 255, 0.25); color: #fff; }

@media (max-width: 900px) {
  .maestro-detalle { grid-template-columns: 1fr; }
  .panel-lista { position: static; max-height: none; }
}

@media (max-width: 720px) {
  .container { padding: 0 14px; }
  header.app-header .container { gap: 8px; }
  nav.app-nav a { padding: 7px 9px; font-size: 0.84rem; }
}

/* ------------------------------------------------------------ cronómetro */
/* Pensado para mirarlo de lejos y tocarlo con el dedo: en el taller no se
   está sentado delante de la pantalla. */
.crono {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg);
}
.crono.corriendo { border-left-color: var(--primary); }
.crono.pausado { border-left-color: var(--warn-text, #b26a00); }
.crono.parado { border-left-color: var(--ok-text, #1f7a3d); }

.crono-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.crono-reloj {
  font-size: 2.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
}
.crono.pausado .crono-reloj { opacity: 0.55; }

.crono-botones { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.crono-botones .btn { min-width: 104px; min-height: 40px; }

/* Cantidad: interruptor "En <unidad> / Trabajo terminado" y cuenta en vivo de lo que se guarda.
   Su alto varía mucho según el modo (con la cuenta en vivo puede ocupar varias líneas), así que
   el interruptor y el campo van uno al lado del otro (no apilados) para no crecer tanto hacia
   abajo. Vive en su propia columna (ver .dos-columnas), independiente de la otra, así que ya no
   puede estirar el alto de "Minutos de persona" ni del resto de campos vecinos. */
#bloque-cantidad {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 24px;
}
#bloque-cantidad #campo-cantidad,
#bloque-cantidad #campo-cantidad-trabajo { width: 260px; max-width: 100%; }
#bloque-cantidad .modo-cantidad { margin-bottom: 0; }
.modo-cantidad { margin-bottom: 8px; }
.modo-cantidad .etiqueta-modo { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.segmentado { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmentado button {
  background: var(--surface);
  color: var(--text-muted);
  border: 0;
  border-radius: 0;
  padding: 7px 12px;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.segmentado button + button { border-left: 1px solid var(--border); }
.segmentado button:hover { color: var(--text); }
.segmentado button.activo {
  background: var(--info-bg);
  color: var(--info-text);
  font-weight: 600;
  cursor: default;
}
.resultado-conversion { margin: 8px 0 0; font-size: 0.85rem; color: var(--text-muted); min-height: 1.2em; }
.resultado-conversion.ok { color: var(--info-text); background: var(--info-bg); padding: 8px 10px; border-radius: 8px; }
.resultado-conversion.ok strong { font-size: 1rem; }
.resultado-conversion .detalle,
.resultado-conversion .aviso-linea { display: block; font-size: 0.75rem; margin-top: 2px; }
.resultado-conversion .detalle { opacity: 0.85; }
.resultado-conversion .aviso-linea { color: var(--warn-text); }
.resultado-conversion.error { color: var(--warn-text); background: var(--warn-bg); padding: 8px 10px; border-radius: 8px; }

/* Operaciones agrupadas por variantes (Colocar espiral A5/A4/A3 × fino/medio/grueso):
   un solo desplegable y debajo un botón por cada eje. */
.variantes-ejes { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.variantes-eje { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.variantes-eje .etiqueta-eje { font-size: 0.75rem; color: var(--text-muted); min-width: 56px; }
.variantes-eje .segmentado button { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.variantes-eje .v-detalle { font-size: 0.68rem; font-weight: 400; opacity: 0.8; }
.variantes-grupo { padding: 2px 0; }
.variantes-grupo .variantes-ejes { margin-left: 26px; margin-bottom: 4px; }
/* Estimar: cada familia con variantes (Colocar espiral…) ocupa su propia línea: la casilla y, a su lado, el formato y el
   tamaño. La altura mínima es la de los botones, así que al marcarla la línea no cambia de alto. */
.detalle-cantidad { margin: 2px 0 0; font-size: 0.7rem; line-height: 1.3; color: var(--text-muted); font-weight: 400; }
.variantes-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 10px; min-height: 62px; }
.variantes-fila .variantes-ejes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0; }

/* Familias de operaciones plegadas (lista de Operaciones y editor de Tipos de trabajo). */
.op-lista li.op-grupo { display: block; }
.op-lista li.op-grupo > details > summary,
.lista-seleccion li.op-grupo > details > summary {
  cursor: pointer; padding: 6px 2px; font-size: 0.9rem; list-style-position: inside;
}
.op-lista li.op-grupo > details > .op-lista { margin: 4px 0 6px 18px; border-left: 2px solid var(--border); padding-left: 10px; }
.lista-seleccion li.op-grupo > details > summary { padding: 8px 10px; }
.lista-seleccion li.op-grupo > details > ul { margin: 0 0 4px 14px; padding: 0; list-style: none; border-left: 2px solid var(--border); }
.fila-grupo { cursor: pointer; background: var(--bg); }
.fila-grupo td:first-child::before { content: '▸ '; }
.fila-grupo.abierta td:first-child::before { content: '▾ '; }
tr.variante-de-grupo td:first-child { padding-left: 28px; }

/* Catálogo de artículos: cabeceras de familia en la lista lateral. */
.lista-seleccion li.cabecera-familia {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); padding: 10px 10px 4px;
}

/* Lista de artículos a ancho completo: pestañas por familia y filas que abren la ficha. */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pestanas a {
  padding: 6px 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); font-size: 0.86rem; text-decoration: none;
}
.pestanas a:hover { color: var(--text); background: var(--bg); }
.pestanas a.activa { background: var(--info-bg); color: var(--info-text); font-weight: 600; border-color: transparent; }
.pestanas .n { opacity: 0.7; font-size: 0.78rem; margin-left: 3px; }
.tabla-articulos tr.fila-clicable { cursor: pointer; }
.tabla-articulos tr.fila-clicable:hover td { background: var(--bg); }
.tabla-articulos td a { color: var(--text); text-decoration: none; }
.tabla-articulos tr.cabecera-grupo td {
  background: var(--bg); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); padding-top: 12px;
}

/* Cuadro de «Guardar presupuesto» en Estimar */
.dialogo-presupuesto { border: 1px solid var(--border); border-radius: 12px; padding: 22px; width: min(92vw, 540px);
  background: var(--surface); color: var(--text); }
.dialogo-presupuesto::backdrop { background: rgba(0, 0, 0, 0.45); }