:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#1e293b;background:#f2f5fa}*{box-sizing:border-box}body{margin:0}header{background:#14243a;color:white;padding:18px max(20px,calc((100% - 1180px)/2));display:flex;justify-content:space-between;align-items:center}header b{font-size:21px}header small{display:block;color:#b9c8da;font-size:10px;letter-spacing:1px;margin-top:3px}main{max-width:1180px;margin:25px auto;padding:0 18px}.card{background:white;border:1px solid #e1e7f0;border-radius:12px;padding:22px;margin-bottom:16px;box-shadow:0 4px 14px #1e293b08}h1{font-size:19px;margin:0 0 5px}h2{font-size:15px;margin:0 0 14px}p{color:#64748b;font-size:13px;margin:4px 0 18px}.login{max-width:420px;margin:8vh auto}.login label{display:block;margin:13px 0}label{font-size:12px;font-weight:650;color:#475569}input,select,textarea{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #cbd5e1;border-radius:7px;background:white;font:inherit;color:#1e293b}button{border:0;background:#2563eb;color:white;padding:10px 15px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary,.ghost{background:#eaf0f7;color:#334155}nav{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}nav button.active{background:#14243a;color:white}.ghost{margin-left:auto}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.wide{grid-column:1/-1}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.heading input{max-width:170px}.filters{display:flex;gap:10px;margin:12px 0}.filters select{max-width:220px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:780px}td,th{text-align:left;padding:11px;border-bottom:1px solid #e8edf4;font-size:12px}th{background:#f8fafc;color:#64748b}.pill{padding:4px 8px;border-radius:20px;font-size:10px;font-weight:800}.Crítica{background:#fee2e2;color:#991b1b}.Alta{background:#ffedd5;color:#9a3412}.Media{background:#fef3c7;color:#92400e}.Baja{background:#dcfce7;color:#166534}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.kpi{background:white;border:1px solid #e1e7f0;border-radius:10px;padding:17px}.kpi b{display:block;font-size:26px}.kpi span{font-size:12px;color:#64748b}.charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.bar{display:grid;grid-template-columns:145px 1fr 25px;gap:8px;align-items:center;margin:12px 0;font-size:12px}.track{height:9px;background:#edf2f7;border-radius:10px;overflow:hidden}.fill{height:100%;background:#2563eb}.error{color:#b91c1c}.success{color:#15803d;font-size:12px;margin-left:10px}@media(max-width:700px){.grid,.charts{grid-template-columns:1fr}.wide{grid-column:auto}.kpis{grid-template-columns:1fr 1fr}.ghost{margin-left:0}.heading{align-items:flex-start;flex-direction:column}}

.pill.Cerrado{background:#e2e8f0;color:#334155}

.responseItem{border:1px solid #dbe4ef;border-radius:9px;padding:14px;margin:12px 0;background:#f8fafc}.responseHead{display:flex;justify-content:space-between;gap:12px;color:#1d4ed8;font-size:12px}.responseItem p{white-space:pre-wrap;margin:12px 0;color:#334155;line-height:1.5}.responseItem small{color:#64748b}

.brand{display:flex;align-items:center;gap:12px}.brand img{max-width:150px;max-height:54px;object-fit:contain;background:#fff;padding:4px;border-radius:5px}.headerTools{display:flex;align-items:center;gap:16px}.logoPicker{color:#dbeafe;border:1px solid #64748b;border-radius:6px;padding:7px 10px;cursor:pointer;font-size:12px}.danger{background:#fee2e2;color:#991b1b;padding:7px 9px;margin-left:5px;font-size:11px}.ticketDetail{margin-top:20px;border-top:4px solid #2563eb}.pill[class*="Emergente"]{background:#fee2e2;color:#991b1b}.pill[class*="Crítico"]{background:#ffedd5;color:#9a3412}.pill[class*="Mayor"]{background:#fef3c7;color:#92400e}.pill[class*="Menor"]{background:#dcfce7;color:#166534}.pill[class*="Consulta"]{background:#e0e7ff;color:#3730a3}@media(max-width:700px){header{align-items:flex-start;gap:10px;flex-direction:column}.headerTools{flex-wrap:wrap}.brand img{max-width:100px}}

.notificationToggle{background:#173b63;color:#fff;border:0;border-radius:8px;padding:9px 12px;cursor:pointer}.notificationToggle span{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;border-radius:20px;background:#e5484d;color:#fff;margin-left:5px;font-size:12px}.notificationPanel{position:absolute;right:18px;top:76px;z-index:20;width:min(430px,calc(100vw - 36px));max-height:70vh;overflow:auto;background:#fff;border:1px solid #d8e0ea;border-radius:12px;box-shadow:0 12px 35px #172b4d30;padding:14px}.notificationItem{border-bottom:1px solid #e8edf3}.notificationItem.read{opacity:.62}.notificationLink{display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;background:transparent;color:#182638;padding:12px 5px;border:0}.notificationLink span{font-size:13px;font-weight:400}.notificationLink small{font-size:11px;color:#68778a}



/* =========================================
   SMEC - NUEVOS CONTROLES
   ========================================= */

/* Selectores de selección múltiple */
.multiSelect {
  position: relative;
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
}

.multiSelect summary {
  display: block;
  width: 100%;
  min-height: 39px;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  font-weight: 400;
  list-style: none;
}

.multiSelect summary::-webkit-details-marker {
  display: none;
}

.multiSelect summary::after {
  content: "▾";
  float: right;
  color: #64748b;
}

.multiSelect[open] summary {
  border-color: #2563eb;
}

.multiOptions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 15;
  max-height: 260px;
  overflow-y: auto;
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 20px #1e293b20;
}

.multiOptions label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 2px;
  cursor: pointer;
  font-weight: 400;
  font-size: 12px;
  color: #334155;
}

.multiOptions input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2563eb;
  cursor: pointer;
}

/* Tabla de tickets */
.tablewrap table {
  min-width: 1150px;
}

.tablewrap td {
  vertical-align: top;
  line-height: 1.5;
}

.tablewrap td small {
  color: #64748b;
  font-size: 11px;
}

.tablewrap td button {
  margin: 2px 0;
  white-space: nowrap;
}

.tablewrap td select {
  min-width: 145px;
  font-size: 11px;
  padding: 8px;
}

/* Dashboard */
.charts > .card {
  min-width: 0;
}

.bar {
  overflow-wrap: anywhere;
}

/* Mensajes de formulario */
#formMessage,
#responseMessage {
  display: inline-block;
  margin: 10px 0 0 10px;
  font-size: 12px;
}

#detailMeta {
  line-height: 1.8;
}

/* Adaptación para pantallas pequeñas */
@media(max-width:700px) {
  .multiOptions {
    max-height: 220px;
  }

  .filters {
    flex-direction: column;
  }

  .filters select {
    max-width: none;
  }

  .tablewrap table {
    min-width: 1150px;
  }

  .kpis {
    grid-template-columns: 1fr 1fr;
  }
}


.automaticDate { background: var(--surface, #f3f6fa); padding: 12px 14px; border-radius: 8px; font-size: .92rem; }

/* Administración de usuarios */
#usersAdmin .tablewrap { margin-top: 16px; }
#usersAdmin .tablewrap table { min-width: 540px; }
#userAdminMessage.success { color: #13734a; font-weight: 600; }
#userAdminMessage.error { color: #b42318; font-weight: 600; }

.multiFieldLabel{display:block;font-size:12px;font-weight:650;color:#475569}
.multiSelect summary:focus-visible{outline:2px solid #2563eb;outline-offset:2px}

#usersAdmin button.deleteUserButton { background: #b42318; color: white; padding: 7px 12px; border: 0; border-radius: 6px; cursor: pointer; }
#usersAdmin button.deleteUserButton:hover { background: #8f1c13; }
#usersAdmin button.deleteUserButton:disabled { opacity: .5; cursor: wait; }

/* SMEC 0.9: vista dividida de tickets */
#tickets { min-width:0; }
.ticketWorkspace { display:grid; grid-template-columns:minmax(270px, 35%) minmax(0,1fr); gap:18px; align-items:start; margin-top:16px; }
.ticketListPane,.ticketDetailPane { border:1px solid #dce3ed; border-radius:12px; background:#fff; min-width:0; }
.ticketListPane { overflow:hidden; }
.ticketListHeading { display:flex; justify-content:space-between; gap:8px; padding:14px 16px; background:#f4f7fb; border-bottom:1px solid #dce3ed; font-size:13px; }
.ticketList { max-height:72vh; overflow:auto; }
.ticketListItem { display:block; width:100%; border:0; border-bottom:1px solid #e6ebf2; border-left:4px solid transparent; border-radius:0; background:white; padding:13px 12px; color:#1e293b; text-align:left; cursor:pointer; }
.ticketListItem:hover { background:#f5f9ff; }
.ticketListItem.selected { background:#eaf3ff; border-left-color:#2563eb; }
.ticketItemTop,.ticketItemFoot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ticketItemTop { font-size:13px; }
.ticketItemStatus { color:#475569; font-size:11px; }
.ticketItemTitle { display:block; font-weight:600; font-size:13px; margin:7px 0 4px; overflow-wrap:anywhere; }
.ticketItemCustomer { display:block; color:#64748b; font-size:12px; overflow-wrap:anywhere; }
.ticketItemFoot { margin-top:10px; color:#64748b; font-size:11px; flex-wrap:wrap; }
.ticketDetailPane { padding:18px; min-height:280px; }
.ticketEmpty { padding:30px 16px; text-align:center; color:#64748b; }
.detailHeading { align-items:start; }
.detailHeading h2 { overflow-wrap:anywhere; }
.detailActions { display:flex; gap:8px; flex-wrap:wrap; }
.detailMeta { padding:12px 14px; background:#f5f8fc; border-radius:8px; overflow-wrap:anywhere; font-size:13px; }
.ticketEditForm { border-top:1px solid #e2e8f0; margin-top:16px; padding-top:14px; }
.ticketEditGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.ticketEditGrid label:last-child { grid-column:1/-1; }
.ticketEditGrid select { width:100%; }
#responseHistory { margin-top:18px; }
#responseForm { border-top:1px solid #e2e8f0; padding-top:16px; }
@media(max-width:900px) { .ticketWorkspace { grid-template-columns:1fr; } .ticketList { max-height:320px; } .ticketEditGrid { grid-template-columns:1fr; } }

/* SMEC 0.9: historial bajo el ticket creado, plegable */
.ticketHistoryPanel { margin: 14px 0 18px; border: 1px solid #dbe4ef; border-radius: 10px; background: #fff; overflow: hidden; }
.ticketHistoryPanel > summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; padding:14px 16px; font-weight:700; color:#1e3a5f; background:#f5f8fc; list-style:none; }
.ticketHistoryPanel > summary::-webkit-details-marker { display:none; }
.ticketHistoryPanel > summary::before { content:'▸'; margin-right:5px; color:#2563eb; }
.ticketHistoryPanel[open] > summary::before { content:'▾'; }
.ticketHistoryCount { margin-left:auto; font-weight:500; font-size:12px; color:#64748b; white-space:nowrap; }
.ticketHistoryBody { padding:4px 14px 14px; }
.ticketHistoryBody .responseItem { margin:12px 0; }
#responseHistory.ticketHistoryBody { margin-top:0; }

/* Dashboard SMEC: indicadores legibles en distintos anchos */
#dashboard .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
#dashboard .kpi{min-width:0;border-top:3px solid #2563eb}
#dashboard .kpi span{display:block;margin-top:5px;line-height:1.4}
#dashboard .dashboard-note{font-size:12px;color:#475569;padding:12px 18px}
#dashboard .bar{grid-template-columns:minmax(110px,145px) minmax(50px,1fr) 32px}
#dashboard .bar span{overflow-wrap:anywhere}
@media(max-width:850px){#dashboard .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){#dashboard .kpis{grid-template-columns:1fr 1fr}#dashboard .charts{grid-template-columns:1fr}}