/* ---------------------------------------------------------------------------
   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: center; justify-content: space-between; gap: 16px;
}
.barra .marca {
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: 13px; text-decoration: none;
}
.barra .marca:hover { background: none; color: var(--tinta); }

/* Un único desplegable, con <details>: sin librerías y funciona sin JS. */
.menu { position: relative; }
.menu summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 7px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: 13px; list-style: none; user-select: none; background: var(--papel);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { border-color: var(--tinta); }
.menu[open] summary { border-color: var(--tinta); }
.menu summary .quien { font-weight: 700; }
.menu summary .papel {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1px 6px; color: var(--tenue);
}
.menu summary .flecha {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--tinta);
}
.menu[open] summary .flecha { transform: rotate(180deg); }
.menu nav {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 230px; background: var(--papel);
  border: 1px solid var(--tinta); border-radius: var(--radio);
  display: flex; flex-direction: column; padding: 5px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.menu nav a, .menu nav button {
  display: block; width: 100%; text-align: left; padding: 9px 11px;
  font: inherit; font-size: 13px; color: var(--tinta); background: none;
  border: 0; text-decoration: none; cursor: pointer; border-radius: var(--radio);
}
.menu nav a:hover, .menu nav button:hover { background: var(--tinta); color: var(--papel); }
.menu nav hr { border: 0; border-top: 1px solid var(--linea); margin: 5px 0; }
.menu nav form { margin: 0; }

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: contain; 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; }
/* `cover` recortaba las fotos: con una foto vertical de teléfono se perdían
   la parte de arriba y la de abajo, que es justo donde suele estar el daño.
   `contain` enseña la fotografía entera; el hueco lo rellena el fondo. */
.galeria img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  border: 1px solid var(--linea); background: var(--fondo-suave); display: block;
}
.galeria a { display: block; text-decoration: none; }
.galeria a:hover img { border-color: var(--tinta); }
.galeria a:hover { background: none; }
.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; }
}


/* --- Buscador ------------------------------------------------------------ */
.buscador { display: flex; gap: 8px; align-items: stretch; }
.buscador input[type="search"] { min-width: 300px; }
@media (max-width: 860px) {
  .buscador { width: 100%; }
  .buscador input[type="search"] { min-width: 0; flex: 1; }
}

/* --- Mapa ---------------------------------------------------------------- */
.mapa {
  border: 1px solid var(--linea); border-radius: var(--radio);
  overflow: hidden; margin-top: 10px; background: var(--fondo-suave);
}
.mapa iframe { display: block; width: 100%; height: 300px; border: 0; }
.mapa .pie {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 9px 12px; font-size: 12px; border-top: 1px solid var(--linea);
}
.mapa .pie .direccion { font-weight: 700; }
.mapa .pie .coords { color: var(--tenue); font-variant-numeric: tabular-nums; }

/* --- Etiquetas de daño --------------------------------------------------- */
.etiquetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px 14px; list-style: none; padding: 0; margin: 0;
}
.etiquetas li label {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 14px; cursor: pointer;
}
.etiquetas input[type="checkbox"] { width: 16px; height: 16px; accent-color: #000; margin: 0; }

.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.ficha {
  display: inline-block; font-size: 12px; padding: 3px 9px;
  border: 1px solid var(--linea); border-radius: 999px; white-space: nowrap;
}
.ficha.marcada { border-color: var(--tinta); background: var(--tinta); color: var(--papel); }
.ficha.discrepa { border-color: var(--tinta); border-width: 2px; font-weight: 700; }

/* --- Filas de tabla que se abren al pinchar ------------------------------ */
tr.pinchable { cursor: pointer; }
tr.pinchable:hover td { background: var(--fondo-suave); }
tr.pinchable:focus-within td { background: var(--fondo-suave); }

/* --- Comparativa ajustador / IA ------------------------------------------ */
.comparativa { width: 100%; border-collapse: collapse; font-size: 14px; }
.comparativa th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--linea-fuerte); padding: 8px 12px 8px 0;
}
.comparativa td { padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.comparativa td:first-child {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--tenue); white-space: nowrap; width: 1%;
}
.comparativa tr.discrepa td { background: var(--fondo-suave); }
.comparativa tr.discrepa td:first-child::after { content: " ▲"; }

@media (max-width: 860px) {
  .barra .envoltura { gap: 10px; }
  .menu summary .papel { display: none; }
  .menu nav { min-width: 210px; }
  .mapa iframe { height: 240px; }
  .comparativa, .comparativa tbody, .comparativa tr, .comparativa td { display: block; }
  .comparativa thead { display: none; }
  .comparativa tr { border-bottom: 1px solid var(--linea); padding: 8px 0; }
  .comparativa td { border: 0; padding: 2px 0; }
  .comparativa td:first-child { width: auto; }
}