/* ===================================================================
   Tema «PAPEL NATIVO» — rediseño de la App de Mantenimiento.

   Cruce de dos direcciones aprobadas: la ESTRUCTURA del idioma nativo
   (grupos blancos con separadores sangrados, títulos grandes, barra de
   pestañas abajo, galones) con la PIEL editorial industrial (fondo de
   papel, serif para las cifras, filete navy con filo dorado, versalitas).

   Esta hoja va SIEMPRE DESPUÉS de estilo.css y no lo modifica: todo
   cuelga de html[data-tema="papel"], que lo pone js/tema.js. Con
   data-tema="clasico" no se aplica ni una regla y la app se ve como
   siempre. Ahí está el rollback: ver la cabecera de js/tema.js.

   Regla al tocar esto: NO añadir hex sueltos. Si hace falta un color
   nuevo, sale de los tokens de aquí abajo.
   =================================================================== */

/* ---- 1. Tokens ----------------------------------------------------
   La marca no se toca: navy y gold son los mismos. Lo que cambia son
   las superficies (papel en vez de gris frío), los filetes (cálidos) y
   la tipografía de titular, que en el tema clásico apuntaba a la misma
   pila del sistema que el cuerpo: había token de display, pero no había
   display. */
html[data-tema="papel"] {
  --bg: #F4F1EA;          /* papel */
  --card: #FFFFFF;
  --text: #16191B;        /* tinta, no negro */
  --muted: #6B6257;       /* 5.4:1 sobre papel */
  --line: #E3DBCB;        /* filete fino */
  --line-2: #C9BFA9;      /* filete fuerte / borde de campo */
  --search: #EFEBE1;
  --gold-soft: #F4EAD3;
  --radius: 12px;
  --radius-sm: 10px;
  --font-display: Georgia, "Noto Serif", "Times New Roman", serif;
  /* La barra de arriba mide 60 px + los 3 del filo dorado. Lo usan las
     barras pegadas de cada página para colocarse debajo. */
  --nav-alto: 63px;
  /* Sin sombras: la profundidad la dan los filetes. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 12px 40px rgba(22, 25, 27, 0.16);
}

/* ---- 2. Cuerpo y cifras -------------------------------------------
   tabular-nums en todo: la app es un contador de horas, cantidades y
   precios, y con cifras de ancho variable las columnas bailan de fila
   en fila. Solo afecta a los dígitos. */
html[data-tema="papel"] body {
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

/* La voz de las cifras que importan es la serif. */
html[data-tema="papel"] .hoy-hora,
html[data-tema="papel"] .cal-parte-hora,
html[data-tema="papel"] .stat .n,
html[data-tema="papel"] .jor-total {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
}
html[data-tema="papel"] .stat .n { font-size: 2.1rem; }
html[data-tema="papel"] .stat .n.es-alerta { color: var(--err); }
html[data-tema="papel"] .stat .n.es-aviso { color: var(--gold-600); }

/* Títulos: serif, sin negrita apretada. */
html[data-tema="papel"] .page-header h1,
html[data-tema="papel"] .entidad-cab h1,
html[data-tema="papel"] .inicio-cabecera h1,
html[data-tema="papel"] .cal-titulo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

/* Micro-etiqueta: versalitas espaciadas. Es el gesto editorial que
   sustituye al título de sección en negrita. */
html[data-tema="papel"] .seccion-titulo,
html[data-tema="papel"] .lb {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
}

/* ---- 3. Barra de arriba -------------------------------------------
   Pasa de navy a papel blanco con filete navy y filo dorado. El logo lo
   cambia js/nav.js: el blanco no se ve sobre fondo claro. */
html[data-tema="papel"] .topnav {
  background: var(--card);
  color: var(--text);
  border-bottom: 2px solid var(--navy);
  box-shadow: none;
}
html[data-tema="papel"] #nav::after {
  content: "";
  display: block;
  height: 3px;
  background: var(--gold);
}
html[data-tema="papel"] .topnav-marca { color: var(--navy); }
html[data-tema="papel"] .nav-link { color: var(--muted); }
html[data-tema="papel"] .nav-link:hover { background: var(--search); color: var(--navy); }
html[data-tema="papel"] .nav-link.activo {
  color: var(--navy);
  box-shadow: inset 0 -3px 0 var(--gold);
}
html[data-tema="papel"] .topnav-toggle,
html[data-tema="papel"] .btn-salir {
  color: var(--navy);
  border-color: var(--line-2);
}
html[data-tema="papel"] .topnav-toggle:hover,
html[data-tema="papel"] .btn-salir:hover { background: var(--search); }
html[data-tema="papel"] .topnav :focus-visible { outline-color: var(--navy); }

/* ---- 4. Barra de pestañas de abajo (nav.js) -----------------------
   Solo en móvil, que es donde el ☰ de la esquina de arriba quedaba
   lejos del pulgar. En escritorio no aparece: allí manda la barra de
   arriba, que se ve entera. */
/* Oculta SIN acotar al tema, a propósito: esta hoja se carga siempre, y si la
   regla colgara de html[data-tema="papel"] el tema clásico no tendría ninguna
   regla para .tabbar y la barra saldría como cuatro enlaces sueltos sin
   estilos debajo de la cabecera. Pasó al probar la vuelta atrás. */
.tabbar { display: none; }

@media (max-width: 640px) {
  html[data-tema="papel"] .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--card);
    border-top: 2px solid var(--navy);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-tema="papel"] .tab-item {
    flex: 1 1 0;
    min-height: 52px;
    padding: 7px 2px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    text-decoration: none;
    color: var(--muted);
    font-family: var(--font-body);
    cursor: pointer;
  }
  html[data-tema="papel"] .tab-item .ico { width: 23px; height: 23px; }
  html[data-tema="papel"] .tab-item .tab-txt {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  html[data-tema="papel"] .tab-item.activo {
    color: var(--navy);
    box-shadow: inset 0 -3px 0 var(--gold);
  }
  html[data-tema="papel"] .tab-item.activo .ico { stroke: var(--navy); }
  /* Hueco para que la barra no tape el final del contenido. */
  html[data-tema="papel"] body { padding-bottom: 66px; }

  /* Lo que vive fijo abajo tiene que subirse por encima de la barra de pestañas, o se
     queda encima de las pestañas y no se puede navegar. El `body` ya reserva el hueco
     para el CONTENIDO, pero un `position: fixed` no lo ve.
     El aviso de versión nueva es el grave: no se va hasta que se pulsa, así que taparía
     las pestañas de en medio para siempre. El toast dura tres segundos, pero por el
     mismo precio. */
  html[data-tema="papel"] .aviso-version,
  html[data-tema="papel"] .toast-wrap { bottom: 82px; }
  /* El aviso de la cola offline se pinta con estilos EN LÍNEA (js/offline.js), y un
     estilo en línea gana a cualquier hoja: de ahí el !important, que aquí no es
     pereza. Es el más importante de los tres: sale cuando hay partes sin enviar, o
     sea en obra y sin cobertura, va centrado y con z-index 900, así que se quedaba
     justo encima de las pestañas de en medio. */
  html[data-tema="papel"] #fgc-offline-badge { bottom: 82px !important; }
  /* El botón flotante sube por encima de la barra. */
  html[data-tema="papel"] .fab { bottom: 82px; }
}

/* ---- 5. Tarjetas como grupos --------------------------------------
   La tarjeta deja de ser una caja con sombra y pasa a ser un grupo
   blanco sobre papel, con filete y esquinas de 12. */
html[data-tema="papel"] .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
html[data-tema="papel"] .card--gold { border-left: 1px solid var(--line); }
html[data-tema="papel"] .card--gold::before { display: none; }

/* El título de tarjeta conserva su acento dorado, pero en serif. */
html[data-tema="papel"] .card > h2:first-child,
html[data-tema="papel"] .card > h3:first-child,
html[data-tema="papel"] .card h2,
html[data-tema="papel"] .card h3,
html[data-tema="papel"] .cab-seccion h2,
html[data-tema="papel"] .cab-seccion h3,
html[data-tema="papel"] .modal h2,
html[data-tema="papel"] .modal h3,
html[data-tema="papel"] .modal-titulo {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
}
html[data-tema="papel"] .card > h2:first-child::before,
html[data-tema="papel"] .card > h3:first-child::before {
  background: var(--gold);
}

/* Filas de lista: separador sangrado, como en el idioma nativo. */
html[data-tema="papel"] .lista-hoy li + li { border-top: 1px solid var(--line); }
html[data-tema="papel"] .hoy-fila { min-height: 44px; }
html[data-tema="papel"] .hoy-fila b { color: var(--text); font-weight: 600; }

/* ---- 6. Tablas ----------------------------------------------------
   Cabecera clara con filete dorado a la izquierda (excepción acordada
   al sistema: no va navy en mayúsculas) y filas sin cebra: la separan
   los filetes cálidos, que cansan menos la vista. */
html[data-tema="papel"] .tabla {
  background: var(--card);
  box-shadow: none;
}
html[data-tema="papel"] .tabla thead th {
  background: var(--search);
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
html[data-tema="papel"] .tabla thead th:first-child { box-shadow: inset 3px 0 0 var(--gold); }
html[data-tema="papel"] .tabla tbody td { border-bottom: 1px solid var(--line); }
html[data-tema="papel"] .tabla tbody tr:nth-child(even) { background: transparent; }
html[data-tema="papel"] .tabla-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
html[data-tema="papel"] .fila-click td.nombre-cel { color: var(--navy); }

/* ---- 7. Estados ---------------------------------------------------
   Un solo lenguaje para .pill y .badge, que hasta ahora eran dos
   sistemas con paletas parecidas pero distintas. El color nunca es la
   única señal: siempre lleva su texto. */
html[data-tema="papel"] .pill,
html[data-tema="papel"] .badge {
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
}
html[data-tema="papel"] .pill-agendado,
html[data-tema="papel"] .badge--muted { background: var(--search); color: #5A5348; }
html[data-tema="papel"] .pill-pendiente_revision,
html[data-tema="papel"] .badge--warn,
html[data-tema="papel"] .badge--gold { background: var(--gold-soft); color: #5A4109; }
html[data-tema="papel"] .pill-aprobado,
html[data-tema="papel"] .badge--ok { background: #E7F3EC; color: #10603A; }
html[data-tema="papel"] .pill-rechazado,
html[data-tema="papel"] .badge--err { background: #FBEFEC; color: #7A3226; }
html[data-tema="papel"] .pill-en_curso,
html[data-tema="papel"] .badge--info { background: #E8EDF1; color: #1B4A70; }

/* ---- 8. Botones ---------------------------------------------------
   Esquinas de 12, sin sombra, y el secundario sobre papel blanco con
   filete cálido. */
html[data-tema="papel"] .btn {
  border-radius: var(--radius-sm);
  background: var(--card);
  border-color: var(--line-2);
  color: var(--navy);
  box-shadow: none;
  font-weight: 600;
}
html[data-tema="papel"] .btn:hover { background: var(--search); border-color: var(--line-2); }
html[data-tema="papel"] .btn-primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
html[data-tema="papel"] .btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
html[data-tema="papel"] .btn-danger { background: var(--err); border-color: var(--err); color: #fff; }
html[data-tema="papel"] .btn-ghost { background: transparent; border-color: transparent; }
html[data-tema="papel"] button.primary { border-radius: var(--radius-sm); }
html[data-tema="papel"] .fab { border-radius: 999px; box-shadow: 0 6px 20px rgba(22,25,27,0.22); }

/* ---- 9. Campos ----------------------------------------------------*/
html[data-tema="papel"] .campo input,
html[data-tema="papel"] .campo select,
html[data-tema="papel"] .campo textarea,
html[data-tema="papel"] .filtros select,
html[data-tema="papel"] input,
html[data-tema="papel"] .add-equipo-bar select {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text);
}
html[data-tema="papel"] .campo label,
html[data-tema="papel"] label {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
html[data-tema="papel"] .campo input:focus,
html[data-tema="papel"] .campo select:focus,
html[data-tema="papel"] .campo textarea:focus,
html[data-tema="papel"] input:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 44, 64, 0.13);
}
html[data-tema="papel"] .campo-lectura { background: var(--search); }

/* Segmentados, chips y pastillas de frecuencia: filete cálido. */
html[data-tema="papel"] .seg,
html[data-tema="papel"] .chip,
html[data-tema="papel"] .ubi-chip,
html[data-tema="papel"] .frec-tick,
html[data-tema="papel"] .tick,
html[data-tema="papel"] .mat-sug { border-color: var(--line-2); }
html[data-tema="papel"] .seg-btn.activo,
html[data-tema="papel"] .chip.activo,
html[data-tema="papel"] .ubi-chip.activo { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-tema="papel"] .gsub-link.activo { background: var(--navy); }
html[data-tema="papel"] .tab.activo { border-bottom-color: var(--gold); color: var(--navy); }

/* ---- 10. Avisos y mensajes ----------------------------------------*/
html[data-tema="papel"] .mensaje { border-radius: var(--radius-sm); }
html[data-tema="papel"] .mensaje-aviso,
html[data-tema="papel"] .cal-guardia { background: var(--gold-soft); border-color: var(--line); color: #5A4109; }
html[data-tema="papel"] .cal-guardia--mia { background: var(--gold-soft); border-color: var(--gold); }
html[data-tema="papel"] .mensaje-error { background: #FBEFEC; border-color: #EBD2CB; color: #7A3226; }
html[data-tema="papel"] .mensaje-ok { background: #E7F3EC; border-color: #CBE4D6; color: #10603A; }
html[data-tema="papel"] .toast { border-radius: var(--radius-sm); }
html[data-tema="papel"] .modal { border-radius: var(--radius); }

/* ---- 11. Los pasos del parte --------------------------------------
   En el tema clásico, por debajo de 760 px el NOMBRE del paso se
   escondía y quedaban cuatro números sueltos: el operario no sabía en
   qué paso estaba. Aquí el nombre se queda y lo que se recorta es el
   relleno; a 360 px cabe («Trabajo», «Material», «Equipos», «Firma»
   son cortos). */
html[data-tema="papel"] .pasos {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
html[data-tema="papel"] .paso-chip {
  border-color: var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--card);
}
html[data-tema="papel"] .paso-chip[aria-current="step"] {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(14, 44, 64, 0.1);
}
html[data-tema="papel"] .paso-chip .num {
  background: var(--search);
  font-family: var(--font-display);
}

@media (max-width: 760px) {
  html[data-tema="papel"] .paso-chip .txt {
    display: block;
    /* 12 px. Medido a 375: los cuatro nombres caben en chips de 83 px sin
       desbordar. Por debajo de esto el nombre del paso deja de leerse a
       pleno sol, que es justo el problema que veníamos a arreglar. */
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.15;
  }
  html[data-tema="papel"] .paso-chip {
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    justify-content: center;
    text-align: center;
  }
  html[data-tema="papel"] .paso-chip .num { width: 22px; height: 22px; font-size: 0.72rem; }
  html[data-tema="papel"] .pasos-lista { gap: 5px; }
}

/* El baremo del parte: cabecera clara en vez de navy, para que case con
   la cabecera de tabla del resto de la app. */
html[data-tema="papel"] .baremo thead th {
  background: var(--search);
  color: var(--muted);
}
html[data-tema="papel"] .baremo-grupo td { background: var(--gold-soft); color: #5A4109; }
html[data-tema="papel"] .baremo-cant input { font-family: var(--font-display); font-size: 1.05rem; }

/* ---- 12. Calendario -----------------------------------------------*/
html[data-tema="papel"] .cal-dia-cab { background: var(--search); }
html[data-tema="papel"] .cal-dia--hoy .cal-dia-cab { background: var(--gold-soft); }
html[data-tema="papel"] .cal-cabecera-dias { background: var(--navy); }
html[data-tema="papel"] .cal-celda--hoy { background: var(--gold-soft); }
html[data-tema="papel"] .cal-parte { border-color: var(--line); border-radius: var(--radius-sm); }
html[data-tema="papel"] .cal-dia { border-radius: var(--radius); }

/* ---- 13. Login ----------------------------------------------------
   Papel en vez de degradado navy: la marca la lleva el logo y el filo
   dorado, no el fondo. */
html[data-tema="papel"] .login-wrap {
  background: var(--bg);
}
html[data-tema="papel"] .login-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
html[data-tema="papel"] .brand h1 { font-family: var(--font-display); font-weight: 400; }

/* ---- 14. Revisión de equipos: el punto de checklist, en UNA línea --------
   Antes cada punto ocupaba dos filas y media: descripción arriba, tres botones
   sueltos debajo y un campo «Observación» vacío a todo lo ancho. Multiplicado
   por los ocho puntos de un vaso de expansión, la pantalla no se acababa.

   Aquí el punto es una fila: descripción a la izquierda, el resultado a la
   derecha como UN control segmentado (no tres cajas), y la observación aparece
   en una segunda línea solo cuando hay algo que contar. */

html[data-tema="papel"] .check-items {
  margin-top: 10px;
  padding-top: 0;
  border-top: 1px solid var(--line);
}

html[data-tema="papel"] .check-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 8px 0;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
}
html[data-tema="papel"] .check-item:last-child { border-bottom: none; }

/* display:contents saca al segmentado, al valor y a la observación de su caja
   y los convierte en celdas de la rejilla del punto: sin esto no se puede
   poner el segmentado a la derecha de la descripción Y la observación debajo,
   porque los tres son hermanos dentro de .check-controles. Si un navegador
   viejo no lo entiende, se queda la maquetación de antes: distinta, no rota. */
html[data-tema="papel"] .check-controles { display: contents; }

html[data-tema="papel"] .check-desc {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

/* Los tres botones pasan a ser un solo control: un carril con el elegido
   relleno. Antes se leían como tres cajas independientes. */
html[data-tema="papel"] .ticks {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  gap: 0;
  padding: 2px;
  background: var(--search);
  border-radius: 8px;
}
html[data-tema="papel"] .tick {
  width: 44px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
}
html[data-tema="papel"] .tick:hover { background: rgba(22, 25, 27, 0.05); }
html[data-tema="papel"] .tick.tick-na { font-size: 0.78rem; font-weight: 600; }
html[data-tema="papel"] .tick-ok.activo { background: var(--ok); color: #fff; }
html[data-tema="papel"] .tick-nok.activo { background: var(--err); color: #fff; }
html[data-tema="papel"] .tick-na.activo { background: var(--muted); color: #fff; }

/* El valor medido (presiones, temperaturas) sí es dato del punto: se queda
   siempre, en su propia línea y corto. */
html[data-tema="papel"] .check-controles .chk-valor {
  grid-column: 1;
  grid-row: 2;
  width: 150px;
  min-width: 0;
}

/* La observación solo cuando hace falta: al marcar ✕, o si ya trae texto
   —un borrador recuperado—, para que nadie se quede con una nota escrita que
   no puede ver ni corregir. Lo segundo lo detecta :placeholder-shown, que va
   en cualquier móvil; lo primero, el data-res que pone checklist.js. */
html[data-tema="papel"] .check-controles .chk-obs {
  display: none;
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  min-width: 0;
  flex: none;
}
html[data-tema="papel"] .check-item[data-res="nok"] .chk-obs,
html[data-tema="papel"] .check-controles .chk-obs:not(:placeholder-shown) {
  display: block;
}

/* El punto con incidencia se tiñe: es lo que se busca al repasar la revisión. */
html[data-tema="papel"] .check-item[data-res="nok"] {
  background: #FBEFEC;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0 -10px;
}
html[data-tema="papel"] .check-item[data-res="nok"] .ticks { background: #F3DCD5; }
html[data-tema="papel"] .check-item[data-res="nok"] .chk-obs { border-color: #EBD2CB; }
html[data-tema="papel"] .check-item[data-res="na"] .check-desc { color: var(--muted); }

/* Cabecera del equipo y etiquetas de periodicidad. */
html[data-tema="papel"] .check-eq-head strong { color: var(--navy); font-weight: 600; }
html[data-tema="papel"] .eq-frec-resumen,
html[data-tema="papel"] .chk-frec {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--search);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}
html[data-tema="papel"] .eq-frec-resumen,
html[data-tema="papel"] .chk-frec.frec-vencido {
  background: var(--gold-soft);
  color: #5A4109;
}
html[data-tema="papel"] .eq-aldia { color: var(--ok); }
html[data-tema="papel"] .check-equipo.mostrar-ocultos .check-item.item-oculto {
  background: var(--search);
  border-radius: 8px;
}

/* En móvil no cabe la descripción al lado del segmentado si el texto es largo
   («Inspección de compresores y otros dispositivos de inyección de aire»), así
   que a partir de ahí el resultado baja a su propia línea a todo lo ancho:
   se pierde algo de densidad y se gana un blanco de dedo de 44 px. */
@media (max-width: 430px) {
  html[data-tema="papel"] .check-item { grid-template-columns: minmax(0, 1fr); }
  html[data-tema="papel"] .check-desc { grid-column: 1; }
  html[data-tema="papel"] .ticks { grid-column: 1; grid-row: 2; display: flex; }
  html[data-tema="papel"] .tick { flex: 1 1 0; width: auto; }
  html[data-tema="papel"] .check-controles .chk-valor { grid-row: 3; width: 100%; }
  html[data-tema="papel"] .check-controles .chk-obs { grid-row: 4; }
}

/* ---- 15. Cabecera del equipo: separar despachar de quitar ----------------
   «Marcar todo ✓» y «Quitar» eran dos botones fantasma idénticos y pegados, y
   uno da por bueno un equipo entero mientras el otro lo saca de la revisión.
   Con guantes y de pie, eso es una pulsación equivocada esperando a pasar. */

html[data-tema="papel"] .eq-head-acc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* La acción frecuente y benigna: botón con borde, icono y su texto completo. */
html[data-tema="papel"] .btn-marcar-todo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 44 px en TODOS los anchos, no solo en movil: el suelo de .btn-sm de
     estilo.css solo entra por debajo de 640 px, y esta pantalla se usa con
     tablet en obra. Da por bueno un equipo entero: merece area de dedo. */
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--navy);
  color: var(--navy);
  font-weight: 600;
}
html[data-tema="papel"] .btn-marcar-todo .ico {
  width: 17px;
  height: 17px;
  stroke: var(--ok);
  stroke-width: 2.4;
}
html[data-tema="papel"] .btn-marcar-todo:hover { background: var(--search); }

/* La destructiva: discreta, en rojo, y separada por un filete para que no se
   lea como la siguiente opción de la misma fila. */
html[data-tema="papel"] .btn-quitar-eq {
  /* Medido: con margin-left:auto se quedaban a 10 px uno del otro, porque
     .eq-head-acc se ajusta a su contenido y no hay hueco que repartir. Asi que
     la distancia se pone a mano: con el gap del contenedor son ~32 px entre las
     dos areas de toque, y el filete dice que no son la misma familia. */
  margin-left: 6px;
  padding-left: 16px;
  min-height: 44px;
  border: none;
  border-left: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--err);
  font-weight: 600;
}
html[data-tema="papel"] .btn-quitar-eq:hover {
  background: transparent;
  color: #7A3226;
  text-decoration: underline;
}

/* «Ver todos los que no tocan hoy» es informativo: se queda fantasma. */
html[data-tema="papel"] .btn-ver-todos {
  border: none;
  background: transparent;
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  padding-left: 0;
}

/* En móvil la cabecera ya bajaba los botones a una segunda línea. Ahí el de
   marcar ocupa lo que necesita y «Quitar» se va al extremo opuesto: el ancho
   entre los dos es la mejor defensa contra el dedo gordo. */
@media (max-width: 640px) {
  html[data-tema="papel"] .eq-head-acc { width: 100%; gap: 8px; }
  html[data-tema="papel"] .btn-marcar-todo { flex: 1 1 auto; justify-content: center; }
}