/* =========================================================
Archivo: coordinador.css
Ruta: /coordinadores-mvp/css/coordinador.css
Función:
- Interfaz compacta para períodos, coordinadores y revisión.
- Diferenciar el favorito del estudiante y la selección del coordinador.
========================================================= */
:root{
  --bg:#f3f6fa;
  --surface:#fff;
  --surface-soft:#f7f9fc;
  --text:#0c1f36;
  --muted:#61758d;
  --line:#d8e1ec;
  --primary:#123f70;
  --primary-dark:#0a2d52;
  --primary-soft:#eaf2fb;
  --success:#178246;
  --success-bg:#e8f7ee;
  --warning:#966100;
  --warning-bg:#fff6df;
  --danger:#ba261e;
  --danger-bg:#fff0ef;
  --info:#145da0;
  --info-bg:#eaf3ff;
  --gold:#d6ad35;
  --gold-dark:#7a5600;
  --gold-soft:#fff8db;
  --gold-soft-2:#fffdf4;
  --shadow:0 12px 30px rgba(17,43,74,.08);
  --radius:16px;
}

*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.45}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled,select:disabled,input:disabled,textarea:disabled{cursor:not-allowed;opacity:.62}
textarea{resize:vertical}

.app-header{padding:18px 20px;background:linear-gradient(135deg,#0a2748,#1c4f7e);color:#fff;border-bottom:4px solid #d2b76f}
.app-header__content{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:14px;align-items:center}
.brand__mark{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.42);border-radius:15px;background:rgba(4,21,41,.32);font-size:1.05rem;font-weight:900;color:#ffeab2}
.app-badge{margin:0 0 2px;font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#ffeab2}
.app-header h1{margin:0;font-size:clamp(1.45rem,3vw,2rem);line-height:1.1}
.app-header p{margin:4px 0 0;color:rgba(255,255,255,.84);font-size:.92rem}
.version-badge{align-self:start;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);font-size:.75rem;font-weight:800}

.app-container{width:min(1180px,calc(100% - 28px));margin:16px auto 36px}
.card{margin-bottom:14px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}

.control-grid{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(260px,1.25fr) auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px}
.field>span,.field label{font-size:.86rem;font-weight:800;color:var(--text)}
.field input,.field select,.field textarea{width:100%;border:1px solid #cbd7e5;border-radius:11px;background:#fff;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.field input,.field select{min-height:42px;padding:0 12px}
.field textarea{min-height:86px;padding:11px 12px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,63,112,.12)}

.btn,.tab-btn,.row-action,.diagnostic-link,.icon-btn{border:0;border-radius:10px;font-weight:800;transition:transform .12s,filter .12s,background .12s}
.btn:hover,.tab-btn:hover,.row-action:hover,.diagnostic-link:hover{transform:translateY(-1px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 15px}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark)}
.btn--secondary{background:var(--primary-soft);color:var(--primary)}
.btn--ghost{background:#eef2f7;color:var(--primary)}
.btn--danger{background:var(--danger);color:#fff}
.refresh-btn{min-width:110px}

.coordinator-summary{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border-left:4px solid #d2b76f;border-radius:10px;background:var(--surface-soft)}
.coordinator-summary strong{color:var(--primary)}
.coordinator-summary span{color:var(--muted);font-size:.86rem}

.status-message{margin-top:12px;min-height:18px;border-radius:10px;font-weight:700;font-size:.9rem}
.status-message:not(:empty){padding:10px 12px}
.status-message.is-info{background:var(--info-bg);color:var(--info)}
.status-message.is-success{background:var(--success-bg);color:var(--success)}
.status-message.is-warning{background:var(--warning-bg);color:var(--warning)}
.status-message.is-error{background:var(--danger-bg);color:var(--danger)}

.content-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab-btn{min-height:38px;padding:0 15px;border:1px solid var(--line);background:#fff;color:var(--primary)}
.tab-btn.is-active{border-color:var(--primary);background:var(--primary);color:#fff}
.counter-box{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;background:var(--surface-soft);color:var(--muted);font-size:.78rem;font-weight:800;text-transform:uppercase}
.counter-box strong{color:var(--text);font-size:1.15rem}

.table-tools{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:12px}
.table-tools h2{margin:2px 0 0;font-size:1.25rem}
.section-kicker{margin:0;color:var(--primary);font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.field--search{width:min(320px,100%)}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px}
.data-table{width:100%;min-width:840px;border-collapse:collapse;background:#fff}
.data-table th,.data-table td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.data-table th{background:#edf3fa;color:#23456b;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase}
.data-table tbody tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:#fafcff}
.empty-cell{padding:24px!important;text-align:center!important;color:var(--muted)}
.row-action{min-height:34px;padding:0 11px;background:var(--primary-soft);color:var(--primary)}
.state-pill{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap}
.state-pending{background:var(--info-bg);color:var(--info)}
.state-approved{background:var(--success-bg);color:var(--success)}
.state-returned{background:var(--danger-bg);color:var(--danger)}

.diagnostic-link{display:block;margin-left:auto;padding:6px 10px;background:transparent;color:var(--muted);font-size:.8rem}
.diagnostico-card{margin-top:10px}
.is-hidden{display:none!important}
.diagnostic-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.diagnostic-head h2{margin:2px 0 0;font-size:1.2rem}
.result-box{margin:12px 0 0;padding:14px;border-radius:11px;background:#0c1f36;color:#dce9f7;white-space:pre-wrap;overflow:auto;font-size:.82rem}

.loading-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(7,24,43,.46);backdrop-filter:blur(2px)}
.loading-overlay[hidden]{display:none}
.loading-card{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:14px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.loading-spinner{width:24px;height:24px;border:3px solid #d7e3ef;border-top-color:var(--primary);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

.modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:18px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(5,18,34,.68);backdrop-filter:blur(3px)}
.modal__card{position:relative;width:min(940px,100%);max-height:calc(100vh - 36px);overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.28)}
.modal__header{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal__header h2{margin:2px 0 3px;font-size:1.35rem}
.modal__header p{margin:0;color:var(--muted)}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;background:var(--primary-soft);color:var(--primary);font-size:1.55rem}
.modal__body{max-height:calc(100vh - 190px);overflow-y:auto;padding:18px}
.modal__footer{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid var(--line);background:var(--surface-soft)}

.student-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:15px}
.student-info-grid>div{padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft)}
.student-info-grid span{display:block;margin-bottom:4px;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase}
.student-info-grid strong{display:block;overflow-wrap:anywhere;font-size:.9rem}

.proposal-list{display:grid;gap:10px}
.proposal-card{position:relative;padding:13px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .18s,background .18s,box-shadow .18s,transform .18s}
.proposal-card.is-favorite{border:2px solid var(--gold);background:linear-gradient(145deg,var(--gold-soft),var(--gold-soft-2));box-shadow:0 9px 24px rgba(154,112,9,.16)}
.proposal-card.is-favorite h3{color:var(--gold-dark)}
.proposal-card.is-selected{border-color:var(--primary);box-shadow:0 0 0 3px rgba(18,63,112,.11)}
.proposal-card.is-favorite.is-selected{border-color:#b88b12;box-shadow:0 0 0 3px rgba(18,63,112,.13),0 10px 26px rgba(154,112,9,.18)}
.proposal-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.proposal-card__title{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
.proposal-card h3{margin:0;font-size:.95rem;color:var(--primary)}
.proposal-card p{margin:8px 0 0;line-height:1.5}
.proposal-card label{flex:0 0 auto;padding-top:2px;font-size:.8rem;font-weight:700;color:var(--muted)}
.favorite-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid rgba(122,86,0,.2);border-radius:999px;background:linear-gradient(135deg,#e2ba43,#c99716);color:#392700;box-shadow:0 3px 9px rgba(122,86,0,.15);font-size:.7rem;font-weight:900;line-height:1;white-space:nowrap;text-transform:uppercase;letter-spacing:.025em}
.favorite-badge[hidden]{display:none}
.resolution-box{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}
.resolution-box #estadoModal{grid-column:1/-1}

@media(max-width:850px){
  .control-grid{grid-template-columns:1fr 1fr}
  .refresh-btn{grid-column:1/-1}
  .student-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resolution-box{grid-template-columns:1fr}
}

@media(max-width:620px){
  .app-header__content{grid-template-columns:46px minmax(0,1fr)}
  .brand__mark{width:46px;height:46px}
  .version-badge{display:none}
  .app-container{width:min(100% - 18px,1180px);margin-top:10px}
  .card{padding:14px}
  .control-grid{grid-template-columns:1fr}
  .refresh-btn{grid-column:auto;width:100%}
  .content-toolbar,.table-tools{align-items:stretch;flex-direction:column}
  .counter-box{width:max-content}
  .field--search{width:100%}
  .student-info-grid{grid-template-columns:1fr}
  .modal{padding:8px}
  .modal__card{max-height:calc(100vh - 16px)}
  .modal__body{max-height:calc(100vh - 176px);padding:14px}
  .modal__footer{flex-wrap:wrap}
  .modal__footer .btn{flex:1 1 135px}
  .proposal-card__head{align-items:stretch;flex-direction:column}
  .proposal-card label{padding-top:0}
}