*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#1f2937;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}.container{width:min(760px,calc(100% - 32px));margin:40px auto}.card{background:#fff;border-radius:14px;padding:30px;box-shadow:0 4px 18px #00000014}.hidden{display:none!important}h1{margin:0 0 8px;font-size:25px}.muted{color:#6b7280;margin-top:0}.header{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:25px}form{display:grid;gap:9px}label{font-weight:600;margin-top:8px}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}input:focus,select:focus,textarea:focus{outline:2px solid #93c5fd}input[readonly]{background:#f1f5f9}button{margin-top:18px;padding:12px 18px;border:0;border-radius:8px;background:#16a34a;color:#fff;font-weight:700;cursor:pointer}button:disabled{opacity:.6;cursor:wait}button.secondary{margin-top:0;background:#64748b;font-weight:600}.two{display:grid;grid-template-columns:1fr 1fr;gap:25px}.time{display:flex;align-items:center;gap:8px}.time input{width:90px}.message{margin-top:18px;padding:12px;border-radius:8px;display:none;white-space:pre-wrap}.message.success,.message.error{display:block}.message.success{background:#dcfce7;color:#166534}.message.error{background:#fee2e2;color:#991b1b}.info{padding:10px 12px;border-radius:8px;background:#eff6ff;color:#1e40af;font-size:14px}@media(max-width:650px){.two{grid-template-columns:1fr;gap:8px}.header{flex-direction:column}.card{padding:22px}}



                             .headerButtons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lista {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.listaItem {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.listaItem span {
    color: #64748b;
    font-size: 14px;
}

.listaItem small {
    color: #475569;
}

.subtareasInformativas {
    margin: -2px 0 8px;
    padding: 9px 11px;
    border-left: 3px solid #cbd5e1;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
}

.subtareasInformativas #tituloLista {
    display: block;
    margin-bottom: 5px;
}

.subtareasInformativas .lista {
    gap: 4px;
}

.subtareasInformativas .listaItem {
    padding: 6px 8px;
    font-size: 13px;
}

.subtareasInformativas .listaItem span,
.subtareasInformativas .listaItem small {
    font-size: 12px;
}

.campoContenedor {
    position: relative;
}

.campoFiltro {
    cursor: pointer;
}

.filtroActivo .campoFiltro {
    background: #dbeafe;
    border-color: #60a5fa;
}

.quitarFiltro {
    display: none;
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    background: #2563eb;
    font-size: 20px;
    line-height: 24px;
}

.popupFiltros {
    position: absolute;
    z-index: 20;
    max-height: 260px;
    overflow: auto;
    padding: 5px;
    border: 1px solid #93c5fd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 20px #00000022;
}

.popupFiltros button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border-radius: 5px;
    background: transparent;
    color: #1f2937;
    text-align: left;
    font-weight: 400;
}

.popupFiltros button:hover {
    background: #dbeafe;
}

hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 28px 0;
}

h2 {
    font-size: 18px;
    margin-bottom: 10px;
}

.modelosList {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.modeloItem {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
}

.modeloItem input {
    width: auto;
}

.subtareasList {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.subtareaCard {
    padding: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.subtareaTitulo {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
}

.subtareaTitulo input {
    width: auto;
    margin-top: 4px;
}

.subtareaAta {
    display: block;
    margin: 8px 0 3px;
    color: #475569;
    font-size: 14px;
}

.subtareaModelo {
    display: block;
    margin: 0 0 8px;
    color: #475569;
    font-size: 14px;
}

.subtareaDatos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.subtareaDatos label {
    margin-top: 0;
    font-size: 14px;
}

.subtareaDatos .time input {
    width: 72px;
}

.formGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.formGridThree {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.formGrid > div {
    display: grid;
    gap: 9px;
}

.filterGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 18px;
}

@media(max-width:650px){
    .subtareaDatos,.formGrid,.formGridThree,.filterGrid{grid-template-columns:1fr}
}