/* La sección privada: material para clientes, con clave (material/index.html). Usa los tokens de estilos.css. */
.material { min-height: 100vh; display: flex; flex-direction: column; }
.material__marca { padding-block: 26px; border-bottom: 1px solid var(--linea); }
.material__marca .envoltura { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.material__marca .marca__nombre { color: var(--hueso); }
.material__cuerpo { flex: 1 0 auto; padding-block: clamp(48px, 8vw, 110px); display: grid; gap: 18px; align-content: start; }
.material__titulo { font-size: clamp(32px, calc(2.6vw + 18px), 56px); max-width: 18ch; }

.material__puerta { margin-top: 18px; display: grid; gap: 10px; max-width: 520px; }
.material__rotulo { font-family: var(--f-cifra); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--trigo); }
.material__fila { display: flex; gap: 10px; flex-wrap: wrap; }
.material__campo {
  flex: 1 1 240px; min-height: 48px; padding: 10px 14px; border: 1px solid rgba(238, 240, 234, 0.4); border-radius: 2px;
  background: rgba(238, 240, 234, 0.06); color: var(--hueso); font-family: var(--f-cifra); font-size: 17px; letter-spacing: .04em;
}
.material__campo:focus { outline: 2px solid var(--trigo); outline-offset: 2px; border-color: var(--trigo); }
.material__fila .boton { min-height: 48px; }
.material__estado { min-height: 1.5em; margin: 0; font-size: 15px; color: var(--niebla); }
.material__estado--mal { color: #f2a48f; }

.material__lista { margin-top: 28px; display: grid; gap: 14px; max-width: 760px; }
.material__lista[hidden] { display: none; }
.material__subtitulo { margin: 0; font-family: var(--f-cifra); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--niebla); }
.material__decks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.material__deck { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.material__deck h3 { margin: 0; font-family: var(--f-rotulo); font-weight: 600; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; color: var(--hueso); }
.material__deck p { margin: 4px 0 0; color: var(--niebla); font-size: 15.5px; line-height: 1.5; }
.material__peso { font-family: var(--f-cifra); font-size: 12.5px; color: var(--niebla); }
.material__deck .boton { white-space: nowrap; }
@media (max-width: 560px) {
  .material__deck { grid-template-columns: minmax(0, 1fr); }
  .material__deck .boton { justify-self: start; }
}

/* La relación de versiones de cada documento (21-oct-2026) */
.material__usos { display: block; margin-top: 2px; font-family: var(--f-cifra); font-size: 12.5px; color: var(--trigo); }
.material__usos:empty { display: none; }
.material__versiones { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--linea); display: grid; gap: 4px; }
.material__version { margin: 0; font-family: var(--f-cifra); font-size: 12.5px; letter-spacing: .06em; color: var(--hueso); }
.material__cambios { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--niebla); }
.material__versiones details { margin-top: 4px; }
.material__versiones summary { cursor: pointer; font-family: var(--f-cifra); font-size: 12.5px; color: var(--niebla); }
.material__versiones summary:hover { color: var(--hueso); }
.material__historial { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--linea); display: grid; gap: 8px; }

/* Por accesos (26-oct-2026): quién abrió, qué ve cada cliente y la clave de cada uno; solo con la clave del equipo */
.material__quien { margin: 0; font-size: 14.5px; color: var(--trigo); }
.material__quien[hidden], .material__claves[hidden] { display: none; }
.material__loven { margin: 0; font-family: var(--f-cifra); font-size: 12.5px; color: var(--trigo); }
.material__claves { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linea); display: grid; gap: 14px; max-width: 760px; }
.material__accesos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.material__acceso { display: grid; gap: 6px; justify-items: start; padding: 18px 0; border-bottom: 1px solid var(--linea); }
.material__acceso h3 { margin: 0; font-family: var(--f-rotulo); font-weight: 600; font-size: clamp(18px, 1.8vw, 21px); color: var(--hueso); }
.material__clave { margin: 0; font-family: var(--f-cifra); font-size: 17px; letter-spacing: .04em; color: var(--trigo); }
.material__acceso .boton--linea { background: transparent; cursor: pointer; }
.material__acceso .boton--linea:hover { background: rgba(238, 240, 234, 0.08); }
.material__mensaje { margin: 4px 0 0; padding: 10px 12px; border: 1px dashed var(--linea); font-family: var(--f-cifra); font-size: 13px; line-height: 1.5; color: var(--niebla); white-space: pre-line; overflow-wrap: anywhere; max-width: 100%; }

/* El registro de visitas comerciales, para el equipo (21-oct-2026) */
.material__equipo { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linea); display: grid; gap: 14px; max-width: 760px; }
.material__equipo[hidden], .material__registro[hidden], .material__puerta[hidden] { display: none; }
.material__registro { display: grid; gap: 40px; }
.visita { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 22px; border: 1px solid var(--linea); border-radius: 2px; }
.visita__titulo { grid-column: 1 / -1; margin: 0; font-family: var(--f-rotulo); font-weight: 600; font-size: clamp(20px, 2vw, 24px); color: var(--hueso); }
.visita__campo { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.visita__campo--ancho { grid-column: 1 / -1; }
.visita__campo > span, .visita__campo legend, .visitas__filtro span {
  font-family: var(--f-cifra); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--trigo); padding: 0;
}
.visita input:not([type="checkbox"]), .visita select, .visita textarea, .visitas__filtro select {
  width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid rgba(238, 240, 234, 0.4); border-radius: 2px;
  background: rgba(238, 240, 234, 0.06); color: var(--hueso); font-family: var(--f-texto); font-size: 16px; color-scheme: dark;
}
.visita textarea { resize: vertical; line-height: 1.5; }
.visita select option, .visitas__filtro select option { background: var(--noche); color: var(--hueso); }
.visita input:focus, .visita select:focus, .visita textarea:focus, .visitas__filtro select:focus { outline: 2px solid var(--trigo); outline-offset: 2px; border-color: var(--trigo); }
.visita__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 4px; }
.visita__doc { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--hueso); cursor: pointer; }
.visita__doc input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--trigo); }
.visita__campo--mal input, .visita__campo--mal select, .visita__campo--mal textarea, .visita__campo--mal .visita__docs { border-color: #f2a48f; }
.visita__campo--mal > span, .visita__campo--mal legend { color: #f2a48f; }
.visita__enviar { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: start; }

.visitas { display: grid; gap: 14px; }
.visitas__barra { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.visitas__cuenta { font-family: var(--f-cifra); font-size: 13px; font-weight: 400; color: var(--niebla); margin-left: 8px; }
.visitas__filtro { display: grid; gap: 6px; min-width: min(320px, 100%); }
.visitas__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.visitas__item { padding: 18px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 8px; }
.visitas__vacio { padding: 18px 0; color: var(--niebla); }
.visitas__cab { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; color: var(--hueso); font-size: 17px; }
.visitas__fecha { font-family: var(--f-cifra); font-size: 13px; color: var(--trigo); }
.visitas__tipo { font-family: var(--f-cifra); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--niebla); border: 1px solid var(--linea); padding: 1px 6px; border-radius: 2px; }
.visitas__docs { margin: 0; font-family: var(--f-cifra); font-size: 12.5px; color: var(--niebla); }
.visitas__datos { margin: 0; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 6px 16px; }
.visitas__datos dt { font-size: 14px; color: var(--niebla); }
.visitas__datos dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--hueso); white-space: pre-line; overflow-wrap: anywhere; }
.visitas__quien { margin: 0; font-size: 13px; color: var(--niebla); }
@media (max-width: 560px) {
  .visita { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .visita__docs { grid-template-columns: minmax(0, 1fr); }
  .visitas__datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .visitas__datos dd { margin-bottom: 8px; }
}