/* Marcas (§7).
 *
 * Rediseño GRC Empresarial (18/10/2026). Sólo tokens de lcr.css: ningún
 * color literal (core/tests_estilos.py lo comprueba en todas las hojas grc-*).
 *
 * Lo que vive aquí: la barra de herramientas del listado, la cabecera del
 * detalle con sus acciones agrupadas (dos <details> que se abren a lo ancho,
 * sin guiones), la navegación por período de pago, el resumen, las semanas
 * de marcas con sus incidencias a la vista y el historial de horarios.
 */

/* ------------------------------------------------------------ listado -- */
/* Mes a la izquierda, herramientas a la derecha; «Subir marcas» al final,
   como acción principal (§7, punto 2). */
.marcas-barra{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--e-3); margin-bottom:var(--e-4);
}
.marcas-barra__grupo{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }
.marcas-barra__grupo--fin{ justify-content:flex-end; }
@media (max-width:720px){
  .marcas-barra__grupo--fin{ justify-content:flex-start; }
  .marcas-barra__grupo--fin .btn{ flex:1 1 auto; }
}

.marcas-planillas{
  display:flex; flex-wrap:wrap; gap:var(--e-2) var(--e-4); list-style:none;
  margin:0 0 var(--e-4); padding:0;
}
.marcas-planillas__it{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); font-size:var(--t-sm); }

.marcas-aviso{ margin-bottom:var(--e-4); }
.marcas-incidencia-linea{ font-size:var(--t-xs); color:var(--oro-800); font-weight:var(--w-semi); }

/* ------------------------------------------------------- detalle: cab -- */
.marcas-cab .volver{ margin-bottom:var(--e-2); }
.marcas-cab__datos{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-4); }
.marcas-cab__datos b{ color:var(--azul-950); font-weight:var(--w-semi); }

/* Las acciones de la persona, arriba y agrupadas (§7, puntos 4 y 5). Cada
   menú es un <details>: cerrado ocupa lo que su botón; abierto baja a su
   propia línea y su panel toma todo el ancho, así que nada queda tapado ni
   cortado en el teléfono. */
.marcas-acciones{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--e-2);
  margin-top:var(--e-4);
}
.marcas-acciones__menu > summary{ list-style:none; cursor:pointer; }
.marcas-acciones__menu > summary::-webkit-details-marker{ display:none; }
.marcas-acciones__menu > summary::after{
  content:""; width:6px; height:6px; margin-left:var(--e-1);
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--m-rapido) var(--m-curva);
}
.marcas-acciones__menu[open]{ flex-basis:100%; }
.marcas-acciones__menu[open] > summary{ border-color:var(--vino-500); color:var(--vino-700); box-shadow:inset 0 -2px 0 var(--vino-500); }
.marcas-acciones__menu[open] > summary::after{ transform:rotate(225deg) translateY(-1px); }
.marcas-acciones__panel{
  margin-top:var(--e-2); padding:var(--e-4) var(--e-5);
  background:var(--blanco); border:1px solid var(--gris-200);
  border-top:3px solid var(--azul-600); border-radius:var(--r-lg); box-shadow:var(--s-tarjeta);
}
.marcas-acciones__panel--doble{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:var(--e-5);
}
.marcas-accion{ min-width:0; }
.marcas-accion + .marcas-accion{ border-left:1px solid var(--gris-200); padding-left:var(--e-5); }
@media (max-width:720px){
  .marcas-accion + .marcas-accion{ border-left:0; padding-left:0; border-top:1px solid var(--gris-200); padding-top:var(--e-4); }
}
.marcas-accion__titulo{ font-size:var(--t-md); font-weight:var(--w-semi); color:var(--azul-950); margin:0 0 var(--e-2); }
.marcas-accion__hecho{ font-size:var(--t-sm); color:var(--gris-700); margin:0 0 var(--e-2); }

/* ------------------------------------------------ detalle: el período -- */
/* El período de pago de la persona, con el anterior y el siguiente
   (§7, punto 9). */
.marcas-periodo{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e-2) var(--e-3);
  margin:var(--e-4) 0; padding:var(--e-3) var(--e-4);
  background:var(--g-suave-azul); border:1px solid var(--gris-200); border-radius:var(--r-lg);
}
.marcas-periodo__actual{ display:flex; flex-direction:column; align-items:center; padding:0 var(--e-3); }
.marcas-periodo__et{
  font-size:var(--t-xs); font-weight:var(--w-semi); letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase; color:var(--vino-700);
}
.marcas-periodo__actual b{ font-size:var(--t-lg); color:var(--azul-950); font-variant-numeric:tabular-nums; }
.marcas-periodo__otros{ display:flex; flex-wrap:wrap; gap:var(--e-1) var(--e-4); margin-left:auto; font-size:var(--t-sm); }
.marcas-periodo__nota{ flex-basis:100%; margin:0; font-size:var(--t-xs); color:var(--c-texto-tenue); }
@media (max-width:720px){
  .marcas-periodo__otros{ margin-left:0; flex-basis:100%; }
}

/* ------------------------------------------------ detalle: el resumen -- */
.marcas-resumen{ margin-bottom:var(--e-5); }
.marcas-resumen__cifras{ margin-bottom:var(--e-4); box-shadow:none; }
.marcas-resumen__estado{ font-size:var(--t-md); line-height:1.4; }
.marcas-advertencias{ margin-bottom:var(--e-4); }
.marcas-advertencias .banda__texto + .banda__texto{ margin-top:var(--e-1); }

.marcas-confirmacion{ display:flex; flex-direction:column; gap:var(--e-3); margin-bottom:var(--e-4); }
.marcas-confirmacion__hecha{
  padding:var(--e-3) var(--e-4); border:1px solid var(--gris-200);
  border-left:3px solid var(--teal-500); border-radius:var(--r-md); background:var(--gris-50);
}
.marcas-confirmacion__hecha p{ margin:0; }
.marcas-confirmacion__botones{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.marcas-confirmacion__nota{ margin:0; font-size:var(--t-sm); color:var(--c-texto-medio); }

.marcas-calculo{ margin-top:var(--e-2); }
.marcas-calculo__titulo{ font-size:var(--t-md); font-weight:var(--w-semi); color:var(--azul-950); margin:var(--e-5) 0 var(--e-2); }

.marcas-bloque{ margin-bottom:var(--e-5); }

/* Historiales cortos: confirmaciones y horarios, con autor y fecha. */
.marcas-historial{ list-style:none; margin:0 0 var(--e-3); padding:0; }
.marcas-historial__it{ padding:var(--e-2) 0; border-bottom:1px solid var(--gris-100); font-size:var(--t-sm); }
.marcas-historial__it:last-child{ border-bottom:0; }
.marcas-historial-fila{ margin-top:var(--e-1); font-size:var(--t-sm); }

/* ------------------------------------------------- detalle: semanas -- */
/* Una semana por desplegable (§7, punto 8). Las incidencias van debajo,
   fuera del <details>: se ven aunque la semana esté cerrada. */
.marcas-semanas{ margin-bottom:var(--e-5); }
.marcas-semanas__nota{ margin:0 0 var(--e-3); }
.marcas-semana + .marcas-semana{ margin-top:var(--e-3); }
.marcas-semana__caja > summary{ flex-wrap:wrap; }
.marcas-semana__fechas{ font-variant-numeric:tabular-nums; }
.marcas-semana__incidencias{
  list-style:none; margin:0; padding:var(--e-2) var(--e-5);
  background:var(--amarillo-100); border:1px solid var(--amarillo-400); border-top:0;
  border-left:4px solid var(--vino-600); border-radius:0 0 var(--r-lg) var(--r-lg);
  font-size:var(--t-sm); color:var(--azul-950);
}
.marcas-semana__incidencias li + li{ margin-top:var(--e-1); }
.marcas-semana:has(.marcas-semana__incidencias) .marcas-semana__caja{ border-bottom-left-radius:0; border-bottom-right-radius:0; }

/* ---------------------------------------------------------- horarios -- */
.marcas-horarios-acciones{ margin:var(--e-5) 0; }
.marcas-grupo{ display:grid; gap:var(--e-3); }
.marcas-grupo .btn{ justify-self:start; }

@media print{
  .marcas-semana__caja{ break-inside:avoid; }
}