/* ISHITO · Costos (15/10/2026). Alcance: #ixCostos */
#ixCostos { padding: 24px; max-width: 1480px; margin: 0 auto; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #15233D; }
#ixCostos * { box-sizing: border-box; }
#ixCostos .ix-co-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: #0A2A5E; border-radius: 18px; padding: 24px 28px; margin-bottom: 14px; }
#ixCostos .ix-co-head h2 { margin: 0; color: #FFFFFF !important; font-size: 26px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
#ixCostos .ix-co-head h2 i { width: 42px; height: 42px; border-radius: 12px; background: #F58220; color: #0A2A5E; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
#ixCostos .ix-co-head p { margin: 6px 0 0 54px; color: #C7D4EE; font-size: 14px; }
#ixCostos .ix-co-acc { display: flex; gap: 8px; flex-wrap: wrap; }
#ixCostos .ix-co-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #FFFFFF; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
#ixCostos .ix-co-btn:hover { background: rgba(255,255,255,.16); }
#ixCostos .ix-co-btn.claro { background: #FFFFFF; color: #0A2A5E; border-color: #FFFFFF; }

#ixCostos .ix-co-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 14px; }
#ixCostos .ix-co-kpi { display: flex; gap: 12px; align-items: flex-start; background: #FFFFFF; border: 1px solid #E3E9F3; border-radius: 14px; padding: 16px; }
#ixCostos .ix-co-kpi > i { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: #E8EEF8; color: #0E4AA4; font-size: 16px; }
#ixCostos .ix-co-kpi.tc > i { background: #FDEBDB; color: #C2610F; }
#ixCostos .ix-co-kpi.alerta > i { background: #FDECEA; color: #B42318; }
#ixCostos .ix-co-kpi.ok > i { background: #E7F4EC; color: #146C43; }
#ixCostos .ix-co-kpi > div { flex: 1; min-width: 0; }
#ixCostos .ix-co-kpi span { display: block; font-size: 12px; font-weight: 700; color: #5B6B86; text-transform: uppercase; letter-spacing: .03em; }
#ixCostos .ix-co-kpi b { display: block; font-size: 22px; font-weight: 800; color: #0A2A5E; margin: 2px 0; }
#ixCostos .ix-co-kpi b em { font-style: normal; font-size: 13px; color: #6B7A93; font-weight: 600; }
#ixCostos .ix-co-kpi small { display: block; font-size: 12px; color: #6B7A93; }
#ixCostos .ix-co-mini { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #D5DDEA; background: #F5F8FC; color: #0A2A5E; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
#ixCostos .ix-co-mini.prim { background: #0E4AA4; color: #FFFFFF; border-color: #0E4AA4; margin-top: 0; }
#ixCostos .ix-co-tcform { display: flex; gap: 6px; margin-top: 8px; }
#ixCostos .ix-co-tcform input { width: 110px; height: 30px; border: 1px solid #D5DDEA; border-radius: 8px; padding: 0 8px; font: inherit; font-size: 13px; }
#ixCostos [hidden] { display: none !important; }

#ixCostos .ix-co-tabs { display: flex; gap: 6px; flex-wrap: wrap; background: #FFFFFF; border: 1px solid #E3E9F3; border-radius: 14px; padding: 6px; margin-bottom: 14px; }
#ixCostos .ix-co-tabs button { flex: 1 1 180px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 0; border-radius: 10px; background: transparent; color: #3A4A66; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
#ixCostos .ix-co-tabs button:hover { background: #F3F6FB; }
#ixCostos .ix-co-tabs button.on { background: #0E4AA4; color: #FFFFFF; box-shadow: 0 6px 14px rgba(14,74,164,.22); }

#ixCostos .ix-co-card { background: #FFFFFF; border: 1px solid #E3E9F3; border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; }
#ixCostos .ix-co-card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
#ixCostos .ix-co-card-h h3 { margin: 0; font-size: 16px; font-weight: 800; color: #0A2A5E; display: flex; align-items: center; gap: 8px; }
#ixCostos .ix-co-card-h h3 i { color: #F58220; }
#ixCostos .ix-co-card-h > span { font-size: 12px; color: #6B7A93; }
#ixCostos .ix-co-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #E7F4EC; border: 1px solid #146C43; margin-right: 4px; vertical-align: -1px; }

#ixCostos .ix-co-barra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
#ixCostos .ix-co-chips { display: flex; gap: 6px; flex-wrap: wrap; }
#ixCostos .ix-co-chips button { height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #D5DDEA; background: #FFFFFF; color: #3A4A66; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
#ixCostos .ix-co-chips button em { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #EEF2F7; color: #5B6B86; font-size: 11px; }
#ixCostos .ix-co-chips button.on { background: #0A2A5E; border-color: #0A2A5E; color: #FFFFFF; }
#ixCostos .ix-co-chips button.on em { background: #F58220; color: #0A2A5E; }
#ixCostos .ix-co-chips button.inactiva { opacity: .55; }
#ixCostos .ix-co-herr { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
#ixCostos .ix-co-buscar { position: relative; flex: 1 1 240px; }
#ixCostos .ix-co-buscar i { position: absolute; left: 12px; top: 12px; color: #8A97AD; font-size: 13px; }
#ixCostos .ix-co-buscar input { width: 100%; height: 38px; border: 1px solid #D5DDEA; border-radius: 10px; padding: 0 12px 0 34px; font: inherit; font-size: 14px; }
#ixCostos .ix-co-chipbtn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid #D5DDEA; background: #F5F8FC; color: #0A2A5E; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
#ixCostos .ix-co-chipbtn:hover { border-color: #0E4AA4; }
#ixCostos .ix-co-chipbtn.on { background: #FFF4E8; border-color: #F58220; color: #9A4A08; }
#ixCostos .ix-co-chipbtn.prim { background: #F58220; border-color: #F58220; color: #FFFFFF; }
#ixCostos .ix-co-nuevo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: #F7F9FC; border: 1px dashed #C9D3E3; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
#ixCostos .ix-co-nuevo label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: #5B6B86; text-transform: uppercase; letter-spacing: .03em; }
#ixCostos .ix-co-nuevo label.ancho { flex: 1 1 260px; }
#ixCostos .ix-co-nuevo input, #ixCostos .ix-co-nuevo select { height: 38px; border: 1px solid #D5DDEA; border-radius: 9px; padding: 0 10px; font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; font-weight: 600; color: #15233D; background: #FFFFFF; min-width: 140px; }
#ixCostos .ix-co-nota { font-size: 13px; color: #9A4A08; background: #FFF4E8; border: 1px solid #F7C99B; border-radius: 10px; padding: 9px 12px; margin-bottom: 10px; }

#ixCostos .ix-co-scroll { overflow-x: auto; }
#ixCostos .ix-co-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#ixCostos .ix-co-tabla thead th { background: #F3F6FB !important; color: #0A2A5E !important; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 10px; border-bottom: 1px solid #DCE3EE; text-align: left; white-space: nowrap; }
#ixCostos .ix-co-tabla td { padding: 9px 10px; border-bottom: 1px solid #EEF2F7; vertical-align: middle; color: #15233D; background: #FFFFFF; }
#ixCostos .ix-co-tabla tbody tr:hover td { background: #F8FAFD; }
#ixCostos .ix-co-tabla tr.grupo td { background: #F7F9FC !important; font-weight: 800; color: #0A2A5E; font-size: 13px; padding-top: 12px; }
#ixCostos .ix-co-tabla tr.sin-aud td { background: #FFFBF7; }
#ixCostos .n { text-align: right; white-space: nowrap; }
#ixCostos .nw { white-space: nowrap; }
#ixCostos .mut { color: #6B7A93; }
#ixCostos .roj { color: #B42318 !important; }
#ixCostos .ix-co-av { width: 26px; height: 26px; border-radius: 50%; background: #FDEBDB; color: #B85A0E; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; margin-right: 8px; vertical-align: middle; }
#ixCostos .ix-co-av.grande { width: 42px; height: 42px; font-size: 14px; margin: 0; flex: 0 0 42px; }
#ixCostos .ix-co-falta { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #FDECEA; color: #B42318; font-size: 11px; font-weight: 800; }
#ixCostos .ix-co-pct { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #E7F4EC; color: #146C43; font-size: 11px; font-weight: 800; }
#ixCostos .ix-co-in { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #D5DDEA; border-radius: 8px; padding: 0 8px; background: #FFFDF9; transition: border-color .15s, box-shadow .15s; }
#ixCostos .ix-co-in:focus-within { border-color: #0E4AA4; box-shadow: 0 0 0 3px rgba(14,74,164,.15); }
#ixCostos .ix-co-in.ok { border-color: #146C43; box-shadow: 0 0 0 3px rgba(20,108,67,.18); }
#ixCostos .ix-co-in span { color: #6B7A93; font-size: 12px; }
#ixCostos .ix-co-in input { width: 80px; height: 30px; border: 0; background: transparent; text-align: right; font: inherit; font-weight: 800; color: #0A2A5E; outline: none; -moz-appearance: textfield; }
#ixCostos .ix-co-in input::-webkit-outer-spin-button, #ixCostos .ix-co-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#ixCostos .ix-co-ico { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid #F3C2BD; background: #FFFFFF; color: #B42318; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; }
#ixCostos .ix-co-ico:hover, #ixCostos .ix-co-ico.confirmar { background: #B42318; color: #FFFFFF; }
#ixCostos .ix-co-pie { margin-top: 10px; font-size: 12px; color: #6B7A93; }
#ixCostos .ix-co-vacio { text-align: center; color: #6B7A93; padding: 28px !important; }
#ixCostos .ix-co-link { border: 0; background: transparent; color: #0A2A5E; font: inherit; font-weight: 800; font-size: 11px; text-transform: uppercase; cursor: pointer; padding: 0; }
#ixCostos .ix-co-link:hover { color: #0E4AA4; text-decoration: underline; }

#ixCostos .ix-co-matriz td { text-align: center; min-width: 120px; }
#ixCostos .ix-co-matriz td:first-child { text-align: left; min-width: 170px; }
#ixCostos .ix-co-matriz td small { display: block; font-size: 11px; color: #6B7A93; margin-top: 2px; }
#ixCostos .ix-co-matriz td.mejor { background: #E7F4EC !important; }
#ixCostos .ix-co-matriz td.mejor b { color: #146C43; }
#ixCostos .ix-co-matriz td.vacia { color: #B8C2D3; }

#ixCostos .ix-co-casas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
#ixCostos .ix-co-casa { border: 1px solid #E3E9F3; border-radius: 14px; padding: 14px; background: #FFFFFF; display: flex; flex-direction: column; gap: 12px; }
#ixCostos .ix-co-casa.inactiva { background: #F7F8FA; opacity: .8; }
#ixCostos .ix-co-casa-top { display: flex; gap: 12px; align-items: center; }
#ixCostos .ix-co-casa-top > div { flex: 1; min-width: 0; }
#ixCostos .ix-co-casa-top b { display: block; font-size: 15px; color: #0A2A5E; }
#ixCostos .ix-co-casa-top small { display: block; font-size: 12px; color: #6B7A93; }
#ixCostos .ix-co-estado { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; }
#ixCostos .ix-co-estado.act { background: #E7F4EC; color: #146C43; }
#ixCostos .ix-co-estado.ina { background: #EEF0F4; color: #5B6B86; }
#ixCostos .ix-co-casa-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #F7F9FC; border-radius: 10px; padding: 10px; }
#ixCostos .ix-co-casa-datos span { display: block; font-size: 10.5px; color: #6B7A93; font-weight: 700; text-transform: uppercase; }
#ixCostos .ix-co-casa-datos b { font-size: 15px; color: #0A2A5E; }
#ixCostos .ix-co-casa-ed { display: none; flex-direction: column; gap: 8px; }
#ixCostos .ix-co-casa.editando .ix-co-casa-ed { display: flex; }
#ixCostos .ix-co-casa-ed label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 700; color: #5B6B86; text-transform: uppercase; }
#ixCostos .ix-co-casa-ed input { height: 36px; border: 1px solid #D5DDEA; border-radius: 9px; padding: 0 10px; font: inherit; font-size: 14px; text-transform: none; }
#ixCostos .ix-co-casa-acc { display: flex; gap: 6px; flex-wrap: wrap; }
#ixCostos .ix-co-casa-acc .ix-co-chipbtn { height: 34px; padding: 0 10px; font-size: 12px; }

#ixCostos .ix-co-sim-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 18px; }
#ixCostos .ix-co-sim-form { display: flex; flex-direction: column; gap: 8px; }
#ixCostos .ix-co-sim-form label { font-size: 12px; font-weight: 800; color: #5B6B86; text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }
#ixCostos .ix-co-sim-form label small { text-transform: none; font-weight: 600; letter-spacing: 0; }
#ixCostos .ix-co-sim-form select, #ixCostos .ix-co-sim-form input { height: 40px; border: 1px solid #D5DDEA; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; }
#ixCostos .ix-co-seg { display: flex; background: #F3F6FB; border-radius: 10px; padding: 4px; }
#ixCostos .ix-co-seg button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: #3A4A66; cursor: pointer; }
#ixCostos .ix-co-seg button.on { background: #FFFFFF; color: #0A2A5E; box-shadow: 0 2px 6px rgba(10,42,94,.12); }
#ixCostos .ix-co-sim-normas { display: flex; flex-wrap: wrap; gap: 6px; }
#ixCostos .ix-co-sim-normas button { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #D5DDEA; background: #FFFFFF; font: inherit; font-size: 12px; font-weight: 700; color: #3A4A66; cursor: pointer; }
#ixCostos .ix-co-sim-normas button.on { background: #E8EEF8; border-color: #0E4AA4; color: #0E4AA4; }
#ixCostos .ix-co-sim-res { background: #F7F9FC; border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-self: start; }
#ixCostos .ix-co-sim-linea { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #E6ECF4; }
#ixCostos .ix-co-sim-linea span small { display: block; font-size: 11px; color: #6B7A93; max-width: 320px; }
#ixCostos .ix-co-sim-linea b { white-space: nowrap; color: #0A2A5E; }
#ixCostos .ix-co-sim-linea.sub { font-size: 12px; color: #6B7A93; }
#ixCostos .ix-co-sim-linea.neg b { color: #B42318; }
#ixCostos .ix-co-sim-total { margin-top: 6px; border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; }
#ixCostos .ix-co-sim-total span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
#ixCostos .ix-co-sim-total b { font-size: 24px; font-weight: 800; grid-row: 1 / 3; grid-column: 2; }
#ixCostos .ix-co-sim-total em { font-style: normal; font-size: 13px; font-weight: 700; }
#ixCostos .ix-co-sim-total.ver { background: #E7F4EC; color: #146C43; }
#ixCostos .ix-co-sim-total.nar { background: #FFF4E8; color: #9A4A08; }
#ixCostos .ix-co-sim-total.roj { background: #FDECEA; color: #B42318; }
#ixCostos .ix-co-sim-det { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#ixCostos .ix-co-sim-det span { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: #FFFFFF; border: 1px solid #E3E9F3; color: #3A4A66; }

@media (max-width: 900px) {
  #ixCostos { padding: 14px; }
  #ixCostos .ix-co-head p { margin-left: 0; }
  #ixCostos .ix-co-sim-grid { grid-template-columns: 1fr; }
}
#ixCostos .ix-co-tabs button em { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #E7F4EC; color: #146C43; }
#ixCostos .ix-co-tabs button em:empty { display: none; }
#ixCostos .ix-co-tabs button em.hay { background: #B42318; color: #FFFFFF; }
#ixCostos .ix-co-kpi.clic { cursor: pointer; }
#ixCostos .ix-co-kpi.clic:hover { border-color: #B42318; }
#ixCostos .ix-co-falta.nar { background: #FFF4E8; color: #9A4A08; }
#ixCostos .ix-co-ok { padding: 18px; border-radius: 12px; background: #E7F4EC; color: #146C43; font-weight: 700; }
#ixCostos .ix-co-nota { margin-top: 12px; }