/* ============================================================
   modules/tic.css - Módulo TIC: inventario de equipos, mesa de ayuda
   (solicitudes de soporte) y gestión de cambios.
   Patrón: lista a la izquierda + ficha/detalle a la derecha (igual que
   Novedades/OIT). Tablas, KPIs y semáforos usan los componentes globales.
   ============================================================ */

/* Color propio de TIC sin token oficial: valor claro (el de siempre) y su par para el modo
   oscuro. Todo lo demás del módulo usa los tokens de tokens.css. */
:root, body {
  --tic-casilla: #b8c2d8;   /* borde de la casilla del checklist sin marcar */
}
:root[data-scheme="oscuro"],
:root[data-scheme="oscuro"] body {
  --tic-casilla: #4a5b7e;
}

/* ---- Filtro por tipo de equipo: fila de sem-chip (sem-azul = elegido) ---- */
.tic-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.tic-chips .sem-chip { text-decoration: none; }
.tic-chips .sem-chip b { font-weight: 700; opacity: .7; }

/* La barra de filtros de las listas es la estándar (.filter-bar, components/tables.css). */
/* Formulario en una línea dentro de la ficha (p. ej. agregar accesorio). */
.tic-fila-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
/* Botón al final de la fila de tarjetas de resumen. */
.tic-resumen-accion { display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }

/* ---- Lista + ficha ---- */
.tic-split { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .tic-split { grid-template-columns: 1fr; } }
.tic-lista { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tic-lista-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tic-lista-body { max-height: calc(100vh - 300px); min-height: 280px; overflow-y: auto; }
.tic-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: .6rem .8rem; border-bottom: 1px solid var(--row-line); color: var(--text); text-decoration: none; }
.tic-item:hover { background: var(--surface-2); }
.tic-item.sel { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--primary); }
.tic-item-main { flex: 1 1 auto; min-width: 0; }
.tic-item-top { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.tic-item-code { font-weight: 700; font-size: var(--text-md); }
.tic-item-sub { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tic-item-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--soft-blue); color: var(--primary); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .03em;
}
.tic-vacio { padding: 1.2rem; color: var(--muted); font-size: var(--text-md); }
.tic-lista > .pager-box > .pager { margin: 0; padding: .45rem .8rem; border-top: 1px solid var(--line); font-size: var(--text-xs); }

.tic-ficha { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); min-width: 0; }
.tic-ficha-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap; }
.tic-ficha-head h2 { margin: 0; font-size: var(--text-xl); }
.tic-ficha-head p { margin: .2rem 0 0; color: var(--muted); font-size: var(--text-md); }
.tic-acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tic-acciones form { display: inline; }
.tic-secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.tic-seccion h3 { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.tic-dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; font-size: var(--text-md); }
.tic-dl dt { color: var(--muted); }
.tic-dl dd { margin: 0; font-weight: 400; overflow-wrap: anywhere; }

/* ---- Hoja de vida / conversación (línea de tiempo) ---- */
.tic-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tic-timeline li { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-2); font-size: var(--text-sm); padding: .45rem .6rem; border: 1px solid var(--row-line); border-radius: var(--radius-sm); }
.tic-timeline .t-fecha { color: var(--muted); font-size: var(--text-xs); }
.tic-timeline .t-tipo { font-weight: 800; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }

.tic-chat { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.tic-msg { max-width: 86%; padding: .55rem .8rem; border-radius: var(--radius-md); background: var(--surface-3); font-size: var(--text-md); white-space: pre-wrap; overflow-wrap: anywhere; }
.tic-msg.tic { align-self: flex-end; background: var(--table-head); }
.tic-msg.interno { align-self: flex-end; background: var(--sem-amarillo-bg); border: 1px dashed #ca8a04; }
.tic-msg .m-meta { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: .2rem; white-space: normal; }
.tic-evento { align-self: center; font-size: var(--text-xs); color: var(--muted); background: var(--card); border: 1px solid var(--row-line); border-radius: var(--radius-pill); padding: .15rem .7rem; }
.tic-responder textarea { width: 100%; min-height: 3.4rem; box-sizing: border-box; font-size: var(--text-sm); }
.tic-responder .fila { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: flex-end; margin-top: .4rem; }
/* Controles compactos en una sola línea (las reglas globales ponen los campos a todo el ancho). */
.tic-responder .fila select { width: auto !important; flex: none; height: 32px; padding: 0 .5rem; font-size: var(--text-sm); }
.tic-responder .fila small { margin-right: auto; font-size: var(--text-xs); }
.tic-check { display: inline-flex !important; align-items: center; gap: .35rem; margin: 0 auto 0 0 !important; font-size: var(--text-sm); white-space: nowrap; color: var(--text-2); }
.tic-check input { width: auto !important; margin: 0; }
.tic-cierre { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }

/* Ficha de la solicitud: conversación a la izquierda, clasificación angosta a la derecha. */
.tic-ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--space-4) var(--space-5); margin-top: var(--space-4); align-items: start; }
.tic-sub { margin: 0 0 .35rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.tic-sub span { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
.tic-reporte { margin: 0 0 .9rem; white-space: pre-wrap; font-size: var(--text-md); }
.tic-ficha-main .tic-chat { margin: .3rem 0 .6rem; }
.tic-clasif { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.tic-clasif label { margin: .35rem 0 0; font-size: var(--text-xs); font-weight: 700; color: var(--text-2); }
.tic-clasif select { width: 100%; height: 32px; padding: 0 .5rem; font-size: var(--text-sm); }
.tic-clasif-pie { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .6rem; }
.tic-clasif-pie .muted { margin-right: auto; font-size: var(--text-xs); }
@media (max-width: 900px) { .tic-ficha-cuerpo { grid-template-columns: 1fr; } }

/* ---- Formularios en modal ----
   Los campos son el estándar (.form-grid > .form-field, components/forms.css). Aquí solo
   la maquetación propia: títulos de sección dentro de la rejilla y la fila contraseña + Generar. */
.tic-form-sec { grid-column: 1 / -1; margin: var(--space-2) 0 0; padding-top: var(--space-2); border-top: 1px solid var(--line); font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); }
.tic-form-sec .ayuda { font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.tic-secreto-fila { display: flex; gap: var(--space-2); }

/* ---- Gestión de cambios (checklist) ----
   Los botones llevan .icon-btn para quedar fuera del estilo global de botones (tables.css). */
.tic-cambios { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .tic-cambios { grid-template-columns: 1fr; } }
.tic-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.tic-col-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.tic-col-head h2 { margin: 0; font-size: var(--text-lg); }
.tic-mes { padding: .45rem .9rem; background: var(--surface-2); font-size: var(--text-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--row-line); }
.tic-check { display: flex; gap: var(--space-3); align-items: flex-start; padding: .6rem .9rem; border-bottom: 1px solid var(--row-line); }
.tic-check form { margin: 0; }
.tic-check-box {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: .1rem; padding: 0;
  border: 2px solid var(--tic-casilla); border-radius: 6px; background: var(--card); cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: var(--text-sm); font-weight: 700; min-height: 0;
}
.tic-check-box:hover { border-color: var(--primary); }
.tic-check-box.hecho { background: #16a34a; border-color: #16a34a; }
.tic-check-main { flex: 1 1 auto; min-width: 0; }
.tic-check-titulo { background: none; border: 0; padding: 0; min-height: 0; text-align: left; font: inherit; font-weight: 700; color: var(--text); cursor: pointer; }
.tic-check-titulo:hover { color: var(--primary); text-decoration: underline; }
.tic-check.hecho .tic-check-titulo { color: var(--muted); }
.tic-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; font-size: var(--text-xs); }

/* ---- Formulario del equipo: ficha por tipo, casillas múltiples y desplegable ----
   El JS de inventario.html oculta (hidden) los .form-field que no aplican al tipo de equipo;
   .checkbox-field trae display:flex, por eso se fuerza aquí. */
[data-equipo-form] .form-field[hidden] { display: none; }
.tic-opciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.tic-opciones label { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card); font-size: var(--text-sm); font-weight: 600; color: var(--text); cursor: pointer; }
.tic-opciones label:has(input:checked) { border-color: var(--primary); background: var(--soft-blue); color: var(--primary); }
.tic-opciones input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--primary); }
.tic-desplegable { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); }
.tic-desplegable > summary { cursor: pointer; padding: .7rem .9rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--primary); list-style: none; display: flex; align-items: center; gap: .5rem; }
.tic-desplegable > summary::-webkit-details-marker { display: none; }
.tic-desplegable > summary::before { content: ''; width: 7px; height: 7px; border-style: solid; border-width: 0 2px 2px 0; border-color: currentColor; transform: rotate(-45deg); transition: transform .15s; }
.tic-desplegable[open] > summary::before { transform: rotate(45deg); }
.tic-desplegable > summary .ayuda { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); }
.tic-desplegable > .form-grid { padding: 0 .9rem .9rem; margin-bottom: 0; }

/* Interruptor del Panel de TIC: Panel | Solicitudes de soporte (templates/tic/_interruptor_soporte.html). */
.tic-interruptor{display:inline-flex;gap:3px;padding:3px;margin:0 0 .8rem;background:var(--surface-3);border-radius:var(--radius-md)}
.tic-interruptor a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:calc(var(--radius-md) - 2px);font-size:var(--text-sm);font-weight:700;color:var(--text-2);text-decoration:none}
.tic-interruptor a.on{background:var(--card);color:var(--primary);box-shadow:var(--shadow-sm)}
.tic-interruptor b{min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--danger);color:var(--on-primary);font-size:var(--text-2xs);line-height:18px;text-align:center}