/* Hoja de estilos minima de Fase 1.
   Las reglas que NO son cosmeticas y vienen del spec:
   - Todo lo pulsable mide 44px de alto como minimo. La cuadrilla usa esto en
     la calle, con guantes.
   - Ninguna tabla horizontal en telefono: los datos van en listas apiladas.
   - Etiquetas de texto, nunca un icono solo.
   - Contraste alto: esta pantalla se mira al sol. */

:root {
  --ink: #12211a;
  --muted: #5b6b62;
  --line: #d3ded7;
  --bg: #f6f8f7;
  --panel: #ffffff;
  --accent: #1f6b45;
  --accent-ink: #ffffff;
  --danger: #93221c;
  --danger-bg: #fdeceb;
  --notice-bg: #e8f3ec;
  --tap: 44px;
  /* Gris neutro para las visitas sin persona asignada. Solido, como el
     resto: un borde punteado sobre fondo blanco se lee como "error" o
     "incompleto", y no es ninguna de las dos cosas. */
  --unassigned: #5f6368;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- armazon con sesion ---------- */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand { font-weight: 700; color: var(--ink); text-decoration: none; }
.org { color: var(--muted); font-size: 15px; }

.mainnav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0 8px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.navlink {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.navlink.is-active { border-bottom-color: var(--accent); font-weight: 600; }
.navform { margin: 0; margin-left: auto; }
.navbutton {
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--accent);
}

.content { padding: 20px 16px; max-width: 720px; }

h1 { font-size: 24px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 8px; }

.empty, .help { color: var(--muted); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Listas de tarjetas: catalogo, propiedades de un cliente, servicios activos.
   Las clases se usaban en cuatro plantillas sin ninguna regla detras, asi que
   el titulo caia al estilo de enlace por defecto. En servicios activos ese
   titulo ES la fila —lleva al detalle— y necesita ser un blanco de dedo. */
.cardlist { list-style: none; margin: 0; padding: 0; }

.cardtitle {
  display: block;
  min-height: var(--tap);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
a.cardtitle { text-decoration: none; }
a.cardtitle:hover, a.cardtitle:focus { text-decoration: underline; }

/* Lista apilada en vez de tabla: no hay scroll horizontal en telefono. */
.datalist { margin: 0; }
.datalist dt { color: var(--muted); font-size: 14px; margin-top: 12px; }
.datalist dd { margin: 2px 0 0; }

/* ---------- login ---------- */

.authpage {
  max-width: 400px;
  margin: 0 auto;
  padding: 40px 20px;
}

.brand-lg { font-size: 26px; margin: 0 0 24px; }

.authform, .stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

label { font-size: 15px; color: var(--muted); }

/* `:not([type="checkbox"])` NO es cosmetico. Sin esa exclusion, el checkbox
   heredaba width:100%, min-height:44px, borde y padding, y se dibujaba como
   una caja vacia de ancho completo con su etiqueta desplazada — o sea, una
   palomita suelta sin texto. SPEC_V1 L.0: nunca un control desnudo. */
input:not([type="checkbox"]), select, textarea {
  min-height: var(--tap);
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 100%;
}

input:focus, select:focus, textarea:focus, button:focus, summary:focus {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Checkbox con etiqueta al lado. Toda la linea es pulsable y mide 44px, asi
   que se puede marcar con guantes sin apuntar al cuadrito. */
.checkline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 8px 0;
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
}

.checkline input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

/* "Mas opciones": plegado por defecto, un toque para abrirlo. `<details>` es
   HTML nativo — sin JavaScript, accesible con teclado, y funciona aunque el
   script de la pagina falle. */
.moreoptions {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  margin: 4px 0 16px;
}

.moreoptions > summary {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.moreoptions > summary::-webkit-details-marker { display: none; }

.moreoptions > summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  font-weight: 700;
}

.moreoptions[open] > summary::before { content: "−"; }

.moreoptions[open] > summary { border-bottom: 1px solid var(--line); }

.moreoptions .stack { padding: 14px; margin-bottom: 0; }

/* Texto que explica una PANTALLA, no un campo. Un campo que necesita nota
   debajo no pertenece a esa pantalla (SPEC_V1 L.0). */
.leadin {
  color: var(--muted);
  margin: 0 0 16px;
}

/* Un OTP de seis digitos se teclea mirando de reojo. Grande y separado. */
.codeinput {
  font-size: 28px;
  letter-spacing: 0.32em;
  text-align: center;
}

button {
  min-height: var(--tap);
  padding: 10px 16px;
  font: inherit;
  border-radius: 8px;
  cursor: pointer;
}

.primary {
  margin-top: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  font-weight: 600;
}

.secondary {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* La destructiva. Contorno rojo y no bloque rojo relleno: tiene que NO
   parecerse a la de al lado, no gritar más fuerte que la acción principal de
   la pantalla. Lo mismo que `.error`, que ya usa estos dos tokens. */
.destructive {
  background: var(--panel);
  color: var(--danger);
  border: 1px solid var(--danger);
  font-weight: 600;
}

/* La tarjeta que contiene una acción destructiva se separa por el canto. */
.card.risky { border-left: 3px solid var(--danger); }

/* Dos acciones en la misma tarjeta —cambiar la fecha y dejarla sin fecha— son
   dos formularios hermanos. `form` no trae margen propio, así que sin esto los
   dos botones quedan pegados y se leen como uno partido en dos. */
.card form + form { margin-top: 14px; }

.linkbutton {
  min-height: var(--tap);
  background: none;
  border: 0;
  color: var(--accent);
  text-decoration: underline;
  padding: 0;
}

.altlink { color: var(--accent); }

.error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: 8px;
  padding: 12px;
}

.notice {
  background: var(--notice-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.localeswitch { margin-top: 24px; }

/* ---------- calendario (FullCalendar) ---------- */
/* Es la pantalla que mas se usa. Se estiliza FullCalendar en vez de
   dibujarlo a mano; lo que sigue son las reglas que el spec exige y que su
   apariencia por defecto no da:
   - Titulo del mes grande.
   - 44px de area tactil en todo boton, y 16px de tipografia minima.
   - Fin de semana con fondo distinto; hoy, marcado sin ambiguedad.
   - Visitas como bloques de color SOLIDO. El color lo pone el servidor desde
     `CREW_COLORS`, no este archivo: tenerlo aqui seria una segunda copia.
   - Terminadas tachadas; saltadas y canceladas, apagadas.
   - Ningun desplazamiento horizontal en ningun ancho. */

.callayout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.calmain { min-width: 0; }

.fc { font-size: 16px; }

.fc .fc-toolbar-title {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }

.fc .fc-button {
  min-height: var(--tap);
  min-width: 44px;
  padding: 0 14px;
  font-size: 16px;
  background: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  text-transform: none;
  box-shadow: none;
}

.fc .fc-button:hover { background: var(--bg); border-color: var(--line); color: var(--ink); }

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.fc .fc-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; box-shadow: none; }

.fc-theme-standard td, .fc-theme-standard th { border-color: var(--line); }
.fc-theme-standard .fc-scrollgrid { border-color: var(--line); border-radius: 12px; }

.fc .fc-col-header-cell-cushion {
  padding: 10px 4px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}

.fc .fc-daygrid-day-number { color: var(--muted); font-size: 14px; text-decoration: none; padding: 6px 8px; }

/* Fin de semana con fondo propio. */
.fc .fc-day-sat, .fc .fc-day-sun { background: #eef1ef; }
.fc .fc-day-other { background: var(--bg); }

/* Hoy, sin ambiguedad. */
.fc .fc-day-today { background: var(--panel) !important; box-shadow: inset 0 0 0 2px var(--accent); }
.fc .fc-day-today .fc-daygrid-day-number {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  font-weight: 700;
  margin: 4px;
  padding: 4px 8px;
}

/* Bloques de color solido con texto blanco. */
.fc .fc-daygrid-event {
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: normal;
}

.fc .fc-event-title { color: #fff; }
.fc .fc-daygrid-day-frame { min-height: 110px; }

.fc .status-done { text-decoration: line-through; opacity: 0.75; }
.fc .status-skipped, .fc .status-cancelled { opacity: 0.5; font-style: italic; }

/* Vista de lista: es la del dia, y en telefono tambien la de la semana. */
.fc .fc-list-event-title a { color: var(--ink); font-size: 17px; }
.fc .fc-list-event:hover td { background: var(--notice-bg); }
.fc .fc-list-day-cushion { background: var(--bg); }
.fc .fc-list-event-dot { border-width: 7px; }

/* Clave de cuadrilla. */
.crewkey { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }

.crewchip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 16px;
}

.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.crewchip .count { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Panel lateral de visitas sin fecha. */
.calside {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  align-self: start;
}

.calside h2 { font-size: 17px; }
.calside.is-drop { outline: 3px dashed var(--accent); outline-offset: -3px; }

.sidelist { list-style: none; margin: 0; padding: 0; }
.sidelist li { margin-bottom: 8px; }

.chip {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  text-decoration: none;
  cursor: grab;
}

.chipclient { display: block; font-weight: 700; }
.chipservice { display: block; opacity: 0.92; font-size: 14px; }

/* ---------- agregar servicio ---------- */

.bigchoice { border: 0; padding: 0; margin: 8px 0; }
.bigchoice legend { font-size: 15px; color: var(--muted); padding: 0; }

.bigoption {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  font-size: 17px;
  cursor: pointer;
}

.bigoption input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--accent); }
.bigoption:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.whenblock[hidden] { display: none; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; }
.inline select { flex: 2; }

@media (max-width: 760px) {
  .callayout { grid-template-columns: minmax(0, 1fr); }
  .fc .fc-toolbar-title { font-size: 22px; }
  .fc .fc-toolbar.fc-header-toolbar { justify-content: space-between; }
  .fc .fc-daygrid-day-frame { min-height: 76px; }
  /* En el mes, de un vistazo: el titulo completo no cabe y no hace falta. */
  .fc .fc-daygrid-event { font-size: 12px; padding: 2px 4px; }
}

/* El calendario necesita el ancho entero; el resto de las pantallas se lee
   mejor en una columna estrecha. */
.content.wide { max-width: 1200px; }

/* Realimentación al arrastrar. Sin esto no se distingue "no funciona" de
   "no acerté la celda". */
.daycell.is-drop, .daylist.is-drop, .calside.is-drop {
  outline: 3px dashed var(--accent);
  outline-offset: -3px;
  background: var(--notice-bg);
}

/* "Cambiar fecha" junto a cada visita: el camino sin arrastre, siempre
   presente. En el mes se muestra pequeño; en la lista del día, a tamaño
   pulsable. */
/* "Cambiar fecha" solo existe en la vista de día. En el mes ocupaba más que
   la propia visita; allí la acción vive dentro de la visita, al hacer clic. */
.chiplink {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  color: var(--accent);
  font-size: 16px;
  text-decoration: underline;
}

/* Filtros de servicios activos: en una fila en escritorio, apilados en
   teléfono. Sin desplazamiento horizontal. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.filters select { width: auto; min-width: 160px; }
.filters button { margin: 0; }

/* El buscador comparte fila con los dos desplegables. Sin esto hereda el
   `width: 100%` de todo campo y se lleva una fila entera para el solo, que es
   un accidente de la regla global y no una decision de diseño.

   17px y no menos: por debajo de 16px, Safari en iPhone hace zoom sobre el
   campo al enfocarlo y deja la pantalla desencuadrada. */
.filters input[type="search"] { flex: 1 1 220px; width: auto; min-width: 180px; font-size: 17px; }

@media (max-width: 560px) {
  .filters { flex-direction: column; align-items: stretch; }
  .filters select { width: 100%; }
  .filters input[type="search"] { width: 100%; flex: none; }
}

/* Servicios activos dentro de la tarjeta de una propiedad. */
.servicelist {
  list-style: none;
  margin: 10px 0;
  padding: 0 0 0 12px;
  border-left: 3px solid var(--accent);
}
.servicelist li { margin-bottom: 6px; font-size: 15px; }

/* ---------- autocompletado ---------- */
/* Escribir filtra. Los resultados son ENLACES, así que Enter los activa sin
   que haya que reimplementar nada: el teclado solo mueve el foco. */

.autocomplete { margin-bottom: 20px; max-width: 560px; }
.autocomplete input[type="search"] { font-size: 17px; }

.results { margin-top: 8px; }
.resultlist { list-style: none; margin: 0; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.resultlist li + li { border-top: 1px solid var(--line); }

.result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--tap);
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}

.result:hover, .result:focus { background: var(--notice-bg); outline: 2px solid var(--accent); outline-offset: -2px; }
.resultname { font-weight: 600; font-size: 16px; }
.resultaddress { color: var(--muted); font-size: 15px; }

/* Filas que SON un valor del formulario y no un enlace: el selector del
   catalogo al agregar un servicio activo. Misma caja, mismo borde y mismo
   hover que el buscador de clientes —es la misma familia—, con el control a
   la vista y un estado elegido que se distingue de un vistazo.

   El radio necesita medidas propias porque hereda el `width: 100%` de todo
   campo; la fila entera mide 44px y es el blanco, asi que se marca sin tener
   que apuntar al circulito. */
.result.pickable {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  /* El canto se reserva desde el principio para que el texto no baile 3px al
     elegir la fila. */
  border-left: 3px solid transparent;
  padding-left: 11px;
}

.result.pickable input[type="radio"] {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

/*  EN UNA LISTA DONDE SE ELIGE, EL VERDE SIGNIFICA ELEGIDO.

    Hover, foco y fila elegida compartian `--notice-bg`, asi que pasar el raton
    por encima dejaba una fila con el mismo aspecto que la marcada y habia dos
    candidatas a la vista. El color de acento se reserva para la eleccion; la
    posicion del puntero y el foco se distinguen con el fondo neutro. */
.result.pickable:hover { background: var(--bg); }

/* El foco del teclado cae en el RADIO, no en la fila, asi que `.result:focus`
   no llegaba a dispararse nunca y tabular por la lista no se veia. */
.result.pickable:focus-within {
  background: var(--bg);
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/*  ELEGIDA: tres señales a la vez, porque una sola se pierde en una lista.
    Canto de acento, fondo verde palido y el nombre en acento y en negrita.

    El nombre va por el hermano adyacente y no por `:has()`, asi que la
    eleccion se sigue viendo aunque el navegador no soporte `:has()`; el fondo y
    el canto son la capa de encima. */
.result.pickable input:checked + .resultname {
  color: var(--accent);
  font-weight: 700;
}

.result.pickable:has(input:checked) {
  background: var(--notice-bg);
  border-left-color: var(--accent);
}

/*  Un catalogo largo no puede empujar el resto del formulario fuera de la
    pantalla: la lista se desplaza dentro de su caja.

    `min()` porque 320px fijos son media pantalla en un telefono; y
    `overscroll-behavior` para que al llegar al final de la lista no siga
    desplazandose la pagina de debajo. */
.results.picker {
  max-height: min(320px, 45vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Indicador de carga de HTMX. Sin `htmx-request` no se ve. */
.busy { display: none; }
.htmx-request .busy, .htmx-request.busy {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- pantalla de la cuadrilla ---------- */
/* Se mira al sol, con guantes, de pie. Todo grande y apilado. */

.worklist { list-style: none; margin: 0; padding: 0; }

.workcard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 6px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
}

.workclient { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.workservice { color: var(--muted); margin: 0 0 8px; font-size: 16px; }
.workcard .address { font-size: 17px; margin: 0 0 8px; }
.workaccess { font-size: 16px; margin: 4px 0 0; }

/*  EL BOTON DE LA CUADRILLA. Esta pantalla se usa de pie, con guantes y al sol,
    y a menudo con una sola mano: el blanco es TODO EL ANCHO de la tarjeta y
    mide bastante mas que los 44px del minimo, porque aqui apuntar cuesta.

    Un boton grande cada vez y nunca los dos: la pantalla dice cual es el
    siguiente paso en vez de ofrecer un menu. Con texto, nunca un icono solo. */
/*  Vale para `<button>` y para `<label>`: el de la camara es un label que
    envuelve un input oculto, y sin esto no heredaria el padding, el radio ni
    el cursor que la regla de `button` da solo a los botones. */
.workbutton {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 600;
  background: var(--panel);
  color: var(--ink);
  border: 2px solid var(--accent);
}

.workbutton.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/*  Lo que ya esta tomado, con palabras y no solo con la marca: en una lista
    de tarjetas hay que poder leerlo de un vistazo sin contar iconos. */
/* Lo ya capturado. Una marca por cada foto que pide la visita, y las que aun
   no estan van con `hidden`, que el telefono quita al guardar.

   El separador es `gap` y no un caracter: con marcas ocultas, un " · " escrito
   en la plantilla dejaria puntos sueltos al principio o al final. Y el
   contenedor se esconde solo cuando no queda ninguna visible, con :has(). */
.captured {
  margin: 10px 0 0;
  color: var(--accent);
  font-weight: 600;
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* `hidden` pierde contra `display: flex` y contra cualquier regla de display.
   Se repone a mano, que si no la tarjeta mostraria los tres pasos a la vez y la
   fila de marcas dejaria un hueco con todas escondidas. Quien las esconde es el
   servidor al pintar y `crew.js` al avanzar: nada depende de `:has()`, que en
   iOS solo existe desde 15.4. */
.captured[hidden],
.captured [data-mark][hidden],
.workcard .step[hidden] { display: none; }

/* Terminada: la tarjeta deja de pedir nada y se aparta sin desaparecer. */
.workcard .meta.done { color: var(--muted); font-weight: 600; }

/*  EL ESPEJO DEL ARRASTRE NO HEREDA NADA DE LA SEÑAL.

    `getMirrorEl()` hace `sourceEl.cloneNode(true)`, asi que cualquier
    `transform` o animacion puesta sobre la tarjeta viajaba al espejo: salia
    escalado y desalineado bajo el dedo, y ademas `sourceElRect` se medi­a sobre
    el elemento ya escalado, con lo que arrancaba descolocado.

    Se corta por dos lados. Primero, la señal de abajo no usa `transform`: no
    toca la geometria de nadie. Y segundo, esta red por si alguien la rehace con
    uno — el espejo se posiciona con `left`/`top` (`updateElPosition`) y no usa
    `transform` para nada, asi que anularlo aqui no le quita nada. */
.fc-event-dragging {
  transform: none !important;
  animation: none !important;
}

/*  QUE EL MOVIMIENTO SE VEA, sin recargar y sin un temporizador que compita
    con el gesto. Las dos mitades ocurren DESPUES de soltar.

    La pieza se apaga donde estaba en vez de desaparecer de golpe; quien la
    retira del calendario es `animationend`, no un reloj. Y la fila que llega al
    panel entra anunciandose, solo ella: animar la lista entera se lee como "se
    ha recargado" y no como "esta ha llegado". */
@keyframes leaving {
  to { opacity: 0; transform: scale(0.92); }
}

.fc-event.is-leaving {
  animation: leaving 160ms ease-in forwards;
  pointer-events: none;
}

@keyframes arriving {
  from { opacity: 0; transform: translateY(-10px); }
}

.undated-visit.is-arriving {
  animation: arriving 220ms ease-out;
}

/*  Quien pidio menos movimiento se queda con el resultado y sin el recorrido.
    `leaving` conserva duracion porque `animationend` es quien retira la pieza:
    a cero no llegaria nunca el evento y la visita se quedaria dibujada. */
@media (prefers-reduced-motion: reduce) {
  .fc-event.is-leaving { animation-duration: 1ms; }
  .undated-visit.is-arriving { animation: none; }
}


/*  "Sin conexion" DENTRO de la tarjeta, no en un aviso global.

    El fallo es de esta visita y de esta captura, asi que se cuenta donde
    ocurrio. Un banner arriba obligaria a buscar a cual de las tarjetas se
    refiere, y con guantes y al sol eso es una tarjeta de mas que leer. */
.capture-failed {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
  font-size: 16px;
  font-weight: 600;
}

/*  Capturas guardadas y sin enviar. EN VERDE, NO EN ROJO.

    No es un error: es el sistema haciendo exactamente lo que prometio —
    guardar la foto y mandarla sola cuando vuelva la senal. Con el color de la
    alarma, en campo se lee como averia y alguien deja de fiarse de la app. */
.pending-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--notice-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 16px;
  font-weight: 600;
}

/*  Lo mismo dentro de una tarjeta, cuando es esa captura la que espera. */
.capture-saved {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--notice-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 16px;
  font-weight: 600;
}

/*  El boton de terminar mientras no hay senal: sigue ahi y sigue diciendo algo,
    pero no se ofrece como si fuera a funcionar. */
.workbutton.waiting {
  background: var(--panel);
  color: var(--muted);
  border-color: var(--line);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Retirar del uso: borrar o archivar

   DOS BLOQUES, Y EL SEGUNDO CAMBIA DE COLOR CON LA ACCION. El de arriba dice
   por que no se borra; el de abajo, que va a pasar. Solo el borrado real va en
   rojo: archivar es reversible y pintarlo de alarma ensena a ignorar el rojo
   justo antes de la pantalla donde importa.
   -------------------------------------------------------------------------- */

.removal-why,
.removal-what { margin: 16px 0; }

.removal-what.removal-danger {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.removal-head {
  margin: 0 0 6px;
  font-weight: 600;
}

.removal-list {
  margin: 0;
  padding-left: 20px;
}

.removal-list li { margin: 2px 0; }

/* El boton de borrar de verdad. Se distingue del de guardar por el color, no
   solo por la palabra: es la unica accion de estas tres pantallas que no tiene
   vuelta atras. */
.danger {
  margin-top: 10px;
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger);
  font-weight: 600;
}

/* Archivado, dicho donde se ve. Sin la marca, la ficha se lee igual que la de
   uno vivo y alguien escribe un formulario entero antes de que el servidor le
   diga que no. */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--notice-bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.altbutton {
  margin-top: 8px;
  background: var(--panel);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: 600;
}