* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, Arial, sans-serif; background: #0b1b3a; color: #e8eefc; }
header { display: flex; justify-content: space-between; align-items: center;
         padding: 12px 20px; background: #08142b; border-bottom: 1px solid #1d3566; }
h1 { margin: 0; font-size: 18px; }
#ultima-actualizacion { font-size: 12px; opacity: .7; }
main { padding: 16px 20px; }
[hidden] { display: none !important; }

.colas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { padding: 7px 14px; border: 1px solid #2a4580; border-radius: 18px; background: transparent;
        color: inherit; cursor: pointer; font-size: .9rem; }
.chip b { margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: #1d3566; }
.chip.activo { background: #1d5fa8; border-color: #1d5fa8; }

.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filtros input, .filtros select, button {
  padding: 8px 10px; border-radius: 6px; border: 1px solid #2a4580;
  background: #11264f; color: inherit; font-size: 14px; }
.filtros input { flex: 1; min-width: 220px; }
button { cursor: pointer; }
button:hover:not(:disabled) { background: #1a3a78; }
button:disabled { opacity: .4; cursor: default; }

.tabla-contenedor { overflow-x: auto; border: 1px solid #1d3566; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 12px; text-align: left; white-space: nowrap; }
th { background: #0f2247; font-weight: 600; }
tbody tr:nth-child(even) { background: #0e2147; }
tbody tr:hover { background: #163064; }
.vacio { text-align: center; opacity: .7; padding: 24px; }

.badge { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge.no_leido { background: #7a1f2b; }
.badge.leido { background: #8a6d12; }
.badge.reportado { background: #1c6b3a; }
.badge.en_proceso { background: #1d5fa8; }
.badge.borrador { background: #8a6d12; }
.badge.en_revision { background: #b7791f; }
.badge.finalizado, .badge.corregido { background: #1c6b3a; }

/* Botones de acción de cada fila */
td.acciones-fila { white-space: nowrap; }
a.abrir { display: inline-block; min-width: 92px; padding: 5px 12px; border-radius: 6px;
          color: #fff; text-align: center; text-decoration: none; font-weight: 600; }
a.abrir.leer     { background: #1f6feb; }
a.abrir.leer:hover { background: #3b82f6; }
a.abrir.dictar   { background: #198754; }
a.abrir.dictar:hover { background: #22a06b; }
a.abrir.revisar  { background: #b7791f; }
a.abrir.revisar:hover { background: #d08a26; }
a.abrir.consulta { background: #4a5878; }
a.abrir.consulta:hover { background: #5d6d92; }
td.acciones-fila a.abrir + a.abrir { margin-left: 22px; position: relative; }
td.acciones-fila a.abrir + a.abrir::before { content: ""; position: absolute; left: -12px; top: 15%;
                                             height: 70%; border-left: 1px solid #3a4f7a; }

.paginacion { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; }
.usuario { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; }
.usuario a { color: inherit; font-size: .9rem; }

dialog { border: 0; border-radius: 10px; padding: 20px; width: min(440px, 92vw);
         background: #11264f; color: #e8eefc; }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin: 0 0 10px; font-size: 1.05rem; }
dialog label { display: block; margin-top: 10px; font-size: .85rem; font-weight: 600; }
dialog select { display: block; width: 100%; margin-top: 4px; padding: 8px; }
dialog label.casilla { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
dialog .botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
dialog .error { margin-top: 10px; padding: 8px; border-radius: 6px; background: #7a1f2b; }
.nota { font-size: .85rem; opacity: .85; margin: 10px 0 0; }
.datos-asignar { font-size: .9rem; line-height: 1.6; }
a.abrir.asignar { background: #8a3ffc; }
a.abrir.asignar:hover { background: #a56eff; }
.sin-entidad { opacity: .65; font-style: italic; }