/* Capa pantallas del barrido de vistas: reglas por pantalla de lead, leads, ruteo, login, crear y error. Dueños: 05-02 a 05-05, en serie. */
@layer pantallas{
  /* Ficha del lead (05-02): dos columnas desde 720 px, una debajo. */
  .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-5);margin-bottom:var(--esp-5)}
  .cols > *{min-width:0;margin-bottom:0}
  .datos{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--esp-4);margin:0}
  .datos dt{color:var(--tx-2);font-size:var(--t-base)}
  .datos dd{margin:0 0 var(--esp-3);min-width:0;overflow-wrap:anywhere}
  .historial{list-style:none;padding:0;margin:0}
  .historial li{padding:var(--esp-3) 0;border-bottom:1px solid var(--borde-suave);overflow-wrap:anywhere}
  .historial li:first-child{padding-top:0}
  .historial li:last-child{border-bottom:0;padding-bottom:0}
  .historial li > div{margin-top:var(--esp-1)}
  .cuando{color:var(--tx-2);font-size:var(--t-chico);margin-right:var(--esp-2)}
  @media (min-width: 720px){
    .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
    .datos{grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:var(--esp-2) var(--esp-4)}
    .datos dd{margin:0}
  }

  /* Ruteo a RTC (05-04). Nueva regla: un campo por línea y el botón a todo el ancho en celular;
     tres columnas desde 720 px y todo en una línea desde 1100 px (escritorio). */
  .ruteo-nueva{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-3);align-items:center}
  .ruteo-nueva > :is(input,select,button){width:100%;min-width:0;max-width:100%}
  @media (min-width: 720px){
    .ruteo-nueva{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (min-width: 1100px){
    /* Marca, Provincia, Ciudad, RTC y Teléfono: Ciudad más ancha para que su ayuda entre entera a 1280 px. */
    .ruteo-nueva{grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.45fr) minmax(0,1fr) minmax(0,.95fr) auto}
    .ruteo-nueva > button{width:auto}
  }
  /* Tabla de reglas: el formulario de cada fila en una sola línea, con el select, el teléfono y
     la casilla debajo de RTC, Teléfono y Activa del thead. Ancho mínimo para que en celular la
     tabla deslice (Marca fija, de .tabla-desliza) en lugar de apretar las celdas. */
  .tabla-ruteo{--col-rtc:15rem;--col-tel:10rem;--col-activa:7rem;--col-guardar:7rem;min-width:60rem}
  .tabla-ruteo th:nth-child(4){width:var(--col-rtc)}
  .tabla-ruteo th:nth-child(5){width:var(--col-tel)}
  .tabla-ruteo th:nth-child(6){width:var(--col-activa)}
  .tabla-ruteo th:nth-child(7){width:var(--col-guardar)}
  .tabla-ruteo td{vertical-align:middle}
  .tabla-ruteo form.fila{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--esp-2)}
  .tabla-ruteo form.fila > select{flex:0 0 calc(var(--col-rtc) - var(--esp-2));min-width:0}
  .tabla-ruteo form.fila > input{flex:0 0 calc(var(--col-tel) - var(--esp-2));min-width:0}
  .tabla-ruteo form.fila > .check{flex:0 0 calc(var(--col-activa) - var(--esp-2))}
  .tabla-ruteo form.fila > button{flex:none}
  /* Zonas de Pecuario (07-03): misma tabla que desliza (Provincia fija, de .tabla-desliza); el
     ancho mínimo hace que a 390 px deslice en lugar de apretar el select y el botón. El
     formulario de la celda Zona, en una línea. */
  .tabla-zonas{min-width:36rem}
  .tabla-zonas td{vertical-align:middle}
  .tabla-zonas form.fila{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--esp-2)}
  .tabla-zonas form.fila > select{flex:0 0 10rem;min-width:0}
  .tabla-zonas form.fila > button{flex:none}
  /* 07-05: en celular la Provincia fija mide lo mismo que el scroll-padding-left de .tabla-desliza
     (8rem): sin ancho, «Santo Domingo de los Tsáchilas» la ensanchaba y el select y el botón
     quedaban detrás de ella al recibir el foco o el toque. El nombre largo pasa a dos renglones.
     El select y «Guardar» van uno debajo del otro con el mismo ancho: caben en el área útil
     junto a la columna fija y el foco con Tab no desliza la tabla debajo de ella. */
  @media (max-width:719.98px){
    .tabla-zonas :is(th,td):first-child{width:8rem}
    .tabla-zonas form.fila{flex-direction:column;align-items:stretch}
    .tabla-zonas form.fila > :is(select,button){flex:none;width:8rem}
  }

  /* Acceso, Crear contraseña y Error (05-05): tarjeta angosta centrada; en celular ocupa el
     ancho de main (su padding hace de margen). */
  .angosta{max-width:440px;margin:var(--esp-6) auto}
  .angosta .encabezado{margin-bottom:var(--esp-4)}
  /* Error con sesión (migas Inicio › título): las migas, centradas como el h1. */
  .angosta .encabezado .migas{text-align:center;justify-content:center}
  .angosta .encabezado .migas > :first-child{margin-left:0}
  .angosta .encabezado-fila,
  .angosta .encabezado-titulo{justify-content:center}
  .angosta .encabezado h1{font-size:var(--t-h1);text-align:center}
  .angosta > p{margin:0 0 var(--esp-4)}
  .angosta > p:last-child{margin-bottom:0}
  .angosta > .form{margin:0 0 var(--esp-4)}
  .angosta > .form > button{justify-self:stretch;width:100%}
  /* Animales apoyados sobre la franja verde-azul (como en legado, con tokens): la franja pasa por
     detrás de las patas, a 68,7 % de la altura de la imagen, y llega de borde a borde de la
     tarjeta. La banda se come el padding lateral de la tarjeta, por eso los dos van con --esp-5. */
  .tarjeta.con-animales{padding:0 var(--esp-5) var(--esp-5);overflow:hidden}
  .animales-banda{display:flex;justify-content:center;margin:0 calc(-1 * var(--esp-5)) var(--esp-4);padding-top:var(--esp-4)}
  .animales-caja{position:relative;width:min(370px,88%);line-height:0}
  .animales-caja::before{content:"";position:absolute;left:-60vw;right:-60vw;top:68.7%;height:9px;background:linear-gradient(90deg,var(--eq-verde-500) calc(50% - 220px),var(--eq-azul-500) calc(50% + 220px))}
  .animales-caja img{position:relative;display:block;width:100%;height:auto}
}