/* =====================================================================
   App técnico en React (sin bundler) — sistema de diseño.
   Es una copia deliberada de assets/css/app.css + tecnico/assets/css/
   tecnico.css (las partes que ya usa la app PHP actual), para que esta
   nueva versión se vea idéntica desde el primer día. A medida que se
   migren más pantallas, se van agregando acá las clases que falten.
   ===================================================================== */
:root {
  --app-bg: #EEF0F6;
  --app-bg-grad: radial-gradient(circle at 20% -10%, #E4E9FB 0%, #EEF0F6 45%);
  --app-card: #FFFFFF;
  --app-card-2: #F6F7FB;
  --app-input-bg: #FFFFFF;
  --app-border: #E4E7F0;
  --app-text: #20222B;
  --app-text-muted: #5C6275;
  --app-blue: #0073EA;
  --app-blue-dark: #0060B9;
  --app-blue-light: #E6F1FD;
  --app-verde: #00C875;
  --app-rojo: #E2445C;
  --app-naranjo: #FDAB3D;
  --app-rosa: #E8478B;
  --app-morado: #7B5CE0;
  --app-navbar-bg: rgba(255, 255, 255, .92);
  --app-radius-lg: 24px;
  --app-radius: 16px;
  --app-radius-sm: 12px;
  --app-shadow: 0 14px 34px rgba(24, 28, 55, .10);
  --app-shadow-sm: 0 4px 14px rgba(24, 28, 55, .07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --app-bg: #0B0E17;
    --app-bg-grad: radial-gradient(circle at 15% -10%, #1B2340 0%, #0B0E17 42%, #0B0E17 100%),
                    radial-gradient(circle at 100% 0%, rgba(0, 115, 234, .16) 0%, rgba(0, 115, 234, 0) 40%);
    --app-card: rgba(27, 32, 51, .78);
    --app-card-2: rgba(38, 44, 66, .72);
    --app-input-bg: #171B2A;
    --app-border: rgba(255, 255, 255, .09);
    --app-text: #F2F4FA;
    --app-text-muted: #9AA1B8;
    --app-blue: #3D8BFF;
    --app-blue-dark: #0073EA;
    --app-blue-light: rgba(61, 139, 255, .16);
    --app-verde: #33D690;
    --app-rojo: #FF5C72;
    --app-naranjo: #FFB648;
    --app-rosa: #FF6FB0;
    --app-morado: #A480FF;
    --app-navbar-bg: rgba(14, 17, 28, .90);
    --app-shadow: 0 18px 44px rgba(0, 0, 0, .38);
    --app-shadow-sm: 0 6px 18px rgba(0, 0, 0, .3);
  }
  .app-tarjeta { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}

.app-html, .app-html body { background: var(--app-bg); }
.app-html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.app-body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--app-bg-grad);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--app-text); -webkit-font-smoothing: antialiased;
  overflow-x: hidden; width: 100%;
}
.app-body * { box-sizing: border-box; min-width: 0; }

.app-tarjeta {
  position: relative; background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow); padding: 18px; overflow: hidden;
}
.app-tarjeta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(61,139,255,0) 0%, rgba(61,139,255,.55) 50%, rgba(61,139,255,0) 100%);
}
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--app-blue); color: #fff; border: none; border-radius: 999px;
  font-weight: 700; font-size: 15px; padding: 14px 22px; cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 115, 234, .28); transition: transform .12s, filter .12s;
}
.app-btn:hover { filter: brightness(1.05); }
.app-btn:active { transform: scale(.98); }
.app-btn.secundario { background: var(--app-card); color: var(--app-text); border: 1.5px solid var(--app-border); box-shadow: none; }
.app-btn.bloque { width: 100%; }
.app-btn[disabled] { opacity: .55; cursor: not-allowed; }

.app-input, .app-select, .app-textarea { width: 100%; max-width: 100%; border: 1.5px solid var(--app-border); border-radius: var(--app-radius-sm);
  padding: 14px 16px; font-size: 16px; background: var(--app-input-bg); color: var(--app-text);
  font-family: inherit; min-height: 52px; box-sizing: border-box; }
.app-select option { background: var(--app-input-bg); color: var(--app-text); }
.app-textarea { min-height: 0; resize: vertical; }
.app-input:focus, .app-select:focus, .app-textarea:focus { outline: none; border-color: var(--app-blue); box-shadow: 0 0 0 3px var(--app-blue-light); }
.app-input.campo-invalido { border-color: var(--app-rojo); }
.app-label { font-size: 12px; font-weight: 700; color: var(--app-text-muted); display: block; margin-bottom: 6px; }
.app-campo { margin-bottom: 16px; }
.app-error { color: var(--app-rojo); font-size: 12.5px; margin-top: 4px; }

/* ---- Topbar / navbar (idénticos a tecnico/assets/css/tecnico.css) ---- */
.tecnico-body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
.tec-topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));
  background: var(--app-card); border-bottom: 1px solid var(--app-border);
}
.tec-topbar-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; color: var(--app-text); }
.tec-topbar-user { display: flex; align-items: center; gap: 10px; }
.tec-topbar-nombre { font-size: 13px; font-weight: 700; color: var(--app-text); display: none; }
@media (min-width: 480px) { .tec-topbar-nombre { display: inline; } }
.tec-avatar-mini { width: 34px; height: 34px; border-radius: 50%; background: var(--app-blue-light); color: var(--app-blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; overflow: hidden; }
.tec-avatar-mini img { width: 100%; height: 100%; object-fit: cover; }
.btn-icono-tec { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--app-text-muted); text-decoration: none; border: 1px solid var(--app-border); background: none; cursor: pointer; position: relative; }
.btn-icono-tec:hover { background: var(--app-card-2); }

.tec-campana-cont, .tec-avatar-cont { position: relative; }
.tec-campana-badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--app-rojo); color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1; border: 2px solid var(--app-card); }
.tec-campana-menu, .tec-avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; background: var(--app-card);
  border: 1px solid var(--app-border); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.tec-campana-menu.mostrar, .tec-avatar-menu.mostrar { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.tec-campana-menu { width: 280px; max-height: 360px; overflow-y: auto; padding: 6px 0; }
.tec-campana-menu-titulo { font-size: 12.5px; font-weight: 800; color: var(--app-text-muted); padding: 8px 14px 6px; text-transform: uppercase; letter-spacing: .02em; }
.tec-campana-item { padding: 8px 14px; border-top: 1px solid var(--app-border); }
.tec-campana-item:first-child { border-top: none; }
.tec-campana-item.no-leido { background: var(--app-blue-light); }
.tec-campana-item-texto { margin: 0; font-size: 13px; color: var(--app-text); line-height: 1.4; }
.tec-campana-item-fecha { margin: 2px 0 0; font-size: 11px; color: var(--app-text-muted); }
.tec-campana-vacio { margin: 0; padding: 14px; font-size: 13px; color: var(--app-text-muted); text-align: center; }
.tec-avatar-mini-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.tec-avatar-menu { width: 168px; padding: 6px; }
.tec-avatar-menu a, .tec-avatar-menu button { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 9px; font-size: 13.5px;
  font-weight: 600; color: var(--app-text); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.tec-avatar-menu a:hover, .tec-avatar-menu button:hover { background: var(--app-card-2); }
.tec-avatar-menu a.rojo, .tec-avatar-menu button.rojo { color: var(--app-rojo); }

.tec-main { max-width: 640px; margin: 0 auto; box-sizing: border-box; padding: 18px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
@media (max-width: 380px) { .tec-main { padding-left: 12px; padding-right: 12px; } }

.tec-navbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; display: flex;
  background: var(--app-navbar-bg); border-top: 1px solid var(--app-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.tec-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  color: var(--app-text-muted); text-decoration: none; font-size: 11px; font-weight: 700; background: none; border: none; cursor: pointer; font-family: inherit; }
.tec-nav-item.activo { color: var(--app-blue); }

/* ---- Tarjetas de servicio / badges de estado (Panel, Perfil) ---- */
.tec-saludo { font-size: 21px; font-weight: 800; margin: 4px 0 0; }
.tec-fecha-hoy { font-size: 13px; color: var(--app-text-muted); margin: 2px 0 18px; text-transform: capitalize; }
.tec-seccion-titulo { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; margin: 22px 0 12px; }
.tec-servicio-card { background: var(--app-card); border-radius: var(--app-radius); border-left: 4px solid var(--app-border);
  box-shadow: var(--app-shadow-sm); padding: 14px; margin-bottom: 10px; }
.tec-servicio-card.borde-azul { border-left-color: var(--app-blue); }
.tec-servicio-card.borde-naranjo { border-left-color: var(--app-naranjo); }
.tec-servicio-card.borde-gris { border-left-color: #94A3B8; }
.tec-servicio-card.borde-verde { border-left-color: var(--app-verde); }
.tec-servicio-card.borde-rojo { border-left-color: var(--app-rojo); }
.tec-servicio-card .linea1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tec-servicio-card h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.tec-servicio-card .lugar { margin: 2px 0 0; font-size: 12.5px; color: var(--app-text-muted); }
.tec-servicio-card .detalle-mini { margin-top: 6px; font-size: 12.5px; color: var(--app-text-muted); display: flex; align-items: center; gap: 5px; }
.tec-servicio-card .acciones { display: flex; gap: 8px; margin-top: 12px; }
.tec-servicio-card .acciones .app-btn { flex: 1; padding: 10px 14px; font-size: 13.5px; }
.tec-badge-estado { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.tec-badge-estado.azul { background: var(--app-blue-light); color: var(--app-blue); }
.tec-badge-estado.naranjo { background: rgba(253,171,61,.16); color: #B4791E; }
.tec-badge-estado.gris { background: rgba(148,163,184,.18); color: #64748B; }
.tec-badge-estado.verde { background: rgba(0,200,117,.14); color: #00814F; }
.tec-badge-estado.rojo { background: rgba(226,68,92,.14); color: var(--app-rojo); }
.tec-vacio { text-align: center; padding: 30px 10px; color: var(--app-text-muted); }
.tec-vacio p { font-size: 13px; margin: 10px 0 0; }

.tec-accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tec-acceso-card { background: var(--app-card); border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm);
  padding: 16px 10px; text-align: center; text-decoration: none; color: var(--app-text); font-weight: 700; font-size: 13px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; border: none; font-family: inherit; width: 100%; }
.tec-acceso-card .icono-cont { width: 42px; height: 42px; border-radius: 50%; background: var(--app-blue-light); color: var(--app-blue);
  display: flex; align-items: center; justify-content: center; }

/* ---- Selector de días (Perfil) ---- */
.tec-dias-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tec-dias-tabs button { border: 1px solid var(--app-border); background: var(--app-card); color: var(--app-text-muted);
  font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.tec-dias-tabs button.activo { background: var(--app-blue-light); color: var(--app-blue); border-color: var(--app-blue); }

/* ---- Botón flotante "Volver" (pantallas en modo completo, ej. Credencial) ---- */
.tec-btn-volver-flotante {
  position: fixed; top: max(14px, calc(env(safe-area-inset-top) + 10px)); right: max(14px, env(safe-area-inset-right));
  z-index: 46; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--app-card); color: var(--app-text); border: 1px solid var(--app-border); box-shadow: var(--app-shadow-sm);
  text-decoration: none; cursor: pointer;
}

/* ---- Credencial digital ---- */
.tec-credencial {
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow); margin-bottom: 10px; display: flex; flex-direction: column;
  min-height: calc(100dvh - max(20px, env(safe-area-inset-top) + 14px) - 10px - env(safe-area-inset-bottom));
  overflow-x: hidden; overflow-y: auto;
}
.tec-credencial-header {
  background: linear-gradient(135deg, var(--app-blue) 0%, var(--app-blue-dark) 100%); color: #fff;
  padding: 12px 18px 48px; display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.tec-credencial-header img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); }
.tec-credencial-foto {
  width: clamp(100px, 26dvh, 220px); height: clamp(100px, 26dvh, 220px); border-radius: 50%; overflow: hidden; margin: -42px auto 0; flex-shrink: 0;
  border: 5px solid var(--app-card); background: var(--app-blue-light); color: var(--app-blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(30px, 8dvh, 62px); box-shadow: var(--app-shadow-sm);
}
.tec-credencial-foto img { width: 100%; height: 100%; object-fit: cover; }
.tec-credencial-cuerpo { padding: 10px 20px 16px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.tec-credencial-cuerpo .tec-badge-estado { align-self: center; }
.tec-credencial-cuerpo h2 { margin: 0 0 2px; font-size: clamp(18px, 3.4dvh, 25px); }
.tec-credencial-cuerpo .rut { margin: 0 0 1px; font-size: clamp(13.5px, 2.2dvh, 17px); color: var(--app-text); font-weight: 700; }
.tec-credencial-cuerpo .cargo { margin: 0 0 6px; font-size: clamp(11.5px, 1.8dvh, 13.5px); color: var(--app-text-muted); font-weight: 600; }
.tec-credencial-numero { text-align: center; margin: 10px 0 0; border-top: 1px dashed var(--app-border); padding-top: 10px; }
.tec-credencial-numero label { display: block; font-size: 10px; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; margin-bottom: 2px; }
.tec-credencial-numero p { margin: 0; font-size: clamp(13px, 2dvh, 16px); font-weight: 800; }
.tec-credencial-qr { text-align: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--app-border); }
.tec-credencial-qr img { width: clamp(110px, 26dvh, 210px); height: clamp(110px, 26dvh, 210px); border-radius: 12px; background: #fff; padding: 6px; box-shadow: var(--app-shadow-sm); }
.tec-credencial-qr p { margin: 8px 0 0; font-size: 11.5px; color: var(--app-text-muted); max-width: 300px; margin-left: auto; margin-right: auto; }
.tec-credencial-qr .app-btn { margin-top: 10px !important; padding: 8px 16px !important; font-size: 12.5px !important; }
.tec-credencial-footer { background: var(--app-card-2); padding: 8px 20px; text-align: center; font-size: 10.5px; color: var(--app-text-muted); font-weight: 600; flex-shrink: 0; }

/* ---- Modal (hoja inferior en celular, centrado en pantallas grandes) ---- */
.tec-modal-fondo {
  display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10,12,20,.55);
  align-items: flex-end; justify-content: center;
}
.tec-modal-fondo.mostrar { display: flex; }
.tec-modal-caja {
  background: var(--app-card); width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--app-shadow);
}
@media (min-width: 560px) {
  .tec-modal-fondo { align-items: center; padding: 20px; }
  .tec-modal-caja { border-radius: var(--app-radius-lg); max-height: 80vh; }
}
.tec-modal-cerrar {
  float: right; background: none; border: none; color: var(--app-text-muted); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 4px;
}
.tec-modal-titulo { font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.tec-modal-acciones { display: flex; gap: 10px; margin-top: 16px; }
.tec-modal-acciones .app-btn { flex: 1; }

/* ---- Avatar grande (Perfil) + recorte circular ---- */
.tec-avatar-grande {
  width: 78px; height: 78px; border-radius: 50%; background: var(--app-blue-light); color: var(--app-blue);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px;
  flex-shrink: 0; margin: 0 auto 12px; position: relative; cursor: pointer;
}
.tec-avatar-grande img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tec-avatar-lapiz {
  position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--app-blue); color: #fff; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--app-card);
}
.recorte-cont { display: flex; justify-content: center; }
#recorte-canvas {
  width: 240px; height: 240px; border-radius: 50%; cursor: grab; touch-action: none;
  box-shadow: 0 0 0 3px var(--app-blue-light), 0 0 0 4000px rgba(20,22,35,.06);
}
#recorte-canvas:active { cursor: grabbing; }

/* ---- Autocompletar (comuna/ciudad) ---- */
.cal-autocomplete {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow); max-height: 200px; overflow-y: auto;
}
.cal-autocomplete.mostrar { display: block; }
.cal-autocomplete div { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.cal-autocomplete div:hover { background: var(--app-card-2); }

/* ---- Buscador de historial + fila de resultado ---- */
.tec-buscador-cont { position: relative; margin-bottom: 16px; }
.tec-historial-fila {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); padding: 10px 12px;
  margin-bottom: 8px; cursor: pointer; background: var(--app-card);
}
.tec-historial-fila:hover, .tec-historial-fila:active { background: var(--app-card-2); }
.tec-historial-fila .info { font-size: 12.5px; }
.tec-historial-fila .info .fecha { font-weight: 700; }
.tec-historial-fila .info .sub { color: var(--app-text-muted); }

/* ---- Detalle de servicio (modal): items etiqueta/valor, materiales, evidencia, firma ---- */
.tec-detalle-item { margin-bottom: 12px; }
.tec-detalle-item label { display: block; font-size: 11px; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; margin-bottom: 3px; }
.tec-detalle-item p { margin: 0; font-size: 14px; font-weight: 600; color: var(--app-text); white-space: pre-line; }
.tec-detalle-item.notas { background: var(--app-card-2); border-radius: var(--app-radius-sm); padding: 10px 12px; margin-top: 4px; }
.tec-detalle-item.notas p { font-weight: 500; color: var(--app-text); }
.tec-detalle-item.notas p.vacia { color: var(--app-text-muted); font-weight: 400; font-style: italic; }
.tec-firma-img { max-width: 100%; max-height: 140px; border: 1px solid var(--app-border); border-radius: var(--app-radius-sm); background: #fff; }
.ot-material-lista {}
.ot-material-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--app-border); font-size: 13.5px;
}
.ot-material-fila:last-child { border-bottom: none; }
.ot-material-fila .nombre { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.ot-material-fila .cantidad {
  flex-shrink: 0; background: linear-gradient(135deg, var(--app-rosa) 0%, var(--app-morado) 100%); color: #fff; font-weight: 800;
  font-size: 12px; padding: 3px 10px; border-radius: 999px; min-width: 28px; text-align: center;
}
.ot-evidencia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ot-evidencia-item {
  position: relative; aspect-ratio: 1 / 1; border-radius: var(--app-radius-sm); overflow: hidden;
  background: var(--app-card-2); border: 1px solid var(--app-border); display: block;
}
.ot-evidencia-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Banners de aviso (pendientes de confirmar, Viaje/Permiso/Vacaciones) ---- */
.tec-banner-pendiente {
  border: 1.5px solid var(--app-naranjo); background: rgba(253, 171, 61, .10);
  border-radius: var(--app-radius); padding: 14px 16px; margin-bottom: 14px;
}
.tec-banner-pendiente .tec-banner-titulo { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--app-naranjo); font-size: 13.5px; margin-bottom: 4px; }
.tec-banner-pendiente.tec-banner-viaje { border-color: var(--app-blue); background: rgba(0, 115, 234, .08); }
.tec-banner-pendiente.tec-banner-viaje .tec-banner-titulo { color: var(--app-blue); }
.tec-banner-pendiente.tec-banner-permiso { border-color: #8B5CF6; background: rgba(139, 92, 246, .09); }
.tec-banner-pendiente.tec-banner-permiso .tec-banner-titulo { color: #8B5CF6; }
.tec-banner-pendiente.tec-banner-vacaciones { border-color: #14B8A6; background: rgba(20, 184, 166, .09); }
.tec-banner-pendiente.tec-banner-vacaciones .tec-banner-titulo { color: #14B8A6; }

/* ---- Modal centrado (elegir app de mapas, acciones cortas) ---- */
.tec-modal-centrado { align-items: center; padding: 20px; }
.tec-modal-centrado .tec-modal-caja { border-radius: var(--app-radius-lg); }

/* ---- Acciones rápidas junto a un dato (WhatsApp/llamar/mapa) ---- */
.tec-fila-con-acciones { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: nowrap; gap: 8px; }
.tec-fila-con-acciones > span:first-child { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; word-break: break-word; }
.tec-accion-rapida-grupo { display: inline-flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.tec-accion-rapida {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%; border: 1.5px solid var(--app-border); color: var(--app-text-muted); background: var(--app-card);
  text-decoration: none; cursor: pointer; padding: 0;
}
.tec-accion-rapida.whatsapp { background: #25D366; border-color: #25D366; color: #fff; }
.tec-accion-rapida.llamar { color: var(--app-blue); border-color: var(--app-blue); }
.tec-accion-rapida.mapa { color: var(--app-blue); border-color: var(--app-blue); }

/* ---- Check blanco sobre fondo azul al generar una OT ---- */
.tec-check-exito-overlay {
  position: fixed; inset: 0; z-index: 999; background: var(--app-blue);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .28s ease;
}
.tec-check-exito-overlay.mostrar { opacity: 1; }
.tec-check-exito-overlay.salir { opacity: 0; }
.tec-check-exito-svg { transform: scale(.7); transition: transform .32s cubic-bezier(.34,1.56,.64,1); }
.tec-check-exito-overlay.mostrar .tec-check-exito-svg { transform: scale(1); }
.tec-check-exito-circulo { stroke-dasharray: 245; stroke-dashoffset: 245; animation: tec-check-circulo .5s ease forwards; }
.tec-check-exito-tick { stroke-dasharray: 60; stroke-dashoffset: 60; animation: tec-check-tick .35s ease forwards .35s; }
@keyframes tec-check-circulo { to { stroke-dashoffset: 0; } }
@keyframes tec-check-tick { to { stroke-dashoffset: 0; } }

/* ---- Nueva OT: stepper, pasos, técnicos, equipo, resumen documento ---- */
.tec-chip-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.tec-chip {
  display: flex; align-items: center; gap: 7px; border: 1.5px solid var(--app-border); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; user-select: none;
}
.tec-chip input { width: 15px; height: 15px; }
.tec-chip.activo { border-color: var(--app-blue); background: var(--app-blue-light); color: var(--app-blue); }
.tec-chip-fijo { cursor: default; }

.ot-stepper { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.ot-stepper .paso {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; cursor: pointer; background: none; border: none; padding: 0;
}
.ot-stepper .paso .linea { position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--app-border); z-index: 0; }
.ot-stepper .paso:first-child .linea { display: none; }
.ot-stepper .paso .punto {
  width: 22px; height: 22px; border-radius: 50%; background: var(--app-card-2); border: 2px solid var(--app-border);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800;
  color: var(--app-text-muted); position: relative; z-index: 1;
}
.ot-stepper .paso .etiqueta { font-size: 10.5px; font-weight: 700; color: var(--app-text-muted); text-align: center; }
.ot-stepper .paso.activo .punto { background: var(--app-blue); border-color: var(--app-blue); color: #fff; box-shadow: 0 0 0 5px var(--app-blue-light); }
.ot-stepper .paso.activo .etiqueta { color: var(--app-blue); }
.ot-stepper .paso.completado .punto { background: var(--app-verde); border-color: var(--app-verde); color: #fff; }
.ot-stepper .paso.activo .linea { background: var(--app-blue); }
.ot-stepper .paso.completado .linea { background: var(--app-verde); }
.ot-paso { display: none; }
.ot-paso.activo { display: block; }
.ot-nav-botones { display: flex; gap: 10px; margin-bottom: 24px; }

.ot-resumen-campo { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--app-border); font-size: 13px; }
.ot-resumen-campo:last-of-type { border-bottom: none; }
.ot-resumen-campo label { color: var(--app-text-muted); font-weight: 600; flex-shrink: 0; }
.ot-resumen-campo span { text-align: right; font-weight: 600; }

.ot-ultimos-servicios { border: 1px dashed var(--app-border); border-radius: var(--app-radius-sm); padding: 10px 12px; margin-top: 10px; font-size: 12.5px; }
.ot-borrador-banner { margin-bottom: 14px; }

.ot-doc-seccion { margin-bottom: 16px; }
.ot-doc-seccion:last-child { margin-bottom: 0; }
.ot-doc-seccion h4 {
  display: flex; justify-content: space-between; align-items: center; margin: 0 0 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--app-blue);
  border-bottom: 1px solid var(--app-border); padding-bottom: 5px; font-weight: 800;
}
.ot-doc-seccion h4 button { font-size: 11px; font-weight: 700; color: var(--app-text-muted); background: none; border: none; cursor: pointer; padding: 0; text-transform: none; letter-spacing: 0; }
.ot-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.ot-doc-campo.full { grid-column: 1 / -1; }
.ot-doc-campo label { display: block; font-size: 10px; color: var(--app-text-muted); text-transform: uppercase; font-weight: 700; }
.ot-doc-campo p { margin: 2px 0 0; font-size: 13.5px; white-space: pre-line; }

.eq-categoria { border: 1.5px solid var(--app-border); border-radius: var(--app-radius-sm); margin-bottom: 10px; overflow: hidden; }
.eq-categoria-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.eq-categoria-header input[type="checkbox"] { width: 18px; height: 18px; }
.eq-categoria-body { display: none; padding: 0 14px 14px; }
.eq-categoria.abierta .eq-categoria-body { display: block; }
.eq-marca-titulo { font-size: 11.5px; font-weight: 700; color: var(--app-text-muted); text-transform: uppercase; margin: 10px 0 6px; }
.eq-modelos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eq-modelo-chip { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 6px 4px; }
.eq-otro-input { margin-top: 8px; }

.ot-material-quitar {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: none; background: none;
  color: var(--app-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.ot-material-quitar:hover { background: rgba(226,68,92,.12); color: var(--app-rojo); }
.ot-lista-vacia { color: var(--app-text-muted); font-size: 12.5px; padding: 6px 0; }

.ot-evidencia-item .spinner { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.ot-evidencia-item.subiendo img { opacity: .45; }
.ot-evidencia-item.subiendo .spinner { display: flex; }
.ot-evidencia-item .quitar {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(20,22,35,.62); color: #fff; border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; line-height: 1;
}
.ot-evidencia-item .error-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: rgba(226,68,92,.14); color: var(--app-rojo); font-size: 10.5px; font-weight: 700; text-align: center; padding: 4px;
}
.ot-evidencia-item .error-badge button {
  background: var(--app-rojo); color: #fff; border: none; border-radius: 999px; padding: 3px 10px; font-size: 10px; font-weight: 700; cursor: pointer;
}

/* ---- Pantalla de login ---- */
.tec-login-cont { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.tec-login-caja { width: 100%; max-width: 380px; }
.tec-login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.tec-login-logo img { width: 56px; height: 56px; }
.tec-login-logo h1 { font-size: 18px; margin: 0; font-weight: 800; }

/* ---- Cortina de transición azul (login → panel) ---- */
.tec-login-cortina { position: fixed; inset: 0; z-index: 970; background: var(--app-blue); clip-path: circle(0% at 50% 50%); pointer-events: none;
  display: flex; align-items: center; justify-content: center; }
.tec-login-cortina-logo { width: min(210px, 62vw); height: auto; filter: brightness(0) invert(1); }
.tec-login-cortina-logo-icono { width: 110px; }
.tec-login-cortina-in { animation: tec-circulo-in .9s cubic-bezier(.25, 1, .30, 1) both; }
.tec-login-cortina-out { animation: tec-circulo-out .9s cubic-bezier(.25, 1, .30, 1) both; }
@keyframes tec-circulo-in { 0% { clip-path: circle(0% at 50% 50%); } 40% { clip-path: circle(40% at 50% 50%); } 100% { clip-path: circle(125% at 50% 50%); } }
@keyframes tec-circulo-out { 0% { clip-path: circle(125% at 50% 50%); } 40% { clip-path: circle(40% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } }

/* Aviso "beta" flotante, para dejar clarísimo que esta es la versión nueva
   en construcción mientras convive con la app PHP actual en /tecnico/. */
.tec-beta-aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom) + 10px);
  z-index: 80; background: #1F2937; color: #fff; font-size: 11.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25); white-space: nowrap; }