/* ---------------------------------------------------------------------------
   Hoja de estilo única. Blanco y negro, sin logotipo, sin adornos.
   Un solo tamaño de fuente base, dos pesos y una sola línea de 1 px como
   separador: todo lo que estructura la página es esa línea.
   --------------------------------------------------------------------------- */

:root {
  --tinta: #000;
  --papel: #fff;
  --tenue: #6b6b6b;
  --linea: #d9d9d9;
  --linea-fuerte: #000;
  --fondo-suave: #f6f6f6;
  --ancho: 1080px;
  --radio: 2px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
a:hover { background: var(--tinta); color: var(--papel); text-decoration: none; }

/* --- Estructura --------------------------------------------------------- */
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }

.barra {
  border-bottom: 1px solid var(--linea-fuerte);
  padding: 14px 0;
  margin-bottom: 28px;
}
.barra .envoltura {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.barra .marca { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: 13px; }
.barra .marca a { text-decoration: none; }
.barra .marca a:hover { background: none; color: var(--tinta); }
.barra nav { display: flex; gap: 18px; align-items: baseline; font-size: 13px; }
.barra nav .quien { color: var(--tenue); }

main { padding-bottom: 80px; }

/* --- Encabezados -------------------------------------------------------- */
h1 { font-size: 24px; line-height: 1.2; margin: 0 0 4px; font-weight: 700; letter-spacing: -.01em; }
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--linea-fuerte);
  font-weight: 700;
}
h3 { font-size: 15px; margin: 22px 0 8px; font-weight: 700; }
.sumario { color: var(--tenue); font-size: 13px; margin: 0 0 24px; }

.encabezado-pagina {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 8px;
}

/* --- Botones ------------------------------------------------------------ */
.boton {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--tinta);
  background: var(--tinta); color: var(--papel); text-decoration: none;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  border-radius: var(--radio); font-family: inherit; line-height: 1.3;
}
.boton:hover { background: var(--papel); color: var(--tinta); }
.boton.secundario { background: var(--papel); color: var(--tinta); }
.boton.secundario:hover { background: var(--tinta); color: var(--papel); }
.boton.grande { padding: 14px 26px; font-size: 14px; width: 100%; text-align: center; }
.boton.chico { padding: 6px 12px; font-size: 12px; }
.boton:disabled { opacity: .4; cursor: not-allowed; }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }

/* Botón de alta: hasta arriba del panel, ancho completo. */
.alta {
  display: block; width: 100%; text-align: center; padding: 18px;
  border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel);
  text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .02em;
  margin-bottom: 30px; border-radius: var(--radio);
}
.alta:hover { background: var(--papel); color: var(--tinta); }

/* --- Formularios -------------------------------------------------------- */
.rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
.rejilla.tres { grid-template-columns: repeat(3, 1fr); }
.campo.ancho { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--tinta);
}
.campo .ayuda { font-size: 12px; color: var(--tenue); }
.campo .error { font-size: 12px; font-weight: 700; }
.campo .error::before { content: "▸ "; }

input[type="text"], input[type="email"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="password"], input[type="tel"],
input[type="search"], select, textarea {
  width: 100%; padding: 9px 10px; font: inherit; font-size: 14px;
  color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: var(--radio);
}
input:focus, select:focus, textarea:focus, .boton:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta);
}
textarea { resize: vertical; min-height: 70px; }
input[type="file"] { font-size: 13px; padding: 8px 0; width: 100%; }

.casilla { flex-direction: row; align-items: center; gap: 9px; }
.casilla > label { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }
.casilla input[type="checkbox"] { width: 17px; height: 17px; accent-color: #000; margin: 0; }

/* Escala 1-10 del usuario */
.deslizador { width: 100%; accent-color: #000; height: 26px; }
.escala {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--tinta); padding: 16px; border-radius: var(--radio);
}
.escala .numero { font-size: 40px; font-weight: 700; line-height: 1; min-width: 68px; }
.escala .numero span { font-size: 15px; color: var(--tenue); font-weight: 400; }
.escala .cuerpo { flex: 1; }
.escala .extremos {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--tenue); text-transform: uppercase; letter-spacing: .08em;
}
.escala .glosa { font-size: 13px; margin-top: 6px; min-height: 20px; }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.foto-campo { border: 1px solid var(--linea); padding: 14px; border-radius: var(--radio); }
.foto-campo.lista { border-color: var(--tinta); }
.foto-campo .numero {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.foto-campo .ayuda { font-size: 12px; color: var(--tenue); margin: 4px 0 10px; min-height: 32px; }
.previa {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: none;
  border: 1px solid var(--linea); margin-top: 10px; background: var(--fondo-suave);
}
.previa.visible { display: block; }

/* Ubicación del dispositivo */
.ubicacion-auto {
  border: 1px solid var(--linea); padding: 12px 14px; font-size: 13px;
  border-radius: var(--radio); display: flex; gap: 10px; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
}
.ubicacion-auto .estado { color: var(--tenue); }
.ubicacion-auto.ok { border-color: var(--tinta); }
.ubicacion-auto.ok .estado { color: var(--tinta); font-weight: 700; }

/* --- Tablas ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--linea-fuerte); padding: 8px 10px 8px 0; white-space: nowrap;
}
tbody td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
tbody tr:hover td { background: var(--fondo-suave); }
td.numerica, th.numerica { text-align: right; padding-right: 0; padding-left: 16px; }
.tabla-envoltura { overflow-x: auto; }

/* Rejilla de datos en la vista de detalle */
.datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 26px; }
.datos > div { padding: 9px 0; border-bottom: 1px solid var(--linea); }
.datos dt {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tenue); margin-bottom: 2px;
}
.datos dd { margin: 0; }
.datos .ancho { grid-column: 1 / -1; }
.parrafo { white-space: pre-wrap; }

/* --- Marcas y avisos ---------------------------------------------------- */
.etiqueta {
  display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--tinta); padding: 2px 7px; border-radius: var(--radio); font-weight: 700;
}
.etiqueta.solida { background: var(--tinta); color: var(--papel); }
.etiqueta.tenue { border-color: var(--linea); color: var(--tenue); font-weight: 400; }

.nota {
  border: 1px solid var(--tinta); padding: 12px 14px; margin: 16px 0;
  font-size: 13px; border-radius: var(--radio);
}
.nota.tenue { border-color: var(--linea); color: var(--tenue); }

.mensajes { margin-bottom: 22px; padding: 0; list-style: none; }
.mensajes li {
  border: 1px solid var(--tinta); padding: 11px 14px; margin-bottom: 8px;
  font-size: 14px; border-radius: var(--radio);
}
.mensajes li.error { border-width: 2px; font-weight: 700; }

.vacio {
  border: 1px dashed var(--linea); padding: 46px 20px; text-align: center;
  color: var(--tenue); font-size: 14px; border-radius: var(--radio);
}

/* --- Calificaciones (panel del evaluador) ------------------------------- */
.marcadores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.marcador { border: 1px solid var(--linea); padding: 14px; border-radius: var(--radio); }
.marcador.destacado { border-color: var(--tinta); border-width: 2px; }
.marcador .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue);
}
.marcador .cifra { font-size: 34px; font-weight: 700; line-height: 1.1; }
.marcador .cifra span { font-size: 14px; color: var(--tenue); font-weight: 400; }
.marcador .pie { font-size: 12px; color: var(--tenue); }
.marcador .cifra .pendiente { font-size: 15px; color: var(--tenue); font-weight: 400; }

.hallazgos { list-style: none; padding: 0; margin: 0; }
.hallazgos li { border-bottom: 1px solid var(--linea); padding: 11px 0 11px 20px; position: relative; }
.hallazgos li::before { content: "▲"; position: absolute; left: 0; top: 11px; font-size: 10px; }
.hallazgos li.leve { color: var(--tenue); }
.hallazgos li.leve::before { content: "○"; }
.hallazgos .titulo { font-weight: 700; display: block; }
.hallazgos .detalle { font-size: 13px; }

.opciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.opciones li label {
  display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linea);
  padding: 12px 14px; cursor: pointer; font-size: 14px; border-radius: var(--radio);
}
.opciones li label:hover { border-color: var(--tinta); }
.opciones input[type="radio"] { accent-color: #000; margin-top: 3px; }

.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.galeria figure { margin: 0; }
.galeria img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--linea); background: var(--fondo-suave); display: block;
}
.galeria figcaption { font-size: 12px; color: var(--tenue); margin-top: 6px; }
.galeria figcaption b { color: var(--tinta); }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; align-items: center; }
.filtros a {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding: 6px 12px;
  border: 1px solid var(--linea); text-decoration: none; border-radius: var(--radio);
}
.filtros a.activo { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.filtros form { margin-left: auto; display: flex; gap: 8px; }
.filtros input[type="search"] { width: 240px; }

.paginacion {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin-top: 28px; font-size: 13px; color: var(--tenue);
}

/* --- Acceso ------------------------------------------------------------- */
.acceso { max-width: 360px; margin: 90px auto; padding: 0 20px; }
.acceso h1 { font-size: 15px; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 26px; }
.acceso .campo { margin-bottom: 16px; }
.acceso .pie { margin-top: 22px; font-size: 12px; color: var(--tenue); }

/* --- Impresión y pantallas chicas --------------------------------------- */
@media (max-width: 860px) {
  .rejilla, .rejilla.tres, .datos, .fotos, .galeria, .marcadores { grid-template-columns: 1fr; }
  .encabezado-pagina { flex-direction: column; }
  .filtros form { margin-left: 0; width: 100%; }
  .filtros input[type="search"] { width: 100%; }
  h1 { font-size: 20px; }

  /* Una tabla de ocho columnas en un teléfono obliga a arrastrar de lado para
     leer una sola fila. Cada fila pasa a ser una tarjeta con sus etiquetas,
     que vienen de data-etiqueta en el propio <td>. */
  .apilable-envoltura { overflow-x: visible; }
  table.apilable, table.apilable tbody, table.apilable tr, table.apilable td { display: block; }
  table.apilable thead { display: none; }
  table.apilable tr {
    border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 12px 14px; margin-bottom: 12px;
  }
  table.apilable tr:hover td { background: none; }
  table.apilable td {
    border: 0; padding: 3px 0; text-align: left;
    display: flex; gap: 14px; justify-content: space-between; align-items: baseline;
  }
  table.apilable td::before {
    content: attr(data-etiqueta);
    flex: 0 0 8.5em;
    font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--tenue); font-weight: 700;
  }
  table.apilable td > * { text-align: right; }
  /* La primera celda es el encabezado de la tarjeta: sin etiqueta y a lo ancho. */
  table.apilable td.titular {
    display: block; padding: 0 0 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--linea);
  }
  table.apilable td.titular::before { display: none; }
  table.apilable td.titular > * { text-align: left; }
  table.apilable td.numerica { padding-left: 0; }
  table.apilable td.acciones-celda { justify-content: flex-end; padding-top: 10px; }
  table.apilable td.acciones-celda::before { display: none; }
  table.apilable td.acciones-celda .boton { width: 100%; text-align: center; }
}

/* El folio identifica el reporte: partirlo en tres líneas lo hace ilegible. */
.folio { white-space: nowrap; }

@media print {
  .barra, .acciones, .alta, .filtros, .paginacion, form { display: none; }
  body { font-size: 11px; }
}