/* Capa visual compartida. Los estilos de cada vista conservan su estructura. */
:root {
  --verde-950: #142f29;
  --verde-800: #214f42;
  --verde-700: #28604e;
  --verde-600: #36715b;
  --verde-100: #edf3ee;
  --fondo: #f5f6f2;
  --borde: #dce4dd;
  --tinta: #233b32;
  --tinta-suave: #617068;
  --texto-secundario: #617068;
  --dorado: #e6bc70;
  --radio: 16px;
  --sombra: 0 4px 20px rgb(25 50 38 / 5%);
}
body { line-height: 1.5; }
::selection { background: #dcebd8; color: #142f29; }
button, input, select, textarea { accent-color: var(--verde-700); }
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #a37932;
  outline-offset: 3px;
}
.saltar-contenido { position: fixed; top: -80px; left: 16px; z-index: 10000; background: white; padding: 12px 20px; border-radius: 8px; }
.saltar-contenido:focus { top: 12px; }
.vista-app { grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { padding: 30px 16px 20px; background: var(--verde-950); }
.sidebar-marca { padding: 0 12px 26px; margin-bottom: 24px; border-bottom: 1px solid #ffffff1c; gap: 12px; }
.marca-logo-chica { width: 42px; }
.marca-texto { font-size: 23px; line-height: 1.25; }
.marca-texto small { display: block; margin-top: 6px; font: 10px var(--fuente-cuerpo); letter-spacing: .19em; color: #c0cfc5; }
.sidebar-nav { gap: 5px; }
.sidebar-nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 13px; font-size: 13px; line-height: 1.45; border: 1px solid transparent; border-radius: 10px; color: #d1ded6; transition: background .15s, color .15s; }
.nav-icono { flex: 0 0 20px; opacity: .8; }
.sidebar-nav button.activo { background: #ffffff12; border-color: #ffffff24; box-shadow: inset 3px 0 var(--dorado); color: #fff; }
.sidebar-nav button.activo .nav-icono { color: var(--dorado); opacity: 1; }
.sidebar-usuario { margin-top: 28px; padding: 20px 8px 0; gap: 8px; }
.sidebar-usuario > div { min-width: 0; }
.sidebar-usuario strong { overflow-wrap: anywhere; }
.badge-rol { display: block; margin-top: 4px; font-size: 10px; }
#btn-logout { text-decoration: none; color: #e1e8e3; border: 1px solid #ffffff26; border-radius: 8px; }
.contenido { padding: 38px clamp(20px, 3vw, 52px) 64px; min-width: 0; }
.contenido[aria-busy="true"] { cursor: progress; }
.estado-carga, .estado-error { display: grid; place-items: center; gap: 12px; min-height: 220px; padding: 40px 20px; border: 1px solid var(--borde); border-radius: 14px; background: #fbfcf9; color: var(--tinta-suave); text-align: center; }
.estado-carga { grid-template-columns: auto 1fr; justify-content: center; }
.indicador-carga { width: 20px; height: 20px; border: 2px solid #cbd9cf; border-top-color: var(--verde-700); border-radius: 50%; animation: girar .75s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.estado-error { place-items: center; color: var(--tinta); border-color: #efc7c2; background: #fffafa; }
.estado-error strong { font-family: var(--fuente-display); font-size: 21px; color: var(--rojo); }
.estado-error p { max-width: 620px; margin: 0; color: var(--tinta-suave); }
.estado-formulario-carga, .estado-formulario-error { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 180px; margin-bottom: 20px; padding: 34px 24px; border: 1px solid #d9e4da; border-radius: 14px; background: linear-gradient(145deg, #fffefa, #f6faf4); color: var(--tinta); text-align: left; box-shadow: 0 10px 30px rgb(24 57 44 / 7%); }
.estado-formulario-carga strong, .estado-formulario-error strong { display: block; color: var(--premium-ink); font: 600 20px/1.2 var(--fuente-display); }
.estado-formulario-carga p, .estado-formulario-error p { margin: 5px 0 0; color: var(--tinta-suave); font-size: 13px; }
.estado-formulario-error { flex-direction: column; text-align: center; border-color: #efc7c2; background: #fffafa; }
.estado-formulario-error strong { color: var(--rojo); }
.vista-header { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--borde); gap: 20px; }
.vista-header h2 { font-size: clamp(26px, 2.5vw, 34px); letter-spacing: -.035em; line-height: 1.2; }
.vista-header p { margin-top: 9px; line-height: 1.6; max-width: 680px; }
.vista-header > .subtitulo { flex-basis: 100%; margin-top: 0; }
.vista-header-acciones { gap: 10px; }
.plan-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: -6px 0 24px; }
.plan-resumen-card { min-width: 0; padding: 18px 18px 16px; border: 1px solid var(--borde); border-radius: 13px; background: #fff; box-shadow: var(--sombra); }
.plan-resumen-card--principal { background: linear-gradient(135deg, #f1f7ef, #fff); border-color: #cfe0d1; }
.plan-resumen-card--costo strong { color: var(--verde-700); }
.plan-resumen-label { display: block; margin-bottom: 8px; color: var(--tinta-suave); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.plan-resumen-card strong { display: block; color: var(--verde-950); font: 600 28px/1.15 var(--fuente-display); letter-spacing: -.02em; }
.plan-resumen-card small { display: block; margin-top: 7px; color: var(--tinta-suave); font-size: 12px; }
.plan-resumen-track { height: 6px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: #e5ece3; }
.plan-resumen-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde-600), var(--dorado)); }
.panel { padding: 24px; box-shadow: var(--sombra); margin-bottom: 24px; }
.panel h3 { font-size: 21px; }
.btn { min-height: 42px; border-radius: 9px; padding: 10px 16px; font-size: 13px; line-height: 1.45; transition: background .15s, box-shadow .15s; }
.btn-primario { box-shadow: 0 2px 3px #142f2914; }
.btn-secundario { background: #fff; border: 1px solid #cbd9cf; }
.btn-texto { text-underline-offset: 3px; }
@media (hover: hover) {
  .btn-primario:hover:not(:disabled) { background: var(--verde-950); box-shadow: 0 4px 12px #142f2926; }
  .btn-secundario:hover:not(:disabled) { background: var(--verde-100); }
  tbody tr:hover { background: #f5f8f3; }
}
/* También normaliza controles de vistas antiguas con estilos en línea. */
:is(.contenido, .swal2-popup) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea) {
  border: 1px solid #cbd8cf !important;
  border-radius: 9px !important;
  background-color: #fff;
  color: var(--tinta);
  min-height: 42px;
  padding: 10px 12px;
  font-family: var(--fuente-cuerpo);
  font-size: 14px;
  max-width: 100%;
}
:is(.contenido, .swal2-popup) :is(input, select, textarea):disabled { background-color: #f0f2ee; color: #6c776f; }
input::placeholder, textarea::placeholder { color: #778379; opacity: 1; }
.form-grid { gap: 20px; margin-bottom: 20px; }
.form-grid label, .form-full label { gap: 8px; color: #445b4e; font-weight: 600; }
.ayuda-campo { display: block; margin-top: -3px; color: var(--tinta-suave); font-size: 11px; font-weight: 500; }
select[multiple] { background-image: linear-gradient(135deg, transparent 50%, #6a7c70 50%), linear-gradient(45deg, #6a7c70 50%, transparent 50%); background-position: calc(100% - 16px) 13px, calc(100% - 11px) 13px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select[multiple] option { padding: 8px 10px; border-radius: 6px; }
select[multiple] option:checked { background: var(--verde-700) linear-gradient(0deg, var(--verde-700), var(--verde-700)); color: #fff; }
.lista-areas-tarea { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; padding: 6px; border: 1px solid #d6e2d7; border-radius: 10px; background: #f8fbf7; }
.selector-area-tarea, .form-grid .selector-area-tarea { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-start; gap: 10px !important; min-height: 36px; margin: 0 !important; padding: 7px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--tinta) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; cursor: pointer; }
.selector-area-tarea:hover { border-color: #c9ddcb; background: #f0f7ee; }
.selector-area-tarea:has(input:checked) { border-color: #b7d2ba; background: #eaf4e8; color: var(--verde-800) !important; box-shadow: inset 3px 0 var(--premium-gold); }
.selector-area-grupo { border-color: #d3c28f; background: #fffaf0; color: #705b26 !important; font-weight: 700 !important; }
.selector-area-grupo:has(input:checked) { border-color: #c6a956; background: #f8edcf; color: #5d4817 !important; }
.selector-area-tarea input { width: 17px !important; height: 17px !important; min-height: 17px !important; margin: 0; flex: 0 0 auto; }
.form-full textarea { min-height: 100px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; flex-shrink: 0; }
.lista-personal-check, .lista-encargados-check, .lista-personal-simple { background: #fafbf8; border-radius: 10px; padding: 14px; }
table { font-size: 13px; line-height: 1.5; }
th { background: #f1f5ef; color: #526557; font-size: 10px; letter-spacing: .07em; padding: 14px 12px; }
td { padding: 15px 12px; border-bottom-color: #e8ede7; }
.tabla-scroll { border: 1px solid var(--borde); border-radius: 12px; background: white; }
.chip { font-family: var(--fuente-cuerpo); font-weight: 600; line-height: 1.4; padding: 5px 10px; font-size: 11px; }
.avance-track { height: 7px; background: #e5ece3; }
.avance-fill { background: var(--verde-600); }
.plan-observacion { background: #f7f8f4; border-color: #e4e9df; }
.acc-grupo-header, .acc-area-header { min-height: 52px; border-radius: 9px; }
.panel-areas { padding: 10px; }
.tarea-preasignada-card { border-radius: 10px; }
.vacio { padding: 40px 20px; line-height: 1.7; background: #f7f9f5; border-radius: 12px; }
.mensaje-error { border: 1px solid #efc7c2; padding: 14px 16px; line-height: 1.6; }
.toast { border-radius: 12px; box-shadow: 0 8px 28px #142f2926; line-height: 1.5; }
.swal2-popup { border-radius: 18px; font-family: var(--fuente-cuerpo); }
.swal2-title { font-family: var(--fuente-display); color: var(--verde-950); }
.swal2-styled { border-radius: 9px; }
.vista-login { padding: 32px 20px; background: #eaf0e7; background-image: radial-gradient(ellipse at 0 0, #ccdcca 0, transparent 60%), radial-gradient(ellipse at 100% 100%, #e8dfc6 0, transparent 50%); }
.login-card { width: min(460px, 100%); padding: 36px 40px; border: 1px solid #ffffff; border-radius: 24px; box-shadow: 0 24px 80px #173b2914; }
.login-marca { gap: 16px; margin-bottom: 32px; }
.marca-logo-grande { width: 78px; height: 78px; background: #f3f5ef; border-radius: 22px; padding: 4px; }
.marca-eyebrow { margin: 0 0 14px; font: 600 10px var(--fuente-cuerpo); letter-spacing: .17em; color: #5e715f; }
.login-marca h1 { font-size: 32px; letter-spacing: -.035em; line-height: 1.2; }
.login-sub { margin-top: 14px; font-size: 13px; line-height: 1.7; }
#form-login { gap: 20px; }
#form-login input { min-height: 48px; background: #fff; border-color: #ccd8ce; border-radius: 9px; padding: 12px 14px; }
#form-login label { color: #405746; font-weight: 600; gap: 8px; }
#form-login .btn { min-height: 48px; margin-top: 4px; }
.login-nota { border-top: 1px solid var(--borde); margin: 26px 0 0; padding-top: 20px; text-align: center; font-size: 11px; line-height: 1.8; }
#modal-ot { background: white !important; border: 1px solid var(--borde) !important; border-radius: var(--radio) !important; padding: 24px !important; box-shadow: var(--sombra); }
#modal-ot h3 { margin-bottom: 24px; }
#ot-campos > div:first-child { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; gap: 20px !important; }
#ot-campos label { font-size: 13px; color: #445b4e; }
#btn-nueva-ot { background: var(--verde-800) !important; border-radius: 9px !important; min-height: 44px; font-size: 13px; }
@media (min-width: 921px) {
  .sidebar { position: sticky; top: 0; height: 100dvh; min-height: 0; overflow-y: auto; }
}
@media (max-width: 920px) {
  .vista-app { display: flex; flex-direction: column; }
  .sidebar.sidebar-movil { padding: 12px 18px; background: var(--verde-950); }
  .sidebar.sidebar-movil .sidebar-marca { border-bottom: 0; gap: 10px; }
  .sidebar.sidebar-movil .marca-texto { font-size: 19px; }
  .sidebar.sidebar-movil .marca-texto small { font-size: 8px; margin-top: 2px; }
  .sidebar.sidebar-movil .marca-logo-chica { width: 32px; }
  .sidebar.sidebar-movil .sidebar-usuario { margin: 0; padding: 0; }
  .sidebar.sidebar-movil .sidebar-nav { padding: 12px; border-radius: 14px; max-height: calc(100dvh - 90px); background: var(--verde-950); box-shadow: 0 16px 30px #142f2933; }
  .sidebar.sidebar-movil .sidebar-nav button { display: flex; gap: 12px; font-size: 13px; padding: 12px; }
  .btn-menu-movil { width: 44px; height: 44px; }
  .contenido { width: 100%; padding: 26px 20px 40px; }
}
@media (max-width: 640px) {
  .contenido { padding: 24px 14px 40px; }
  .vista-header { gap: 16px; padding-bottom: 20px; margin-bottom: 20px; }
  .vista-header h2 { font-size: 27px; }
  .vista-header p { font-size: 13px; }
  .panel { padding: 16px; border-radius: 12px; }
  .plan-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .plan-resumen-card { padding: 14px; }
  .plan-resumen-card strong { font-size: 24px; }
  .form-grid { grid-template-columns: 1fr; gap: 16px; }
  .btn { min-height: 44px; }
  :is(.contenido, .swal2-popup) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea), #form-login input { font-size: 16px; }
  th { padding: 10px 8px; }
  td { padding: 12px 8px; }
  .login-card { padding: 28px 24px; }
  .login-marca h1 { font-size: 29px; }
  #modal-ot { padding: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Acabado premium: superficies profundas, contraste cálido y detalles editoriales. */
:root {
  --premium-ink: #102a25;
  --premium-ink-2: #1d493d;
  --premium-gold: #d8a957;
  --premium-gold-soft: #f5e8ca;
  --premium-surface: #fffefa;
}
body { background: radial-gradient(circle at 90% -10%, #edf4e9 0, transparent 34%), var(--fondo); }
.sidebar { background: linear-gradient(165deg, #0e2924 0%, #173e33 56%, #102c27 100%); box-shadow: 12px 0 36px rgb(16 42 37 / 9%); }
.sidebar::after { content: ''; position: absolute; inset: auto 18px 88px; height: 1px; background: linear-gradient(90deg, transparent, #d8a95766, transparent); pointer-events: none; }
.sidebar-marca { position: relative; }
.sidebar-marca::after { content: 'GESTIÓN DE OBRA'; position: absolute; left: 56px; bottom: 10px; color: #a9c2b6; font: 600 8px/1 var(--fuente-cuerpo); letter-spacing: .2em; }
.sidebar-nav button { letter-spacing: .005em; }
.sidebar-nav button:hover { background: #ffffff12; border-color: #ffffff1b; transform: translateX(2px); }
.sidebar-nav button.activo { background: linear-gradient(90deg, #ffffff19, #ffffff08); border-color: #ffffff2b; box-shadow: inset 3px 0 var(--premium-gold), 0 6px 18px #061a1540; }
.contenido { padding-top: 46px; }
.vista-header { border-bottom-color: #cfdcd2; }
.vista-header h2 { color: var(--premium-ink); font-weight: 600; }
.vista-header h2::after { content: ''; display: block; width: 42px; height: 3px; margin-top: 13px; border-radius: 99px; background: var(--premium-gold); }
.vista-header p { color: #64766c; }
.panel { border-color: #dbe5dc; background: rgb(255 255 254 / 92%); box-shadow: 0 8px 26px rgb(24 57 44 / 6%), 0 1px 2px rgb(24 57 44 / 4%); }
.plan-resumen-card { border-color: #d7e2d8; background: linear-gradient(145deg, #fffefa, #f9fbf7); box-shadow: 0 8px 24px rgb(24 57 44 / 6%); }
.plan-resumen-card:hover { border-color: #c2d4c5; box-shadow: 0 12px 30px rgb(24 57 44 / 10%); transform: translateY(-2px); }
.plan-resumen-card--principal { background: linear-gradient(145deg, #eaf3e7, #fffefa 75%); }
.plan-resumen-label { color: #718177; letter-spacing: .11em; }
.plan-resumen-card strong { color: var(--premium-ink); }
.btn-primario, #btn-nueva-ot { background: linear-gradient(135deg, #285f4e, #173f34) !important; border: 1px solid #285f4e; }
.btn-dorado { background: linear-gradient(135deg, #e8c275, #c99743); }
.btn-secundario { background: #fffefa; border-color: #c7d7ca; }
.btn-secundario:hover:not(:disabled) { color: var(--premium-ink-2); border-color: #9fbea5; background: #eff6ed; }
table { border-spacing: 0; }
thead th { background: linear-gradient(180deg, #f2f7f0, #ebf2e9); color: #50665a; border-bottom: 1px solid #cadbce; }
tbody tr { transition: background .16s ease, box-shadow .16s ease; }
tbody tr:hover { background: #f3f8f1; box-shadow: inset 3px 0 var(--premium-gold); }
.chip-area { background: #e7f1e6; border: 1px solid #d2e3d2; color: #27604c; }
.tarea-areas-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: 290px; }
.chip-area--compacto, .chip-area--mas { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-area--mas { background: #f4ead5; border-color: #ead7ad; color: #866322; cursor: help; }
.plan-observacion { background: #fbfcf8; border-color: #e1e9df; }
.toast { background: var(--premium-ink); border: 1px solid #ffffff26; color: #f8fbf6; }
.vista-login { background-color: #e6eee2; background-image: radial-gradient(circle at 10% 10%, #bdd4bb 0, transparent 42%), radial-gradient(circle at 90% 92%, #eadfca 0, transparent 46%), linear-gradient(135deg, #eaf1e7, #f5f2e9); }
.login-card { background: rgb(255 255 254 / 95%); border-color: #ffffff; box-shadow: 0 30px 90px rgb(23 59 41 / 14%), 0 2px 6px rgb(23 59 41 / 5%); }
.marca-logo-grande { box-shadow: 0 8px 22px rgb(40 95 78 / 11%); }
.login-marca h1 { color: var(--premium-ink); }
#form-login .btn-primario { letter-spacing: .015em; }
@media (max-width: 920px) {
  .contenido { padding-top: 30px; }
  .sidebar.sidebar-movil { box-shadow: 0 8px 24px rgb(16 42 37 / 16%); }
.sidebar-marca::after { display: none; }
}

.modal-resumen-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgb(9 29 24 / 72%); backdrop-filter: blur(7px); animation: modal-entrada .18s ease-out; }
.modal-resumen { position: relative; width: min(920px, 100%); max-height: min(88vh, 850px); overflow-y: auto; padding: 34px; border: 1px solid #fff; border-radius: 22px; background: var(--premium-surface); box-shadow: 0 30px 90px rgb(0 20 14 / 32%); scrollbar-color: #aac2b0 transparent; }
@keyframes modal-entrada { from { opacity: 0; } to { opacity: 1; } }
.modal-resumen-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #dce6dd; }
.modal-resumen-encabezado h2 { margin: 4px 0 8px; color: var(--premium-ink); font-size: clamp(25px, 3vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.modal-resumen-encabezado p { margin: 0; color: var(--tinta-suave); font-size: 14px; }
.modal-resumen-kicker { color: #a57930; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.modal-resumen-cerrar { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid #d5e1d7; border-radius: 50%; background: #f5f8f3; color: #557063; font-size: 18px; line-height: 1; }
.modal-resumen-cerrar:hover { background: var(--premium-gold-soft); color: var(--premium-ink); }
.modal-resumen-metricas { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; margin: 22px 0 14px; }
.modal-resumen-metrica { min-width: 0; padding: 16px; border: 1px solid #dce6dd; border-radius: 13px; background: #f7faf5; }
.modal-resumen-metrica--avance { background: linear-gradient(145deg, #eaf3e7, #f8fbf6); border-color: #c6dbc9; }
.modal-resumen-metrica span, .modal-resumen-datos span { display: block; color: #6d7e73; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.modal-resumen-metrica strong { display: block; margin-top: 7px; color: var(--premium-ink); font: 600 27px/1.1 var(--fuente-display); }
.modal-resumen-metrica small { display: block; margin-top: 6px; color: var(--tinta-suave); font-size: 11px; }
.modal-resumen-progreso { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 99px; background: #dce8dc; }
.modal-resumen-progreso i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #32735a, var(--premium-gold)); }
.modal-resumen-datos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 15px 0 22px; border-bottom: 1px solid #e2e9e2; }
.modal-resumen-datos div { min-width: 0; }
.modal-resumen-datos strong { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--tinta); font-size: 12px; line-height: 1.35; }
.modal-resumen-seccion-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.modal-resumen-seccion-titulo h3 { margin: 0; color: var(--premium-ink); font-size: 19px; }
.modal-resumen-seccion-titulo span { color: var(--tinta-suave); font-size: 12px; }
.modal-resumen .tabla-scroll { border-radius: 12px; }
.modal-resumen-footer { display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e1e9e2; }
.modal-resumen-footer .btn { min-width: 108px; }
#modal-ot { overflow: hidden; }
#form-crear-ot { max-width: 980px; margin: 0 auto; }
#ot-campos { display: block; }
#ot-campos > div, #ot-campos > section { margin-bottom: 22px !important; }
#ot-campos > div > label, #ot-campos > section > label { display: block; margin-bottom: 8px !important; color: #3f5b4c; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#ot-campos > div:first-child { padding: 20px; border: 1px solid #e0e9df; border-radius: 14px; background: #fbfcf9; }
#ot-campos > div:first-child > div { margin-bottom: 0 !important; }
#ot-campos > div:first-child label { display: block; margin-bottom: 8px !important; color: #3f5b4c; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
#ot-campos :is(input, select, textarea) { min-height: 44px; }
#ot-campos textarea { min-height: 82px; }
#ot-lista-areas, #ot-lista-personal { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px !important; max-height: 190px !important; padding: 12px !important; border: 1px solid #d6e2d7 !important; border-radius: 11px !important; background: #f8fbf7 !important; }
#ot-lista-areas label, #ot-lista-personal label { display: flex !important; align-items: center; gap: 9px !important; min-height: 42px; margin: 0 !important; padding: 9px 11px !important; border: 1px solid #d8e4d8; border-radius: 9px; background: #fff; color: var(--tinta) !important; font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
#ot-lista-areas label:hover, #ot-lista-personal label:hover { border-color: #a8c4ac; background: #f0f7ee; transform: translateY(-1px); }
#ot-lista-areas input, #ot-lista-personal input { min-height: 18px !important; }
#buscador-operarios { margin-bottom: 10px !important; }
#contenedor-productos, #ot-campos > section { border-color: #d9e4da !important; border-radius: 13px !important; background: #fbfcf9 !important; }
#contenedor-productos .fila-producto { padding: 12px !important; border: 1px solid #dce7dd; background: #fff !important; border-radius: 10px !important; }
#btn-agregar-producto { background: var(--premium-ink-2) !important; border-radius: 8px !important; }
#ot-imagen-vista { border: 1px solid #d5e2d6; box-shadow: 0 8px 22px rgb(20 47 41 / 10%); }
#btn-cancelar-ot { background: #f1f4ef !important; color: #52665a; border: 1px solid #d5e0d6 !important; }
#btn-guardar-ot { background: linear-gradient(135deg, #285f4e, #173f34) !important; min-height: 44px; }
#form-nueva-tarea, #form-nueva-area { padding: 24px; border: 1px solid #d9e4da; border-radius: 14px; background: linear-gradient(145deg, #fffefa, #f8fbf7); box-shadow: 0 10px 30px rgb(24 57 44 / 7%); }
#form-nueva-tarea .form-grid, #form-nueva-area .form-grid { padding: 18px; border: 1px solid #e0e9df; border-radius: 12px; background: #fbfcf9; }
#form-nueva-tarea .lista-personal-simple { max-height: 230px !important; padding: 12px !important; border-color: #d6e2d7; background: #f8fbf7; }
#form-nueva-tarea .lista-personal-simple label { padding: 9px 10px; border-radius: 8px; }
@media (max-width: 640px) {
  #modal-ot { margin: 8px; }
  #form-crear-ot { padding: 0; }
  #ot-campos > div:first-child { padding: 14px; }
  #ot-lista-areas, #ot-lista-personal { grid-template-columns: 1fr; max-height: 220px !important; }
  .lista-areas-tarea { grid-template-columns: 1fr; max-height: 230px; }
  #ot-campos > section > div:first-child { align-items: stretch !important; }
  #ot-campos > section > div:first-child button { width: 100%; }
  #ot-campos > fieldset > div:last-child, #ot-campos > div:last-child { flex-direction: column; }
  #ot-campos > div:last-child .btn { width: 100%; }
  #form-nueva-tarea, #form-nueva-area { padding: 16px; }
}
@media (max-width: 640px) {
  .modal-resumen-overlay { align-items: flex-end; padding: 0; }
  .modal-resumen { max-height: 92vh; padding: 24px 16px 18px; border-radius: 20px 20px 0 0; }
  .modal-resumen-encabezado h2 { font-size: 26px; }
  .modal-resumen-metricas { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .modal-resumen-metrica--avance { grid-column: 1 / -1; }
  .modal-resumen-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .modal-resumen .tabla-scroll { margin-inline: -4px; }
}