/*
  Lo propio de las cuentas de cobro, encima de la hoja del Portal.

  Aquí no se redefine ni un color: los que hay salen del logotipo y ya están
  en estilo.css. Esto es solo lo que esta herramienta necesita y las otras no:
  la tabla de pólizas, el recuadro de la firma y los avisos de cada fila.

  QUIEN USA ESTO NO ESTÁ EN UNA OFICINA. Son brokers, a veces desde el
  celular, el día 3 del mes, con prisa. Por eso los campos son grandes, el
  estado de cada póliza se ve al lado de la póliza, y el total está siempre
  a la vista.
*/

/* ── formulario ─────────────────────────────────────────────────────────── */
.campo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-2);
  margin-bottom: 5px;
}
.obligatorio { color: var(--rojo); }

input, select, textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgba(255, 75, 16, .14);
}
input:disabled { background: var(--linea-2); color: var(--tinta-3); }
input.malo { border-color: var(--malo); background: var(--malo-fondo); }
input.bien { border-color: var(--ok); }

.ayuda { font-size: 12px; color: var(--tinta-3); margin: 5px 0 0; }
.ayuda.malo { color: var(--malo); }
.ayuda.bien { color: var(--ok); }

.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.dos .ancho { grid-column: 1 / -1; }
.rejilla.columnas { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.rejilla.columnas aside { display: grid; gap: 14px; }

@media (max-width: 900px) {
  .rejilla.columnas, .rejilla.dos { grid-template-columns: minmax(0, 1fr); }
}

/* ── la fecha, que no se elige ──────────────────────────────────────────── */
.fecha-hoy {
  background: var(--durazno-suave);
  border-radius: var(--radio);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.fecha-hoy strong { font-size: 17px; display: block; margin-top: 2px; }
.etiqueta-fecha {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--naranja);
}

.aviso.sin-iva {
  background: var(--aviso-fondo);
  color: var(--aviso);
  border: 1px solid currentColor;
}

/* ── la tabla de pólizas ────────────────────────────────────────────────── */
.tabla-polizas { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-polizas th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
  padding: 10px 10px;
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabla-polizas td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea-2);
  vertical-align: top;
}
.tabla-polizas tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--linea);
  padding-top: 12px;
  font-size: 15px;
}
.tabla-polizas .derecha, .derecha { text-align: right; }
.tabla-polizas tr.anulada { opacity: .55; }
.tabla-polizas tr.anulada b { text-decoration: line-through; }

.tabla-polizas .valor, .tabla-polizas .comision { text-align: right; }

.estado { font-size: 11.5px; margin: 5px 0 0; min-height: 14px; color: var(--tinta-3); }
.estado.malo { color: var(--malo); font-weight: 600; }
.estado.bien { color: var(--ok); }
.estado.ojo  { color: var(--aviso); }

.quitar {
  border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--tinta-3);
  padding: 6px 4px;
}
.quitar:hover { color: var(--malo); }

/* ── la firma ───────────────────────────────────────────────────────────── */
.firma-caja {
  position: relative;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  overflow: hidden;
}
#lienzo {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;      /* en el celular se firma, no se hace scroll */
  cursor: crosshair;
}
.firma-linea {
  position: absolute;
  left: 8%; right: 8%; bottom: 34px;
  border-bottom: 1px solid var(--linea);
  pointer-events: none;
}
.firma-guardada {
  max-width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
}

/* ── anular: la advertencia va delante del botón ────────────────────────── */
.anular summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta-2);
  padding: 8px 0 0;
  list-style: none;
}
.anular summary::-webkit-details-marker { display: none; }
.anular summary::before { content: "▸ "; color: var(--tinta-3); }
.anular[open] summary::before { content: "▾ "; }
.anular summary:hover { color: var(--malo); }
.anular ul { font-size: 12.5px; }

/* ── EN EL CELULAR ──────────────────────────────────────────────────────────
   Aquí no se está en una oficina: un broker en la calle, el día 3, con una
   mano. Tres cosas cambian y ninguna es cosmética.

   1. LOS CAMPOS A 16 px. Por debajo de eso, Safari en iPhone hace zoom solo
      al tocar un campo y deja la página torcida; el que escribe tiene que
      pellizcar para volver. Es la causa número uno de que un formulario se
      sienta roto en el móvil.
   2. LA TABLA DEJA DE SER TABLA. Cuatro columnas en 375 px no caben: o se
      leen con lupa o hay que arrastrar de lado. Cada póliza pasa a ser una
      ficha con su etiqueta encima, que es como se lee de verdad con el
      pulgar.
   3. LOS BOTONES, ANCHOS. Un botón de 90 px se falla con el dedo.
--------------------------------------------------------------------------- */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; padding: 11px 12px; }

  .hoja { padding: 16px 14px 48px; }
  .titulo { font-size: 19px; }

  /* La tabla, convertida en fichas */
  .marco { border: none; background: none; overflow: visible; }
  .tabla-polizas thead { display: none; }
  .tabla-polizas, .tabla-polizas tbody, .tabla-polizas tfoot,
  .tabla-polizas tr, .tabla-polizas td { display: block; width: 100%; }

  .tabla-polizas tbody tr {
    position: relative;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 12px 12px 6px;
    margin-bottom: 10px;
  }
  .tabla-polizas tbody td { border: none; padding: 0 0 10px; }
  .tabla-polizas tbody td::before {
    content: attr(data-nombre);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-3);
    margin-bottom: 4px;
  }
  .tabla-polizas .comision { text-align: left; }

  /* La × de quitar, arriba a la derecha de la ficha */
  .tabla-polizas tbody td:last-child { position: absolute; top: 4px; right: 6px;
                                       width: auto; padding: 0; }
  .tabla-polizas tbody td:last-child::before { content: none; }
  .quitar { font-size: 26px; padding: 4px 8px; }

  /* El total, siempre visible y grande */
  .tabla-polizas tfoot tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: var(--durazno-suave);
    border-radius: var(--radio);
    padding: 12px 14px;
    border: none;
  }
  .tabla-polizas tfoot td { width: auto; border: none; padding: 0;
                            font-size: 17px; }

  #anadir { width: 100%; padding: 12px; font-size: 15px; }
  .acciones .boton { flex: 1 1 auto; justify-content: center; }
  #lienzo { height: 150px; }

  /* El menú de arriba, en una línea que se pueda tocar */
  .menu { gap: 2px; }
  .menu a { padding: 7px 9px; }
  .menu .quien { display: none; }   /* su nombre ya está en la pantalla */
}

/* ── varios ─────────────────────────────────────────────────────────────── */
.boton.grande {
  width: 100%;
  justify-content: center;
  padding: 13px;
  font-size: 15px;
  margin-top: 16px;
}
.avisos-reglas p { font-size: 13px; color: var(--tinta-2); margin: 8px 0 0; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }