/* Portal del dueño: lo que no está en /compartido/base.css. Sin estilos en línea, sin fuentes ni imágenes de otros sitios. */

/* Pantallas de entrada y de solicitud ---------------------------------------------------------------------------------------- */

.portada { margin-bottom: var(--e5); }
.portada h1 { font-size: 28px; margin-bottom: var(--e2); }
.portada p { margin: 0; }
.sin-menu .auth-cabeza-movil { justify-self: center; width: 100%; max-width: 40rem; }
.app:not(.sin-menu) .auth-cabeza-movil { display: none; }

.motivo { margin: var(--e4) 0; padding: var(--e3) var(--e4); border-left: 4px solid var(--mal); background: var(--mal-suave); border-radius: 0 var(--r-campo) var(--r-campo) 0; }
.motivo blockquote { margin: 0; overflow-wrap: anywhere; }
#pend-etiqueta { color: var(--aviso-texto); }
#pend-etiqueta.mal { color: var(--mal-texto); }
#v-pendiente h1 { margin-bottom: var(--e2); }
.revision { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); }
.revision .nota { margin: 0; flex: 1 1 14rem; }

.pasos { list-style: none; margin: 0 0 var(--e4); padding: 0; display: grid; gap: var(--e4); }
.pasos li { display: flex; gap: var(--e3); align-items: flex-start; color: var(--texto-2); }
.pasos li strong { color: var(--texto); }
.paso-marca { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--borde-fuerte); background: var(--tarjeta); position: relative; }
.pasos .hecho .paso-marca { background: var(--ok); border-color: var(--ok); }
.pasos .hecho .paso-marca::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid var(--acento-sobre); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.pasos .actual .paso-marca { border-color: var(--aviso); box-shadow: 0 0 0 4px var(--aviso-suave); background: var(--aviso); }

.avisos { display: grid; gap: var(--e2); }
.sin-menu .superior, .sin-menu .lateral, .sin-menu .barra-inferior { display: none; }

/* Mi negocio ----------------------------------------------------------------------------------------------------------------- */

.negocio-grid { display: grid; gap: var(--e5); align-items: start; }
.negocio-grid > * { min-width: 0; }
.columna-datos { display: grid; gap: var(--e5); }
.negocio { display: grid; gap: var(--e5); }
.negocio + .negocio { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde); }
.cuadro-frescura { margin: 0; }
.nota.cuadro-frescura { margin-top: calc(var(--e2) * -1); }
/* Con un solo negocio las cifras ocupan todo el ancho y la licencia queda a un lado de los equipos y los pedidos. */
@media (min-width: 1180px) {
  .negocio-grid { grid-template-columns: minmax(0, 1fr) 22rem; }
  .negocio-grid:has(.columna-datos:not(.varios)) .columna-datos, .negocio-grid:has(.columna-datos:not(.varios)) .negocio { display: contents; }
  .columna-datos:not(.varios) dl.cifras { grid-column: 1 / -1; grid-row: 1; }
  .columna-datos:not(.varios) .cuadro-frescura { grid-column: 1 / -1; grid-row: 2; margin: calc(var(--e3) * -1) 0 0; }
  .columna-datos:not(.varios) .tarjeta-equipos { grid-column: 1; grid-row: 3; }
  .columna-datos:not(.varios) .tarjeta-pedidos { grid-column: 1 / -1; grid-row: 4; }
  .columna-licencia { grid-column: 2; grid-row: 3; align-self: start; position: sticky; top: calc(var(--alto-superior) + var(--e5)); }
  .columna-datos.varios { grid-column: 1; }
}
dl.cifras .cifra dd { white-space: nowrap; }

/* La licencia: la clave en grande, copiarla y los lugares que se usan */
.ticket { display: grid; gap: var(--e3); align-content: start; }
.ticket .tarjeta-cabeza { margin-bottom: 0; }
.clave {
  margin: 0; padding: var(--e4) var(--e3); border-radius: var(--r-campo); background: var(--hundido); border: 1.5px dashed var(--borde-fuerte);
  text-align: center; font-family: var(--mono); font-weight: 700; font-size: clamp(.95rem, 4.6vw, 1.5rem); letter-spacing: .01em;
  overflow-wrap: break-word; user-select: all; -webkit-user-select: all;
}
.ticket-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); }
.ticket-copiar .boton { width: auto; min-width: 140px; }
.copiado { margin: 0; font-weight: 600; color: var(--ok-texto); }
.copiado.mal { color: var(--aviso-texto); }
.copiado:empty { display: none; }
.como { margin: 0; padding: var(--e3) var(--e4); border-radius: var(--r-campo); background: var(--acento-suave); color: var(--acento-texto); font-weight: 500; }
.ticket-pie { display: grid; gap: var(--e2); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.lugares { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.pips { display: inline-flex; gap: 6px; }
.pip { width: 22px; height: 10px; border-radius: 6px; background: var(--borde-fuerte); opacity: .55; }
.pip.lleno { background: var(--acento); opacity: 1; }

/* Equipos: una fila por equipo con su estado */
.equipos { list-style: none; margin: 0; padding: 0; display: grid; container-type: inline-size; }
.equipo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--e3) var(--e4); padding: var(--e4) 0; border-top: 1px solid var(--borde); }
.equipo:first-child { border-top: 0; padding-top: 0; }
.equipo:last-child { padding-bottom: 0; }
.equipo.apagado .eq-id strong { color: var(--texto-2); }
.eq-id { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.eq-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--r-campo); background: var(--hundido); color: var(--texto-2); }
.eq-id strong { display: block; overflow-wrap: anywhere; }
.eq-estado { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e3); }
.eq-desde { color: var(--texto-2); }
.eq-detalle { margin: 0; color: var(--texto-2); overflow-wrap: anywhere; }
.eq-acciones { min-width: 0; }
.equipo:has(.confirmar) .eq-acciones { grid-column: 1 / -1; }
.confirmar { padding: var(--e4); border: 1.5px solid var(--mal-texto); border-radius: var(--r-campo); background: var(--mal-suave); display: grid; gap: var(--e3); }
.confirmar p { margin: 0; }
.confirmar-botones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.confirmar-botones > button { flex: 1 1 10rem; }
@container (max-width: 600px) {
  .equipo { grid-template-columns: minmax(0, 1fr); }
  .eq-acciones .secundario { width: 100%; }
}

/* Pedidos recientes: la tabla va pegada a los bordes de su tarjeta */
.tarjeta.sin-relleno .tarjeta-cabeza.con-relleno { padding: var(--e5) var(--e5) 0; }
.tarjeta.sin-relleno > .tabla-caja { margin: 0; }
.ver-mas { margin: var(--e3) var(--e5) var(--e5); }
.vacio-chico { margin: var(--e2); }

/* Reportes ------------------------------------------------------------------------------------------------------------------- */

.controles { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e4); }
.controles > * { min-width: 0; }
.controles .campo { margin: 0; min-width: 14rem; }
.rango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e3); }
.rango .campo { min-width: 10rem; }
.rango input[type="date"] { min-width: 0; max-width: 100%; }
.nota-cobertura { margin: 0; }
.error:empty { display: none; }

.reporte { display: grid; gap: var(--e5); }
.reporte > * { min-width: 0; }
.reporte .tarjeta-cabeza h2 { font-size: 20px; }
.nota-variacion { margin-top: calc(var(--e3) * -1); }
dl.cifras .cifra .pastilla.variacion { gap: 4px; }
.ver-tabla { margin-top: var(--e4); }
.ver-tabla summary { cursor: pointer; font-weight: 600; color: var(--acento-texto); min-height: 32px; display: flex; align-items: center; }
.ver-tabla .tabla-caja { margin-top: var(--e3); border: 1px solid var(--borde); border-radius: var(--r-campo); max-height: 22rem; overflow-y: auto; }
@media (min-width: 1280px) {
  .reporte { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .reporte > dl, .reporte > p, .reporte > .vacio-chico, .reporte > .ancha { grid-column: 1 / -1; }
}

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.barras-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e3); align-items: baseline; }
.barras-nombre { font-weight: 600; overflow-wrap: anywhere; }
.barras-valor { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.barras-fila .mini-barra { grid-column: 1 / -1; width: 100%; height: 8px; margin: 4px 0; border-radius: 4px; }
.barras-meta { grid-column: 1 / -1; color: var(--texto-2); }
.mini-fondo { fill: var(--hundido); }
.mini-valor { fill: var(--acento); }
td .mini-barra { display: block; width: 100%; min-width: 6rem; height: 8px; border-radius: 4px; }

/* Pedidos en línea ------------------------------------------------------------------------------------------------------------ */

.pedidos-en-linea { display: grid; gap: var(--e5); }
.enlace-carta { margin: 0 0 var(--e4); padding: var(--e4); border-radius: var(--r-campo); background: var(--hundido); border: 1.5px dashed var(--borde-fuerte); font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.enlace-tarjeta .ticket-copiar .boton { width: auto; min-width: 120px; }
.enlace-tarjeta .ticket-copiar { margin-bottom: var(--e4); }
.qr-caja { display: grid; justify-items: center; gap: var(--e2); margin: var(--e2) 0 var(--e4); }
.qr { display: block; width: min(100%, 16rem); height: auto; border: 1px solid var(--borde); border-radius: var(--r-campo); background: #fff; }
.qr-texto { margin: 0; text-align: center; }
.solo-impresion { display: none; }

/* Novedades de las versiones ------------------------------------------------------------------------------------------------- */

.novedades { display: grid; gap: var(--e5); }
.nov-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e1) var(--e4); margin-bottom: var(--e3); }
.nov-cabeza h2, .nov-cabeza .nota { margin: 0; }
.nov-version h3 { margin: var(--e4) 0 var(--e1); font-size: 14px; line-height: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--acento-texto); }
.nov-version ul { margin: 0; padding-left: 1.25rem; }
.nov-version li { margin: var(--e1) 0; overflow-wrap: anywhere; }
.nov-resumen { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.nov-donde, .nov-nota { margin: var(--e4) 0 0; overflow-wrap: anywhere; }
.nov-nota { white-space: pre-wrap; }

/* Mi cuenta -------------------------------------------------------------------------------------------------------------------- */

#v-cuenta .tarjeta h2 { margin-bottom: var(--e3); }
#v-cuenta .formulario h2 { margin-bottom: 0; }

/* Mi menú QR --------------------------------------------------------------------------------------------------------------------- */

.menuqr { display: grid; gap: var(--e5); }
.menuqr h3 { margin: var(--e5) 0 var(--e2); }
.menuqr .ticket-copiar + .ticket-copiar { margin-top: var(--e1); }
.nombre-linea { display: flex; align-items: stretch; border: 1.5px solid var(--borde-fuerte); border-radius: var(--r-campo); background: var(--tarjeta); overflow: hidden; box-shadow: var(--sombra-campo); }
.nombre-linea:focus-within { outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--foco); }
.nombre-prefijo { display: flex; align-items: center; max-width: 60%; padding: 0 var(--e3); background: var(--hundido); color: var(--texto-2); font: 14px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo .nombre-linea input { min-width: 0; border: 0; border-radius: 0; outline: 0; box-shadow: none; }
.nombre-estado { min-height: 1.4em; margin: 6px 0 0; font-weight: 600; color: var(--texto-2); }
.nombre-estado.bien { color: var(--ok-texto); }
.nombre-estado.mal { color: var(--mal-texto); }
.modos { margin: 0 0 var(--e4); padding: 0; border: 0; display: grid; gap: var(--e3); }
.modos legend { padding: 0; margin: 0 0 var(--e3); font: 700 22px/30px var(--letra); }
.opcion-modo { display: flex; align-items: flex-start; gap: var(--e3); padding: var(--e4); border: 1.5px solid var(--borde); border-radius: var(--r-campo); background: var(--tarjeta); cursor: pointer; }
.opcion-modo:hover { border-color: var(--texto-2); }
.opcion-modo.elegida { border-color: var(--acento); background: var(--acento-suave); }
.opcion-modo input { margin: 2px 0 0; }
.opcion-texto { display: grid; gap: 2px; min-width: 0; }
.panel-modo { display: grid; gap: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.subir { display: grid; gap: var(--e2); justify-items: start; }
.subir input:focus-visible + label { outline: 3px solid var(--foco); outline-offset: 2px; }
.archivos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.archivo { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e1) var(--e4); align-items: center; padding: var(--e3); border: 1px solid var(--borde); border-radius: var(--r-campo); background: var(--tarjeta); }
.archivo-vista, .archivo-pdf { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--hundido); border: 1px solid var(--borde); }
.archivo-pdf { display: grid; place-items: center; font: 800 16px var(--letra); color: var(--acento-texto); }
.archivo-datos { display: grid; gap: 2px; min-width: 0; }
.archivo-datos strong { overflow-wrap: anywhere; }
.archivo-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--e2); }
.archivo-confirmar { display: inline-flex; flex-wrap: wrap; gap: var(--e2); }
.uso progress { width: 100%; height: 10px; }
.mqr-hoja { display: none; }
@media (min-width: 720px) {
  .archivo { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .archivo-acciones { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 719px) {
  .nombre-linea { flex-direction: column; }
  .nombre-prefijo { max-width: none; padding: var(--e2) var(--e3); border-bottom: 1px solid var(--borde); }
}

/* Impresión: solo el código QR --------------------------------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .lateral, .superior, .barra-inferior, .avisos, #v-pedidos .encabezado, #ped-contenido > :not(#qr-impresion), #qr-impresion .ticket-copiar,
  #qr-impresion .tarjeta-cabeza, #qr-impresion h2, #qr-impresion .nota:not(.qr-texto):not(.solo-impresion) { display: none !important; }
  .app, .columna { display: block; }
  .solo-impresion { display: block; font-size: 1.6rem; font-weight: 700; text-align: center; color: #000; }
  #qr-impresion { border: 0; box-shadow: none; background: #fff; }
  #qr-impresion .enlace-carta { background: #fff; border: 0; text-align: center; color: #000; }
  .qr { width: 14cm; border: 0; }
  #v-menuqr > :not(#mqr-contenido), #mqr-contenido > :not(#mqr-hoja) { display: none !important; }
  #mqr-hoja { display: grid !important; justify-items: center; gap: 14px; text-align: center; color: #000; }
  #mqr-hoja .mqr-hoja-negocio { font-size: 2rem; font-weight: 700; }
  #mqr-hoja .mqr-hoja-texto { font-size: 1.4rem; font-weight: 600; }
  #mqr-hoja .mqr-hoja-url { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; overflow-wrap: anywhere; }
  #mqr-hoja .qr { width: 14cm; border: 0; }
}

.paso-accion { display: block; margin-top: var(--e2); }