/* ════════════════════════════════════════════════════════
   Módulo Convocatorias — estilos portados del HTML original.
   Todo scopeado bajo .conv-root para no chocar con el shell.
   ════════════════════════════════════════════════════════ */

.conv-root * { box-sizing: border-box; }
.conv-root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #FAFAF7;
  color: #1a1a1a;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  border-radius: 12px;
}
.conv-root .wrap { max-width: 1100px; margin: 0 auto; padding: 24px 20px 80px; }

/* HEADER */
.conv-root .header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid #E8E6DF; flex-wrap: wrap; gap: 12px;
}
.conv-root .title-block h1 {
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
}
.conv-root .subtitle { font-size: 12px; color: #8a8676; margin-top: 4px; letter-spacing: 0.02em; }
.conv-root .header-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* SYNC DOT */
.conv-root .sync { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #8a8676; padding: 4px 10px; border-radius: 20px; background: #F2F0E9; }
.conv-root .sync .dot { width: 7px; height: 7px; border-radius: 50%; background: #9AA8A0; }
.conv-root .sync.syncing .dot { background: #D4A547; animation: conv-pulse 1s infinite; }
.conv-root .sync.synced .dot { background: #5B8C5A; }
.conv-root .sync.error .dot { background: #C7553B; }
.conv-root .sync.local .dot { background: #B8B3A0; }
@keyframes conv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* BUTTONS */
.conv-root .btn {
  padding: 7px 14px; font-size: 13px; border: 1px solid #D6D3C7; border-radius: 8px;
  background: white; cursor: pointer; color: #1a1a1a; font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.conv-root .btn:hover { background: #F2F0E9; border-color: #B8B3A0; }
.conv-root .btn.primary { background: #1a1a1a; color: white; border-color: #1a1a1a; }
.conv-root .btn.primary:hover { background: #333; }
.conv-root .btn-sm { padding: 4px 10px; font-size: 11px; border-radius: 6px; border: 1px solid #E0DDD0; background: transparent; cursor: pointer; color: #5a5750; font-family: inherit; }
.conv-root .btn-sm:hover { background: #F2F0E9; color: #1a1a1a; }
.conv-root .btn-sm.danger:hover { color: #C7553B; border-color: #C7553B; }

/* TABS */
.conv-root .tabs { display: inline-flex; background: #EFEDE5; border-radius: 10px; padding: 3px; gap: 2px; }
.conv-root .tab { padding: 7px 16px; border-radius: 7px; border: none; background: transparent; cursor: pointer; font-size: 13px; color: #6a6760; font-family: inherit; font-weight: 500; }
.conv-root .tab.active { background: white; color: #1a1a1a; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }

/* STATS */
.conv-root .stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.conv-root .stat {
  background: white; border: 1px solid #E8E6DF; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color 0.15s, transform 0.1s;
}
.conv-root .stat:hover { border-color: #B8B3A0; }
.conv-root .stat.active { border-color: #1a1a1a; background: #1a1a1a; color: white; }
.conv-root .stat .num { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-family: ui-serif, Georgia, serif; }
.conv-root .stat .lbl { font-size: 11px; color: #8a8676; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }
.conv-root .stat.active .lbl { color: #c0bdb0; }

/* SEARCH */
.conv-root .toolbar { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.conv-root .search {
  flex: 1; min-width: 200px; padding: 9px 12px; border: 1px solid #E0DDD0; border-radius: 8px;
  font-size: 13px; background: white; font-family: inherit; color: #1a1a1a;
}
.conv-root .search:focus { outline: none; border-color: #1a1a1a; }
.conv-root .clear-filter { font-size: 11px; color: #8a8676; cursor: pointer; padding: 4px 8px; }
.conv-root .clear-filter:hover { color: #1a1a1a; }

/* TABLE */
.conv-root .table-wrap { background: white; border: 1px solid #E8E6DF; border-radius: 12px; overflow: hidden; }
.conv-root table { width: 100%; border-collapse: collapse; }
.conv-root th { padding: 12px 14px; font-size: 10px; font-weight: 600; color: #8a8676; text-align: left; text-transform: uppercase; letter-spacing: 0.08em; background: #F8F6EE; border-bottom: 1px solid #E8E6DF; }
.conv-root td { padding: 14px; border-bottom: 1px solid #F0EEE5; vertical-align: top; font-size: 13px; }
.conv-root tr:last-child td { border-bottom: none; }
.conv-root tr:hover td { background: #FBFAF4; }

.conv-root .cell-main { font-weight: 500; line-height: 1.35; }
.conv-root .cell-sub { font-size: 12px; color: #8a8676; margin-top: 3px; line-height: 1.35; }
.conv-root .cell-date { font-weight: 500; font-size: 13px; }
.conv-root .days { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; margin-top: 4px; }
.conv-root .days.urgent { background: #FBEAE3; color: #B23B1A; }
.conv-root .days.soon { background: #FAEFD8; color: #8A5A06; }
.conv-root .days.ok { background: #EDF1E6; color: #4A6B3A; }
.conv-root .days.past { background: #EEEEEA; color: #8a8676; }

/* BADGES */
.conv-root .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.conv-root .b-considerar { background: #FBEAF0; color: #72243E; }
.conv-root .b-preparacion { background: #E6F1FB; color: #0C447C; }
.conv-root .b-pendiente { background: #FAEEDA; color: #633806; }
.conv-root .b-enviada { background: #EAF3DE; color: #27500A; }
.conv-root .b-seleccionada { background: #FAECE7; color: #712B13; }
.conv-root .b-publicada { background: #EEEDFE; color: #3C3489; }
.conv-root .b-realizada { background: #E1F5EE; color: #085041; }

.conv-root .state-select {
  margin-top: 6px; font-size: 11px; border: 1px solid #E0DDD0; border-radius: 20px;
  padding: 2px 8px; cursor: pointer; font-family: inherit;
  background: white;
}

.conv-root .actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* MODAL */
.conv-root .modal-bg {
  position: fixed; inset: 0; background: rgba(20,20,15,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 16px; backdrop-filter: blur(2px);
}
.conv-root .modal {
  background: white; border-radius: 14px; padding: 24px;
  width: 100%; max-width: 460px; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.conv-root .modal h3 { font-size: 17px; font-weight: 600; margin: 0 0 18px; font-family: ui-serif, Georgia, serif; }
.conv-root .field { margin-bottom: 14px; }
.conv-root .field label { display: block; font-size: 11px; color: #8a8676; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.conv-root .field input, .conv-root .field select {
  width: 100%; padding: 9px 11px; font-size: 14px; border: 1px solid #E0DDD0;
  border-radius: 8px; background: white; font-family: inherit; color: #1a1a1a;
}
.conv-root .field input:focus, .conv-root .field select:focus { outline: none; border-color: #1a1a1a; }
.conv-root .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* EMPTY */
.conv-root .empty { text-align: center; padding: 60px 20px; color: #8a8676; }
.conv-root .empty-title { font-size: 15px; margin-bottom: 6px; color: #5a5750; }

/* MOBILE */
@media (max-width: 640px) {
  .conv-root .wrap { padding: 16px 12px 80px; }
  .conv-root .title-block h1 { font-size: 22px; }
  .conv-root .stats { grid-template-columns: repeat(2, 1fr); }
  .conv-root .table-wrap { background: transparent; border: none; }
  .conv-root table thead { display: none; }
  .conv-root table, .conv-root tbody, .conv-root tr, .conv-root td { display: block; width: 100%; }
  .conv-root tr {
    background: white; border: 1px solid #E8E6DF; border-radius: 10px;
    margin-bottom: 10px; padding: 4px 0;
  }
  .conv-root tr:hover td { background: transparent; }
  .conv-root td { border-bottom: 1px solid #F4F2EA; padding: 10px 14px; }
  .conv-root td:last-child { border-bottom: none; }
  .conv-root td::before {
    content: attr(data-label); display: block; font-size: 10px; color: #8a8676;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600;
  }
  .conv-root .header { align-items: flex-start; }
}