/*
 * EduTec Manager — CSS Docentes
 * Archivo: assets/css/c-docentes.css
 * Versión: 1.0.0
 *
 * Todos los selectores de tarjetas y grid van acotados a .etm-doc-wrap
 * para ganar especificidad sobre Elementor sin afectar otros shortcodes.
 */

/* ============================================================
   HEADER: buscador + botón agregar
   ============================================================ */

.etm-doc-wrap .etm-doc-header {
    display:      flex !important;
    align-items:  center !important;
    gap:          12px !important;
    flex-wrap:    wrap !important;
    margin-bottom: 18px !important;
}

/* ============================================================
   GRID DE TARJETAS
   ============================================================ */

.etm-doc-wrap #etm-doc-grid {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap:                   16px !important;
}

/* ============================================================
   TARJETA DOCENTE
   ============================================================ */

.etm-doc-wrap .etm-doc-card {
    background:     #f3f3f3 !important;
    border:         1px solid #a8a8a8 !important;
    border-radius:  12px !important;
    overflow:       hidden !important;
    display:        flex !important;
    flex-direction: column !important;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.2);
    transition:     box-shadow .2s;
}

.etm-doc-wrap .etm-doc-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
}

/* Top de tarjeta: flex horizontal, foto fija a la izquierda */
.etm-doc-wrap .etm-doc-card-top {
    display:        flex !important;
    flex-direction: row !important;
    align-items:    center !important;
    gap:            12px !important;
    padding:        14px !important;
    cursor:         pointer;
}

.etm-doc-wrap .etm-doc-card-foto {
    width:        56px !important;
    height:       68px !important;
    min-width:    56px !important;
    max-width:    56px !important;
    object-fit:   cover !important;
    border-radius: 8px !important;
    border:       1px solid #e2e8f0 !important;
    flex-shrink:  0 !important;
    display:      block !important;
}

.etm-doc-wrap .etm-doc-card-info {
    flex:      1 !important;
    min-width: 0 !important;
}

.etm-doc-wrap .etm-doc-card-nombre {
    display:       block !important;
    font-size:     14px !important;
    font-weight:   600 !important;
    color:         #1e293b !important;
    white-space:   nowrap !important;
    overflow:      hidden !important;
    text-overflow: ellipsis !important;
}

.etm-doc-wrap .etm-doc-card-rfc {
    display:    block !important;
    font-size:  11px !important;
    color:      #94a3b8 !important;
    margin-top: 2px !important;
}

.etm-doc-wrap .etm-doc-card-badge {
    display:       inline-block !important;
    padding:       2px 8px !important;
    border-radius: 20px !important;
    font-size:     10px !important;
    font-weight:   600 !important;
    margin-top:    4px !important;
}

.etm-doc-wrap .etm-badge-activo  { background: #dcfce7 !important; color: #16a34a !important; }
.etm-doc-wrap .etm-badge-inactivo { background: #fee2e2 !important; color: #dc2626 !important; }

/* ============================================================
   FOOTER DE TARJETA: iconos WhatsApp / correo / ver más
   ============================================================ */

.etm-doc-wrap .etm-doc-card-footer {
    border-top:  1px solid #f1f5f9 !important;
    padding:     10px 14px !important;
    display:     flex !important;
    align-items: center !important;
    gap:         8px !important;
}

.etm-doc-wrap .etm-doc-icon-btn {
    width:           30px !important;
    height:          30px !important;
    border-radius:   50% !important;
    border:          none !important;
    cursor:          pointer !important;
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    font-size:       14px !important;
    transition:      background .15s;
    text-decoration: none !important;
    flex-shrink:     0 !important;
}

.etm-doc-wrap .etm-doc-icon-btn.wa      { background: #dcfce7 !important; color: #16a34a !important; }
.etm-doc-wrap .etm-doc-icon-btn.wa:hover { background: #bbf7d0 !important; }
.etm-doc-wrap .etm-doc-icon-btn.wa-pub  { background: #d1fae5 !important; color: #059669 !important; }
.etm-doc-wrap .etm-doc-icon-btn.wa-pub:hover { background: #a7f3d0 !important; }
.etm-doc-wrap .etm-doc-icon-btn.mail    { background: #dbeafe !important; color: #2563eb !important; }
.etm-doc-wrap .etm-doc-icon-btn.mail:hover { background: #bfdbfe !important; }
.etm-doc-wrap .etm-doc-icon-btn.disabled {
    opacity:        .35 !important;
    cursor:         default !important;
    pointer-events: none !important;
}

.etm-doc-wrap .etm-doc-footer-ver { margin-left: auto !important; }

.etm-doc-wrap .etm-doc-tel-label {
    font-size:   10px !important;
    color:       #94a3b8 !important;
    line-height: 1 !important;
}

/* ============================================================
   PAGINACIÓN
   ============================================================ */

.etm-doc-wrap .etm-doc-paginacion {
    display:         flex !important;
    justify-content: center !important;
    gap:             6px !important;
    margin-top:      20px !important;
    flex-wrap:       wrap !important;
}

.etm-doc-wrap .etm-doc-paginacion button {
    padding:       5px 12px !important;
    border:        1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background:    #fff !important;
    cursor:        pointer !important;
    font-size:     13px !important;
}

.etm-doc-wrap .etm-doc-paginacion button.active {
    background:   #2563eb !important;
    color:        #fff !important;
    border-color: #2563eb !important;
}

.etm-doc-wrap .etm-doc-paginacion button:hover:not(.active) {
    background: #f1f5f9 !important;
}

/* ============================================================
   SKELETON DE CARGA
   ============================================================ */

.etm-doc-wrap .etm-doc-skeleton {
    background:    #f1f5f9 !important;
    border-radius: 8px !important;
    height:        140px !important;
    animation:     etm-doc-pulse 1.4s ease-in-out infinite;
}

@keyframes etm-doc-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

/* ============================================================
   MODAL: FOTO DE PERFIL
   ============================================================ */

.etm-doc-modal-foto-wrap {
    text-align:    center;
    margin-bottom: 16px;
}

.etm-doc-modal-foto {
    width:         80px;
    height:        96px;
    object-fit:    cover;
    border-radius: 10px;
    border:        2px solid #e2e8f0;
    cursor:        pointer;
    transition:    border-color .2s;
    display:       block;
    margin:        0 auto 8px;
}

.etm-doc-modal-foto:hover { border-color: #2563eb; }

.etm-doc-modal-foto-label {
    font-size: 11px;
    color:     #94a3b8;
}

/* ============================================================
   MODAL: FORMULARIO
   ============================================================ */

.etm-doc-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px 16px;
}

.etm-doc-form-grid .etm-col-full { grid-column: 1 / -1; }

.etm-doc-field label {
    display:        block;
    font-size:      11px;
    font-weight:    600;
    color:          #64748b;
    margin-bottom:  4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.etm-doc-field input,
.etm-doc-field select {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid #e2e8f0;
    border-radius: 6px;
    font-size:     13px;
    outline:       none;
    box-sizing:    border-box;
}

.etm-doc-field input:focus,
.etm-doc-field select:focus { border-color: #2563eb; }

.etm-doc-info-perfil {
    background:    #f8fafc;
    border:        1px solid #e2e8f0;
    border-radius: 6px;
    padding:       8px 12px;
    font-size:     12px;
    color:         #64748b;
}

/* ============================================================
   TOGGLE ACTIVO / INACTIVO
   ============================================================ */

.etm-doc-toggle-row {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     10px 0;
    border-top:  1px solid #f1f5f9;
    margin-top:  8px;
}

.etm-doc-toggle-label {
    font-size:   13px;
    font-weight: 600;
    flex:        1;
}

.etm-toggle {
    position: relative;
    display:  inline-block;
    width:    42px;
    height:   24px;
}

.etm-toggle input { opacity: 0; width: 0; height: 0; }

.etm-toggle-slider {
    position:      absolute;
    inset:         0;
    background:    #e2e8f0;
    border-radius: 24px;
    cursor:        pointer;
    transition:    .3s;
}

.etm-toggle-slider::before {
    content:       "";
    position:      absolute;
    width:         18px;
    height:        18px;
    left:          3px;
    bottom:        3px;
    background:    #fff;
    border-radius: 50%;
    transition:    .3s;
}

.etm-toggle input:checked + .etm-toggle-slider            { background: #16a34a; }
.etm-toggle input:checked + .etm-toggle-slider::before    { transform: translateX(18px); }
.etm-card{background: #f3f3f3!important;}