/* Estilo general */
:root{
  --bg:#f7f4f8; --card:#fff; --muted:#667; --primary:#6a28a5;
  --danger:#c62828; --border:#e3e1e6; --chip:#e9e6ef;
  --green:#0a7d00; --red:#b00020;
  --pazul:#D6E9F8; --projo:#F8D6D6; --pnaranjo:#FFE5CC; --pverde:#DFF2DF; --pmorado:#E6DCF1;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:#222}
.container{max-width:1200px;margin:22px auto;padding:0 14px}
.hidden{display:none!important}
.muted{color:var(--muted)}
.w100{width:100%}
.row{display:flex;align-items:center}
.row.gap{gap:8px}
.row.between{display:flex;justify-content:space-between;align-items:center}
.vstack{display:flex;flex-direction:column;gap:14px}
.sticky{position:sticky;top:86px;z-index:2}

.topbar{display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--border);padding:10px 16px;position:sticky;top:0;z-index:5}
.brand{font-weight:800;letter-spacing:.5px}
.account{display:flex;gap:12px;align-items:center}

.card{background:var(--card);border:1px solid var(--border);padding:14px;border-radius:10px;margin-bottom:16px;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.subcard{background:#fafafa;border:1px solid var(--border);border-radius:10px;padding:10px;margin-top:10px}
.notice{background:#fff3cd;border:1px solid #ffe7a3;color:#8a6d3b;padding:10px;border-radius:8px;margin-bottom:10px;text-transform:uppercase}

label{display:block;margin-top:8px;margin-bottom:4px;color:#444;font-size:.92rem}
input,select,button{font:inherit}
input,select{width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;background:#fff}
input:focus,select:focus{outline:none;border-color:#bba3d4;box-shadow:0 0 0 3px #bba3d433}

.btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 14px;cursor:pointer}
.btn.small{padding:6px 10px}
.btn-outline{background:#fff;color:#333;border:1px solid var(--border)}
.btn-danger{background:var(--danger)}

h1{font-size:1.3rem;margin:0 0 12px}
h2{font-size:1.1rem;margin:0 0 10px}
h3{font-size:1.0rem;margin:0 0 8px}
.w600{max-width:600px;margin:auto}

.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:8px;cursor:pointer}
.tab.active{background:#ece6f6;border-color:#cdb7ef}
.tabpane{display:none}
.tabpane.active{display:block}

.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr auto;gap:10px;align-items:end}
.filters .actions{display:flex;gap:8px}
.fcol{display:flex;flex-direction:column}
@media (max-width:980px){.filters{grid-template-columns:1fr 1fr;gap:8px}}

.grid-2cols{display:flex;flex-direction:column;gap:14px;width:100%;}
@media (max-width:980px){.grid-2cols{flex-direction:column}}

.grid-side{display:flex;flex-direction:column;gap:14px}
.typeList{list-style:none;padding:0;margin:0}
@media (min-width: 992px){
  .typeList{display:flex;flex-wrap:wrap;gap:8px;}
  .typeList li{margin-bottom:0;}
}

.typeList li{padding:8px;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;background:#fff;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.typeList li.active{outline:2px solid #bba3d4}
.typeList li .color{display:inline-block;width:14px;height:14px;border:1px solid #444;border-radius:2px}

.tableWrap{border:1px solid var(--border);border-radius:8px;overflow:auto}
table{width:100%;border-collapse:collapse;background:#fff}
thead th{background:#faf8ff;border-bottom:1px solid var(--border);text-align:left;padding:10px;font-weight:600}
tbody td{padding:10px;border-top:1px solid var(--border);font-size:.95rem}
tbody tr:hover{background:#fbfbfb;cursor:pointer}
tbody tr.selected{outline:2px solid #cdb7ef}
tbody tr.blankrow td{color:#999;background:#fafafa}

.badge{padding:2px 8px;border-radius:14px;font-size:.8rem}
.badge.green{background:#e8f7e8;color:#0a7d00}
.badge.red{background:#fdecec;color:#b00020}

.months{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.month{border:2px solid #c8c8c8;border-radius:8px;height:38px;display:flex;align-items:center;justify-content:center;background:#f3f3f3;font-weight:700;color:#445; user-select:none; text-transform:uppercase}
.month.stripes{border-color:#b3b3b3;color:#fff}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.legend .chip{display:flex;align-items:center;gap:6px;background:#e9e6ef;border-radius:999px;padding:4px 8px;border:1px solid #ddd}
.legend .dot{width:10px;height:10px;border-radius:2px;border:1px solid #555}

.notifList{display:flex;flex-direction:column;gap:10px;max-height:260px;overflow:auto}
.note{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.note .sub{font-weight:600;opacity:.9}
.note.azul{background:#D6E9F8}
.note.rojo{background:#F8D6D6}
.note.naranjo{background:#FFE5CC}
.note.verde{background:#DFF2DF}
.note.morado{background:#E6DCF1}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.modal{background:#fff;border-radius:12px;width:min(1400px,98vw);max-height:90vh;overflow:auto;padding:18px;border:1px solid var(--border);box-shadow:0 18px 60px rgba(0,0,0,.25)}
.modal-lg{min-width:860px}
.modalBody{margin-top:8px}


/* ===== PM MÁQUINA DE ANESTESIA ===== */
.pm-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:70vh;
  overflow-y:auto;
  padding-right:4px;
}
.pm-section{
  border:1px solid #ddd;
  padding:8px;
  border-radius:4px;
  background:#fafafa;
}
.pm-section h4{
  margin-top:0;
  margin-bottom:6px;
  font-size:13px;
}
.pm-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.pm-label{
  flex:1;
  font-size:12px;
}
.pm-options{
  display:flex;
  gap:6px;
  font-size:11px;
  white-space:nowrap;
}
.pm-options label{
  display:flex;
  align-items:center;
  gap:2px;
}
.pm-options input[type="radio"]{
  margin:0;
}

.pm-eq{
  margin-bottom:6px;
}
.pm-eq legend{
  font-weight:bold;
  font-size:11px;
}
.pm-firmas{
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.pm-firma-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.pm-canvas{
  width:100%;
  height:140px;
  border:1px solid #ccc;
  background:#fdfdfd;
  border-radius:4px;
  touch-action:none;
}
.grid-2cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.gap-lg{
  gap:12px;
}



/* === Ajustes responsive para modales y layout === */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:20;
}

.modal{
  background:#fff;
  border-radius:12px;
  width:min(1200px,100vw);
  max-width:100vw;
  max-height:90vh;
  padding:18px;
  border:1px solid var(--border);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:auto;
}

.modal-lg{
  width:min(1200px,100vw);
  max-width:100vw;
  min-width:0;
}

.modalBody{
  margin-top:8px;
}

/* Pautas PM: que las columnas se adapten en pantallas pequeñas */
@media (max-width:900px){
  .modal{
    width:100vw;
    height:100vh;
    max-height:100vh;
    border-radius:0;
    padding:14px;
  }
  .modalBody{
    max-height:calc(100vh - 70px);
    overflow:auto;
  }
  .pm-firmas{
    flex-direction:column;
  }
}

/* === Calendario EQUIPOS responsive === */
/* Tablet / pantallas medias */
@media (max-width: 768px) {
  /* Calendarios principal (EQUIPOS) y PLAN POR TIPO (CALENDARIO) */
  #calendarMain.months,
  #calendarType.months {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columnas en vez de 4 */
    gap: 6px;
  }

  #calendarMain .month,
  #calendarType .month {
    height: 32px;          /* un poco más bajo */
    font-size: 0.75rem;    /* texto más pequeño */
    padding: 0 4px;
  }
}

/* Celulares pequeños */
@media (max-width: 480px) {
  #calendarMain.months,
  #calendarType.months {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas en pantallas muy chicas */
    gap: 6px;
  }

  #calendarMain .month,
  #calendarType .month {
    height: 30px;
    font-size: 0.7rem;
  }
}

#legendType{display:none!important;}

#btnDelete{display:none!important;}

#assetFormCard{
  position:fixed;
  top:40px;
  left:50%;
  transform:translateX(-50%);
  z-index:901;
  max-width:800px;
  width:min(800px, calc(100% - 32px));
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:900;
}

body.modal-open{overflow:hidden;}


/* Ventana flotante para NUEVO EQUIPO */
#assetFormCard{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:950;
  width:min(800px, calc(100% - 32px));
  max-height:calc(100vh - 80px);
  overflow-y:auto;
}

#assetFormCard .modal-close{
  position:absolute;
  top:10px;
  right:10px;
  background:transparent;
  border:none;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  color:#666;
}

#assetFormCard .modal-close:hover{
  color:#000;
}

/* Perfil de usuario */
#userProfileCard{
  max-width:320px;
  margin:0 auto 16px auto;
}

.user-profile{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.user-avatar{
  width:96px;
  height:96px;
  border-radius:50%;
  background:#e0e0e0;
  margin-bottom:8px;
}

.user-field{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.user-field label{
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--muted);
  margin-bottom:4px;
}

.user-field input{
  max-width:260px;
  text-align:center;
}

#userProfileCard .btn-danger{
  margin-top:16px;
}